みなさんはブログの記事に「吹き出し」を使ってますか?
使えてると記事のアクセントになってかなり便利です!
今回は、コピペで簡単に使えるようになる「画像付きの吹き出し」を付ける方法を紹介していきます!
画像付きの吹き出しの導入方法
事前準備~画像の用意~
まず、吹き出しに使用する画像の用意をします。
後述しますが、設定する画像は何個でも設定できます!
アイコンに使用する画像を用意する。
自分の場合はこのネコちゃんです。
アイコンのサイズは「150×150」にしています。
ほかに試してみたら「500×500」でも問題ありませんでした。
導入方法~CSSコード~
次に、CSSコードを紹介します。
/* 吹き出しのCSS */
.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);}
SHIROMAG 【はてなブログ】吹き出しで会話形式にするのをめっちゃ楽にしてみた より引用
1.このコードをコピーしてください。
今回は、この最後の部分
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
メモ帳などに一度こちらのコードをコピペして、編集していきます。
書き換えるのは2つのうち上の1つ目を書き換えます。
2つ目はそのままでも問題ありません。
【クラス名】
実際に吹き出しの画像を使うときの呼び出しの名前です
半角の英数字、ハイフン( – )、アンダーバー( _ )で入力します。アルファベットで始めなければなりません。(数字や記号で始めてはならない)
例:.ayuzu::after {background-image:url(画像のURL);}
【画像のURL】
実際の吹き出しに使う画像です。先ほどの画像の用意でコピーしたURLを入力します。
カッコ()は残して画像のURLの部分のみ書き換えます!
例:.ayuzu::after {background-image:url(ttps://cdn-ak.f.st-hatena.com/images/fotolife/a/ayuzu/20210415/202104150.jpg);}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
これはアイコンに使う画像の登録ですので、何個でも追加できるよ!ということです。
2.こちらのコードをデザイン→スパナマーク→デザインCSSにコードを入れていきます!
3.貼り付けていきます
※注意
ここに他のコードを入れている場合、消したり上書きしないように気を付けてください!
ほかのコードがある場合は、メモ帳などで一度バックアップを取っておくことをおすすめします!
これで設定は完了です!!
吹き出しの使い方!
はてな記法の設定
記事書く際、画像のようにはてな記法になっていることを確認してください!
はてな記法の設定については過去記事で紹介していますので、参照してください!
ayuzublog.hatenablog.com
まとめ!
今回は吹き出しを付ける方法を紹介しました。
画像の用意などがちょっとだけ手間ですが、簡単に設定できると思います!
吹き出しが使えると記事のアクセントになるだけでなく、会話風にもできるので、使ってて楽しいです!
今回、参考にさせていただいたサイトはこちらです。
www.notitle-weblog.com
mamazakki.hatenablog.com
自分は使いませんでしたが、Google Chromeの拡張機能を利用して簡単にできる方法を紹介されていたり、もっと詳しく解説されていますので、ぜひ見に行っていただきたいです!!
みなさんの参考になれば幸いです!
最後までお読みいただきありがとうございました。
また、ほかにも設定の方法を紹介しています!