単純明快:吹き出しを使ってブログをカスタマイズ【はてなブログ】

吹き出しってどうすればできるの?

ブログを日々書く中で、こんな感じで吹き出しを使用して会話風に記事を書きたいときってありませんか?

私は吹き出しの方法が分からず、ずっと画像で吹き出しを作って貼り付けていたんですが…

多くのブロガーさんが吹き出しを使用しているってことは、その方法があるわけですよね…で、調べたところ、はてなブログでも簡単に吹き出しを作成できると言うことがわかりましたので、今日は吹き出しを作る方法を記事にしたいと思います。

吹き出しを作る方法と言いましたが…私お得意の完全なるコピペになりますので、誰でも簡単に作成できますヾ(▽⌒*)

f:id:lifeishappy_right:20201012094907j:image 

吹き出しを使ってブログをカスタマイズ

やる事は簡単で、

✔吹き出しに使うアイコンの設定

✔吹き出し用のCSSの設定(コピペ&少しカスタマイズ)

この2つをやれば感単に吹き出しが使えるようになります。

 

吹き出しに使うアイコンの設定

⒈ アイコン画像を用意

アイコン画像は本当に何でも良くて、自分の写真でもOK、アイコンを無料で作成できるサイトで作成してもよし。

ブログに登場する人物のアイコンを準備しましょう。

ちなみに私のブログにこの先登場するであろう二人・・・

こんにちは

こんにちは

この2人と共に、ブログを盛り上げて行きたいと思っています。

上の女性の頭がはみ出してしまっているけど気にしないでください…この辺のサイズ合わせまではまだお勉強中です。

ちなみに無料でアイコン作成できるサイトは、

・FACE ICON GENERATOR:https://www.pocky.jp/enjoy/icon_generator/

・Iconpon:https://www.iconpon.com/

他にもあるのですが、挙げると切がないのでこの辺にしておきます。

また、フリー素材を扱っているサイトから持ってくるのもありだと思います。

いずれにしても、そこまで悩む部分ではありませんね♪

 

⒉ アイコン画像をアップロード

準備したアイコン画像を「HatenaFotolife」にアップロードします。

< ダッシュボード → 右上Hatena → Fotolife → アップロード >の順ではてなフォトライフの画像アップロードページまで行ってください。

<ダッシュボード → 右上Hatena>

f:id:lifeishappy_right:20201011173513p:plain

<右上Hatena → Fotolife>

f:id:lifeishappy_right:20201011173705p:plain

<アップロード>

f:id:lifeishappy_right:20201011175737p:plain
この画面の指示通り、ファイル選択かドラッグでアップロードします。

右横のフォルダ分けもできますので、別けたい方はアップロード前にフォルダを選択してくださいね。

アップロード完了したら「フォルダを編集」を見ていただくと、先ほどアップロードした画像が反映されているはずです。

f:id:lifeishappy_right:20201011175920p:plain

後ほどCSSの設定の際にこのページに戻ってきますので、この画面はそのままにして次に進みます。※同じ画像がアップロードされているのは私がアナログである証拠です。分からず何度も同じものをアップロードしてしまうという…後ほど削除します(笑)

 

吹き出し用CSSの設定

⒈ 吹き出しCSS

下記コードの一番下の赤・青部分(アイコン画像部分)は自分の画像に書換が必要になりますので、一旦下記コードをコピーしてメモ帳に貼付けして書換え後にCSSへ設定しましょう。

※PCとスマホでは見え方が違うので、スマホ対応の設定も記載しておりますので対応してください。

/* 吹き出し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;
}
}
.クラス名1::after {background-image:url(画像のURL);}
.クラス名2::after {background-image:url(画像のURL);}

 

クラス名」は登場人物の名前など、自分で分かりやすい名前にしてください。

画像のURL」は先ほど「はてなフォトライフ」にアップロードした画像のURLになるので、はてなフォトライフに戻って使いたい画像にマウスオーバー→右クリックで「画像アドレスをコピー」して「画像のURL」に貼り付けます。

f:id:lifeishappy_right:20201011181933p:plain

 

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

このコードはクラス名さえ変えてあげればいくつでも作成可能ですので、何人でも登場人物を作る事ができます。ブログを書き進めている際に新たな登場人物が出てくる場合は、都度増やすことが可能です。

 

⒉ CSSの貼付け

CSSの貼付け先はブログカスタマイズではお馴染みの< ダッシュボード → デザイン → カスタマイズ → {}デザインCSS >部分です。

カスタマイズをする度に、CSSがどんどん増えていきますよね…しかも今となっては何のことやら分からない暗号だらけの(笑)

f:id:lifeishappy_right:20201011182759p:plain

こちらに貼り付けて「変更を保存する」をクリックしてPC版のCSS設定完了です。

 

⒊ スマホ対応の設定

上記のCSSを<style>と</style>ではさんであげます。

<style>

この中にCSS

</style>

 

ダッシュボード → デザイン → スマホ → ヘッダ → タイトル下>に設定します。

f:id:lifeishappy_right:20201012092844p:plain

 

CSSを設置したら「変更を保存する」をクリックしてスマホ版の設定も完了です。

吹き出しの使い方

全ての準備が整いましたので、早速ブログで吹き出しを使用してみましょう。

ブログ編集画面で「HTML編集」にします。

HTML編集画面に「<p class="l-fuki クラス名">テキスト</p>」を貼り付けて、

l-fuki クラス名」のクラス名のところにCSS作成時に登録した登場人物の名前を入れます。

また、「l-fuki」は吹き出し位置になっていて、「l-fuki」が左側(left)、「r-fuki」が右側(right)となっています。

テキスト部分はお分かりかと思いますが、アイコンが話す言葉を入れます。

いかがでしょう? できましたか?
吹き出し以外の部分は「編集見たまま」 を普通に使用できます。

 

吹き出し使用時の注意点

吹き出しの中で改行する際に、通常通り「Enter」キーで改行してもおかしなことになるため「Shift」+「Enter」で改行するらしいのですが、私が試したところ、おかしな事にならない変わり改行もされていないという状況になりました。私が何か間違ってるのかな…でもできたから良しとします(笑)

というわけで、ここの解決ができなかったので 私は改行したい文と文の間に「<br />」を使用して改行するようにしました。

 

まとめ

今回お世話になったブログがSHIROMA様という方のブログになります。

www.notitle-weblog.com

タイトル通り、吹き出しがめっちゃ楽になりました。ありがとうございますヾ(´▽`)ノ

吹き出しを使用したブログって世の中に溢れているんですが、私が見る限りWordPressを使用しているブログばかりだったんですね。

しかも調べようという意欲さえなく、画像貼付けで吹き出しを使ってたんですが、こんなにも簡単にできるなんて、何でもっと早く調べなかったんだろう…と思いました。

今まで画像を貼り付けて作成した記事の吹き出し分に関しては、修正しようかとも思いましたが、このブログの成長の証として残しておこうと思います( ´艸`)