序文
うーん…どうすれば…
どうしたんだ？ ふすまぱん
人気のブログって、二人のキャラが掛け合いをしてたりするじゃない？
このはてなブログもそういうデザインにしたいんだけど…
そんなことか、それなら簡単にできるぞ。
なんといっても、ボクはウェブデザイン技能士3級だからな！（キリッ）
えっ！本当に？！じゃあ早速おしえてください！
（ウェブデザイン技能士って、取る意味のない資格だって聞いたことあるけど…それは黙っておこう。）
この下のリンクのブログを参照させてもらったよ。
【はてなブログ】吹き出しで会話形式にするのをめっちゃ楽にしてみた | SHIROMAG (notitle-weblog.c
えっ！他のブログを参照してるじゃん！
ウェブデザイン技能士の意味は？？
何を言ってるんだ、ふすまぱん。
「車輪の再発明」という言葉を知らないのか？
他の人が作ったものはドンドン参考にすべきなんだよ。
・・・。
というわけで解説していくよ。
SHIROMAさん、本当にありがとうございます。
目次
はてなブログを対話形式にする方法
①使用する画像のアップロード
１ まずは使いたい顔アイコンの画像を用意する。
２ 用意した画像を「はてなフォトライフ」にアップロードする。
↓下の画像の赤丸のところから「はてなフォトライフ」に行ける！
↓下の画像の赤丸のところを押して、使いたい画像をアップロード。
３ 使いたい画像を右クリックして「画像リンクをコピー」を選ぶ。コピーしたものはメモ帳などに貼っておく。
（ブラウザはEdgeを使ってます。他のブラウザだと違うかも。）
②CSSコードを入れる
１ 先ほど参考にさせてもらったSHIROMAさんのリンク先からコードをコピーしてくる。
２ ブログのデザイン画面を開き、下の画像のCSSコードのところに貼る。
３ コピペしたコードの最後の部分
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
の「クラス名」の部分に自分の好きな名前を設定し、「画像のURL」のところには、さきほど「はてなフォトライフ」からコピーした画像リンクのURLを貼ろう。
４ スマホでもきれいに表示できるようにレスポンシブデザインの設定もする。
↓下のように、スマホのアイコンを選んで、レスポンシブデザインにチェックを入れる。
③実際に使ってみる
あとはブログを書くときに「HTML編集」を選択し、
右に画像を出したいなら<p class="l-fuki クラス名">入力したいテキスト</p>
左に画像を出したいなら<p class="r-fuki クラス名">入力したいテキスト</p>
と入力。
「クラス名」には先ほど自分で設定したクラス名。
「入力したいテキスト」に文字を入れれば完成だ。
↓コレが…
↓こうなる！！
まとめ
わーい、ボクにもできたよ。
いやー、初めて解説記事を書いてみたけど、意外と時間がかかるな…。
ちょっと疲れちゃったよ。
ここまで読んでいただけまして、ありがとうございました😊
追記
ただコードをコピペするのも面白くないので、簡単にコードの解説をしてみることにしました。
①~⑥まで番号を振ったので、それぞれを説明していきます。
なんといっても、ボクはウェブデザイン技能士3級だからね！（キリッ）
貼り付けたコード
①
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: calc(100% - 82px);
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #ddd;
box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
background-color: #fff;
z-index: 1;
box-sizing: border-box;
}
②
.entry-content .l-fuki {
margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
margin: 20px 0 36px auto;
}
③
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #ddd;
border-bottom: 2px solid #ddd;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
④
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 60px;
height: 60px;
top: -6px;
border-radius: 50%;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
box-sizing: border-box;
}
.entry-content .l-fuki::after {
right: -82px;
}
.entry-content .r-fuki::after {
left: -82px;
}
⑤
@media screen and (min-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 80px;
height: 80px;
}
.entry-content .l-fuki,
.entry-content .r-fuki {
width: calc(100% - 106px);
}
.entry-content .l-fuki::after {
right: -106px;
}
.entry-content .r-fuki::after {
left: -106px;
}
}
⑥
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
①について
これは最初の
「.entry-content .l-fuki,
.entry-content .r-fuki」
という部分で「i-fuki」と「r-fuki」というクラスを設定しますよ~、と言っています。
そして、そのあとの「position: relative;~」以降で、「i-fuki」と「r-fuki」というクラスはこういうものですよ~と内容について書いています。
具体的に言うと、フキダシの白い四角部分のカタチを決めています。
試しにこの部分の数字や色をいじってみると、フキダシの大きさや色が変わることがわかると思います。
②について
これは「l-fuki」は画面の左寄り、「r-fuki」は画面の右寄りに表示させる必要があるので、その部分の幅を設定しています。
③について
これはフキダシの「尾」というか、三角にちょっと飛び出した部分のカタチを作るためのコードが書かれています。この部分を消すと、フキダシがただの四角になることがわかると思います。
④について
この部分はフキダシの横に出るキャラの画像の部分を設定しています。キャラの画像を出すための丸い枠を作っています。
⑤について
これはPCの画面（478px以上）に合わせて吹き出しが表示されるためのスタイルを決めています。
ここでは、スマホ用のサイズを記述していないので、使用しているデザインによってはスマホ画面できれいに表示されないという方もいると思います。
その場合はスマホ画面サイズ用のCSSを追加する必要があるかもしれません。
⑥について
これは本文中でも触れましたが、「l-fuki」「r-fuki」というそれぞれのクラスに任意の名前をつけ、表示させる画像のURLを設定する部分になります。
というわけだ。よく分かったかな？
書いてあるコードの意味はなんとなく分かるけど、自分で作るのは少し大変だね。
以上、改めて、ここまで読んでいただき、ありがとうございました。
ランキングに参加中です！
クリックお願いします！
⇩⇩⇩
