Web Analytics Made Easy - StatCounter

0から始める小遣い稼ぎ~ayuzublog~

誰でもできる小遣い稼ぎの方法を発信していきます!!

【コピペで簡単設定!】はてなブログで「画像付きの吹き出し」をつける方法!【はてな記法】

みなさんはブログの記事に「吹き出し」を使ってますか?
使えてると記事のアクセントになってかなり便利です!
今回は、コピペで簡単に使えるようになる「画像付きの吹き出し」を付ける方法を紹介していきます!



f:id:ayuzu0707:20210415155250j:plain




吹き出しの見本

画像が右か左かを選択可能

紹介するのはこちらの形の吹き出しです。


アユズです。よろしくお願いします。

僕もアユズです。よろしくお願いします。


では、やっていきます!

画像付きの吹き出しの導入方法

事前準備~画像の用意~

まず、吹き出しに使用する画像の用意をします。

後述しますが、設定する画像は何個でも設定できます!

アイコンに使用する画像を用意する。

自分の場合はこのネコちゃんです。

f:id:ayuzu0707:20210415022226j:plain


アイコンのサイズは「150×150」にしています。
ほかに試してみたら「500×500」でも問題ありませんでした。

はてなフォトで画像のURLをコピーする


1.はてな右上の赤い四角を選択し、「はてなフォトライフ」を選択。または、記事画面の緑の丸で囲んだ部分を選択。
青い丸のHatenaからも行けますが割愛します。

f:id:ayuzu0707:20210415183339p:plainf:id:ayuzu0707:20210415185456p:plain



2.赤い四角からアップロードを選択します。個別のフォルダを作る場合は、青い四角から新規フォルダを作れます。

f:id:ayuzu0707:20210415185836p:plain




3.画像をアップロードします。

f:id:ayuzu0707:20210415190054p:plain



4.アップロードした画像を右クリックし「画像のアドレスをコピー」を選択。コピーしたアドレスはメモ帳などにコピーしてください。

f:id:ayuzu0707:20210415195718p:plain



これで画像の用意は完了です!!



導入方法~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つ目以降は何個でも追加できます。
これはアイコンに使う画像の登録ですので、何個でも追加できるよ!ということです。


2.こちらのコードをデザイン→スパナマーク→デザインCSSにコードを入れていきます!

f:id:ayuzu0707:20210412232427p:plainf:id:ayuzu0707:20210412232449p:plain


3.貼り付けていきます

f:id:ayuzu0707:20210413225254p:plainf:id:ayuzu0707:20210413225303p:plain

※注意
ここに他のコードを入れている場合、消したり上書きしないように気を付けてください!

ほかのコードがある場合は、メモ帳などで一度バックアップを取っておくことをおすすめします!



これで設定は完了です!!


吹き出しの使い方!

はてな記法の設定

f:id:ayuzu0707:20210413105823p:plain

記事書く際、画像のようにはてな記法になっていることを確認してください!

はてな記法の設定については過去記事で紹介していますので、参照してください!
ayuzublog.hatenablog.com

実際に使ってみる

では、実際に使っていきましょう!!

吹き出しを使うにはこちらのコードを使用します!

画像が右側の吹き出し
<p class="l-fuki クラス名">テキスト</p>

画像が左側の吹き出し
<p class="r-fuki クラス名">テキスト</p>

l-fuki=画像が右側の吹き出し
r-fuki=画像が左側の吹き出し

となっています。

1.【クラス名】に先ほど設定した名前を入力します。
2.テキストを入力します。

画像が右側の吹き出し

アユズです。

画像が左側の吹き出し

アユズです。


できました!!

また、登録してあるほかの【クラス名】に変えれば違うアイコンになります!

もう一人のアユズです!


使用時の注意点

必ず、PCとスマホで表示されるか確認して下さい。

吹き出しの中で改行する場合、「Enter」キーのみで改行しないで下さい。
吹き出し内で改行する時には、「Shift」+「Enter」で改行して下さい。

吹き出しにした文章内で「Enter」キーのみで改行は厳禁です!

どんなことになるかは試してみてプレビュー画面で表示を見てください…



まとめ!

今回は吹き出しを付ける方法を紹介しました。

画像の用意などがちょっとだけ手間ですが、簡単に設定できると思います!

吹き出しが使えると記事のアクセントになるだけでなく、会話風にもできるので、使ってて楽しいです!

今回、参考にさせていただいたサイトはこちらです。
www.notitle-weblog.com
mamazakki.hatenablog.com

自分は使いませんでしたが、Google Chrome拡張機能を利用して簡単にできる方法を紹介されていたり、もっと詳しく解説されていますので、ぜひ見に行っていただきたいです!!


みなさんの参考になれば幸いです!
最後までお読みいただきありがとうございました。

また、ほかにも設定の方法を紹介しています!

ayuzublog.hatenablog.com
ayuzublog.hatenablog.com