出来ることならHTMLやCSSを学んでブログカスタムしたいサタン (@needs_blog_com) です。
ふとブログ記事内に「吹き出し」を作りたいと思い、数分で作りました！
はてなブログはほんと便利で簡単にブログカスタム出来るんです、なぜなら先人達がカスタム方法を記事にしてくれているから！今回はこちらのブログを参考にさせて頂きました。
参考ブログ：NO TITLE
吹き出しは簡単に作れる！
Google Chrome拡張とCSSを使えば簡単に「吹き出し」を作ることが出来ます！
こんな感じで↓
前から吹き出し作ってみたかったんだぁ・・・
たまにこうゆうの↑見ますよね？これが「吹き出し」です！
※Google Chrome拡張って何？
参考： [ Chrome ] 拡張機能とは? インストールするだけでChromeをパワーUP!
※CSSって何？
参考：[初心者]CSSってなに?という質問にWEB歴10年の人が全力で答えてみる | ヨッセンス
作り方は簡単3ステップです！
- Google Chromeの拡張機能をインストールする。
- CSSをコピペして少しイジる。（PC用とスマホ用）
- 見たままモードでGoogle Chromeの拡張機能を使用する。
どうですか？簡単そうでしょ？さぁ、やってみましょう！
まずはGoogle Chromeの拡張機能をインストール！
まずはGoogle Chromeの拡張機能をインストールしましょう！
コチラからインストール出来ます↓
Chrome Add-on for Hatena - Chrome ウェブストア
右上にこのボタンが出るのでクリック！
インストール出来ると検索窓（検索する時に文字を打つ所またはURLがある所）の横にコレ↓が表示されます。
星の横にアイコンがあったらインストール完了です！
次のステップに進みましょう。
【SPONSORED LINK】
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;
}
}
.クラス名::after {background-image:url(画像のURL);}
引用：NO TITLE
コピペ出来ましたか？
出来たら赤字の「クラス名」と「画像のURL」を書き換えます！
クラス名は自分の好きなものにして下さい！但し、半角の英数字・ハイフン( - )・アンダーバー( _ )を使い、半角英字始まりで入力して下さい。
画像のURLは吹き出しで使いたい画像のURLを取得して入力しましょう。
画像のURLの取得方法はコチラ
ダッシュボード→記事を書く→写真を投稿→＋写真を投稿のボタンをクリックして、吹き出しのアイコンに設定したい写真を選択→編集オプション→アイキャッチ画像の項目内にあるアイコン写真をクリック→URLが表示されるのでコピーで取得出来ます！
コチラの方法でも画像URLの取得が出来ます↓
【はてなブログ】はてなフォトライフにアップした画像のURLを取得する方法 - カズ味噌
書き換え終わったら
ダッシュボード→デザイン→カスタマイズ→デザインCSSにコピペしましょう！
これでPC版のCSSはカスタム完了です！
おまけ
「クラス名」と「画像のURL」を増やせば吹き出しで出てくる登場人物を増やせます！
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
一人目
二人目
三人目
スマホ版のCSSは
ダッシュボード→デザイン→スマートフォン→ヘッダー→タイトル下にペーストして下さい！その際にCSSを<style>と</style>でサンドイッチして下さい。
/* 吹き出しのCSS */
<style>
.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;
}
}
.クラス名::after {background-image:url(画像のURL);}
</style>
レスポンシブにしている場合この設定は省いていいそうです・・・
見たままモードでGoogle Chrome拡張機能を使う！
さぁ！吹き出しを記事内で表示させますよーーー。
吹き出しとして使いたい文章を選択し、星の横のアイコンをクリックしてみて下さい！
そうするとこれが出てきます↓
「r-fuki クラス名」と入力し、Add Classをクリックすると吹き出しが出来ちゃいます！
※僕はクラス名を「satan」にしているので「r-fuki satan」と入力・・・
こんな感じでね！
吹き出しが使えるようになったぞ〜い！
「r-fuki クラス名」で入力すると吹き出しが右側に表示されます！左側に表示したい場合は「l-fuki クラス名」で入力して下さいね。
注意点
見たままモードの編集画面では吹き出しになっているか確認が出来ないので必ずプレビュー画面で確認をお願いします。
吹き出しの途中で改行する場合は必ず「Shift」+「Enter」で改行して下さい。
「r-fuki クラス名」を入力する際には必ず「r-fuki」と「クラス名」の間に半角スペースを入れて下さい。
まとめ
コピペ一発でカスタム出来る訳ではないので、多少の時間がかかりますが、一度設定すると便利なのでぜひ使ってみて下さい！
他にも色んなカスタムを先人達が記事にしてくれているのでぜひ活用してみて下さいねー！
参考：【永久保存版】はてなブログのカスタムまとめのまとめ - NEEDS
