超絶簡単☆アイコンによる吹き出しカスタマイズ@はてなブログ
最近暑いねー@bakumu
梅雨でジトジト@siruku
私はクーラーに入り浸りだよー@ren
私も夏バテしてるー@sachi
っと言うような感じで、良く見るアイコンの吹き出しカスタマイズの
やり方をマスターしたので、わかりやすくやり方を解説したいと思います。
これをすることによって、ブログの見た目はもちろん、
読者の心をうまく掴めたり、引き込めたりができるのかなと思います。
吹き出しとは何か?
冒頭そのままが吹き出しとなります。
好きなアイコンにお話しさせているように表現させ、会話形式にすることで、読者の気持ちの表現やブログ自体が見やすくなります。
確かに見易かったりするねー♪
ぜひ、この際やり方をマスターしてください。超絶簡単です。
吹き出しのやり方
では、さっそく吹き出しのやり方の手順を紹介していきます。
1.アイコン、画像を用意する
まずは、好きなアイコンや画像を用意します。
フリー素材で作れるサイトもあるので、活用してみるといいと思います。私はちなみに下記サイトを利用させていただき、冒頭の4つのキャラを用意しました。
キャラは2~4つは用意されると、いろいろな応用が利くので、
便利かと思います。
ちびドットアイコンジェネレータ -Icon Generators-
2.アイコン、画像をはてなフォトライフにアップし、画像のURLを取得する
手順1:まずは、①~②をクリックし、はてなフォトライブにアクセスします。
手順2:トップフォルダが太字になっているので、③のHatenaBlogをクリックし、
④のようにHatenaBlogが太字になっていることを確認します。
手順3:”⑤”アップロードをクリックし、アイコン、画像をアップロードします。
手順4:アップロードが完了すると、"⑥"のように表示されますので、
画像の上で右クリックし、"⑦”画像のURLをコピーします。
コピーしたURLはメモ帳か何かに保存してください。
→このURLを指定することで意図した画像を吹き出しとして使用できます。
3.吹き出し設定の為のCSSコードの貼り付け
手順1:はてなブログの設定画面の左メニューから"①”デザインをクリックし、
"②”のカスタマイズアイコンをクリックします。
手順2:"③”のデザインCSSを開き、下記のCSSコードを貼り付けます。
<貼り付けるCSSコード>
/* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
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: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.クラス名1::after {background-image:url(画像のURL);}
.クラス名2::after {background-image:url(画像のURL);}
手順3:CSSコードの貼り付け後、最下部2行のクラス名1、画像のURL部を書き換える 必要があります。
クラス名1→名前のようなものと捉えてください。アイコンの名前にするといいかと思います。
画像のURL→前述の手順の中で、メモ帳に記録したURLを貼り付けてください。
※CSSコード中の () や . などの記号は絶対消してはいけません。
書き換えるのは文字部のみです。
手順4:上記書き換え後は、"④”の変更を保存するをクリックして、設定完了です。
ちなみに私の場合は、以下のようなコードにしました。
吹き出しを使ってみる
吹き出しのブログへの記入はHTML編集画面で記入します。
<p class="l-fuki クラス名">コメント</p>
<p class="r-fuki クラス名">コメント</p>
上記がベース分になります。
クラス名を上記手順③で指定した名前に書き換えます。
テキストを好きなコメントに書き換えます。
また、文中の”l-fuki”の"l”はコメントを左に表示させることを意味します。
"r"だと右を意味します。
HTML記入後にプレビュー画面で確認すると、
できましたか?にっひっひ
アイコンを増やしたい場合は、CSSコードをコピーしてさらに下に貼り付ければ
増やすことができますので、試してみるといいかと思います。
アイコンによる吹き出しカスタマイズまとめ
設定は面倒ですが、一度設定してしまえば使うのは簡単です。
私も初心者ですので、最初は抵抗ありましたが、
やってみると意外にできて、達成感がありました。
みんなも一度お試しあれ@bakumu
↓参考にさせていただいたブログ
はてなブログで吹き出しを使った会話形式を作るカスタマイズ - Random Life Blog
~Siate felici~