脱会社員に踏み切った27歳ミニマリストおっちょのフリーター生活

脱会社員に踏み切ったインテリア好きな27歳ミニマリストおっちょのフリーターの生活をお届けします

ーおすすめ記事ー

【簡単】はてなブログで使える会話風吹き出しの導入のやり方

どうも、おっちょです。

 

「可愛いブログを作りたい」

「文字や画像だけだとなんか味気ない」

 

ブログを始めてから少し慣れてきた頃には、

上のように思われる方が多いのではないでしょうか?

僕は今ブログ歴4ヶ月に入りましたが、

2ヶ月目を過ぎたあたりから

「文字だけだとなんか堅苦しくて

感情が入っていないように見えるなー」

なんて思うようになりました。

 

もちろんその記事の

内容にもよると思いますが、

文字だけだと、

どことなく単調な印象を

覚えてしまう感は否めません。

 

そこで考えたのが

いろんなブログで見かける

「会話風の吹き出し」

これがあると一気に記事が

明るくなりますし、

内容も頭に入ってきやすくなります。

 

ちょっと〜!宿題やったの〜?!

帰ったらやるよ〜!

 

⬆︎こんな感じのやつですね💡

 

そこで今回は、

僕も実際に利用している

会話風の吹き出しについて

その導入のやり方を

紹介していこうと思います。

  

 

 

会話風の吹き出し導入方法

吹き出しの導入にあたっては

以下の記事を参考にさせていただきました。

www.notitle-weblog.com

 

多くの方が参考にしているだけあり、

とても分かりやすく説明してくださっています。

手順通りにやればめっちゃ簡単!

 

CSSをコピーして貼り付け

まずは下のコードを

デザイン→カスタマイズ→デザイン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);}

 

スマホの場合は、

デザイン→スマートフォン→ヘッダ→タイトル下

に、

<style>

(上記コード)

</style>

のようにペーストしてください。

 

レスポンシブにしている場合は

この設定は不要です。

 

 

 

クラス名と画像URLを変更

CSSコードの一番下の

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

「クラス名」と

「画像のURL」

の部分を書き換えます。

クラス名は、

「吹き出しに使う画像のタイトル」

だと思ってください。

分かりやすいように

「自分」「子ども」「友人A」

のような付け方がオススメです。

画像のURLは、

使いたい画像のURLのことです。

はてなフォトライフの画像を使う場合は

使いたい画像のページ(↓↓このページ)に行って、

「右クリック」→「画像アドレスをコピー」して

上記コードの「画像のURL」の部分にペーストして下さい。

f:id:occho_life:20190518171800p:plain



僕の画像もここにアップロードされてるよ

 

書き換えたコードは、

クラス名が重複しなければ

いくら増やしても大丈夫です。

状況に応じて使い分けができるように

人物やキャラをどんどん追加していくと良いでしょう。

 

実際に吹き出しを表示してみよう

書き換えたコードを

CSSにペーストし保存したら

設定は完了です。

 

では早速、

吹き出しを表示してみましょう。

 

⬇️「HTML編集」を開きます。

f:id:occho_life:20190518174146p:plain

 

 

開いたら、

吹き出しを表示させるコードを入力します。

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

上は画像の右側に吹き出し部分を表示させるコードです。

下は画像の左側に吹き出し部分を表示させるコードです。

 

クラス名は先ほど自分で書き換えたものを代入してください。

テキストは吹き出しの中に表示させたい文字を入れてください。

 

⬇️実際に入力した画面はこちらです。

f:id:occho_life:20190518175624p:plain

 

 

こちらを表示させてみると・・・⬇️

 

父さんがカンカンよ!

姉さん何とかしてよ〜

 

⬆︎このようになります。

 

 

 

いつものブログに彩りが

「」(カギカッコ)を使った会話文でも良いですが、

画像と吹き出しがあったほうが

よりオシャレに見えませんか?

一度CSSを作成してしまえば、

あとはコードを書くだけで

簡単に画像を呼び出して

吹き出しを表示させることができます。

 

人間って、

文字よりも写真や画像があった方が

その情景が浮かびやすいですよね?

小説よりも漫画のように。

 

ぜひこの効果を生かすべく、

吹き出しを使ってみてはいかがでしょうか?

 

※『おっちょのシンプルライフ』専用の

Twitterアカウント作成しましたので

良かったらお願いします👍⬇️