ネコ部長のお役立ちブログ

         明日から活かせる知識・話題など何かのお役に立つブログです

【吹き出し】はてなブログで記事中に吹き出しを入れる簡単な方法

f:id:nekobuchou:20190407120857p:plain

こんにちはネコ部長です。

今日はどんな話題を教えてくれますか?

簡単に記事の中に吹き出しを入れる方法を教えるよ!

 

 といった具合に、記事の中に吹き出しを入れることで少し違った感じに

なりますよね!

 

そこで今回は、記事中に吹き出しを入れて会話形式にする方法

紹介していきます。

 準備するもの

今回、参考にさせていただいたブログがこちらです。

www.notitle-weblog.com

 こちらのサイトはとても分かりやすく説明されていて、初心者の

私でも簡単にできました。

 

 

準備するものは、吹き出しに使う画像です。

アイコンなどの画像やフリー素材から使用すればいいと思います

が、イラストレーターさんなどにお願いして作成してもらう

こともできます。会話形式ですので、いくつか準備しておけば

いいでしょう。

 

www.nekobuchou.com

 HTML編集かGoogle Chromeの拡張機能を使った方法

やり方は2つありますが、記事を書いていく中でHTML編集を使うのか

見たまま編集で使うのかで選んでください。

(注意:カスタマイズは必ず自己責任でお願いします!)

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);}
.クラス名::after {background-image:url(画像のURL);} 

 このコードを、ダッシュボードのデザイン→カスタマイズ→デザインCSSに

コピペします。

書き換えが必要なのは、クラス名と画像のURLの部分だけです。

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

クラス名はわかりやすい名前(半角英文字)ですが、長い名前より短い名前のほうが

あとあと都合がいいと思います。

吹き出し人数を増やす場合は、この部分の行を増やすだけです。

 

画像URLは、はてなフォトライフに画像をアップロードして画像を右クリック

すれば「画像アドレスをコピー」という項目があるので、クリックして

画像URLの部分にペーストすればOKです。

 

吹き出し位置コード

吹き出しの位置についてのコードですが、

 

l-fuki クラス名」(エル ハイフン フキ 半角スペース クラス名)

「左側吹き出し右側画像」です。

 

r-fuki クラス名」(アール ハイフン フキ 半角スペース クラス名)

「右側吹き出し左側画像」です。

このコードを記事を書く時に挿入して編集していきます。

HTML編集

記事を書いていき、HTML編集に切り替えてPタグの後ろから

赤字の下記のコードを入れていきます。

 

<p class="l-fuki クラス名">テキスト</p>

 

 吹き出し位置とクラス名は書き換えてください。

Chrome拡張機能を使った編集

できればこちらの方法をおすすめします!

設定さえしてしまえばあとはとてもラクちんですよ!

導入・設定方法はこちらです。

chrome.google.com

www.notitle-weblog.com

設定が完了したらあとは使い方はとても簡単です!

 

・吹き出しにしたい文章を、左クリック押したしたままドラッグして囲みます

f:id:nekobuchou:20190407134040j:plain

・赤矢印(はてなマーク)がついていれば導入されていますので
 ここをクリックすると上記画面がおりてきます。

・青矢印に吹き出し位置コード(r-fuki クラス名)を入力して

 黄色矢印のボタンを押せば完了です!

クラス名のまえは半角スペースですよ!

注意点

 ・必ずプレビューで確認しておきましょう!

・吹き出し内の記事を改行するときは、「ENTER」ではなく

 「SIFT+ENTER」です!

まとめ

いかがでしょうか?

吹き出しがあるだけで、ブログの印象も柔らかくなってきますし

記事の表現にも幅が広がるのではないでしょうか。

 

ありがとうございました。さっそくやってみます!

 それはよかったです!

 

それでは今回はここまでです。

ご覧いただきありがとうございました。