茶助の備忘録

★★現行ブログはコチラ

【はてなブログ】【メモ】会話風の吹き出し

最近のサイトは、会話風になっていて見易いですよね。

 

でもやり方解らない・・・

なんだか難しそう

 

って方が多いはず。

 

そこで、吹き出しの付け方をメモしました!

 【画像を用意する】

適当なフォルダに、好きな画像を用意します。といっても、自分や家族の画像を公開するわけにはいきません。フリー画像を使用します。

著作権利用規約等は各自確認ください。

<イラストや>

<pixabay>

・・・ほかにも、「著作権放棄 イラスト」で沢山ヒットします。

 

こんな画像を用意したとします。

f:id:chaske1024:20200317024723p:plain

 

【画像をアップロードする】

つぎに、これら画像をアップロードします。はてなフォトライフを利用します。

f:id:chaske1024:20200317025339p:plain

 

すると、この画面になります。

f:id:chaske1024:20200317025650p:plain

 

ここに、先ほどの画像をドロップダウンorフォルダ選択でいれます。

※↓写真はドロップダウンでのやり方

f:id:chaske1024:20200317030249p:plain

これで、フォトライフへのアップロード完了です。


 【ブログの設定をいじる】

こんどは、自分のブログ設定をいじります。

f:id:chaske1024:20200317030857p:plain

設定画面で、デザインのタブを選択し・・

 

f:id:chaske1024:20200317031445p:plain

ここに、この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);}

.クラス名::after {background-image:url(画像のURL);}

 

 【吹き出し画像を貼り付ける】

さきほどのCSSコードのなかで、ラストの部分をみてください。

f:id:chaske1024:20200317031953p:plain

「ん、②画像のアドレス?」

ってなりますよね。これです。

f:id:chaske1024:20200317032431p:plain

この画像アドレスコピーを、さっきの「②画像アドレス」部分に貼ればいいのです。僕の場合はこうです。

 

f:id:chaske1024:20200317032843p:plain

・・・これで準備バッチリです!

 

【実際につかうと】

使い方は、こうです。はてなブログの記事で、「HTML編集」にします。その中に、これを入れます。

f:id:chaske1024:20200317033337p:plain

<p class="l-fuki クラス名">テキスト</p>  ※左から吹き出しの場合

 

<p class="r-fuki クラス名">テキスト</p>  ※右から吹き出しの場合

 

すると、吹き出し風になるのです。

 

コードは

 <p class="l-fuki boy01">できた~!</p>
<p class="r-fuki girl01">私って天才!</p>

 

出来上がりは

できた~!

私って天才!

ってなります。(ちなみにコレ、茶助の心の声です)

www.chankome.com