チャオ酢ブログ

YAPPA FREE WHEEL NI NARITAIYONE 〜チャオ酢ハック〜

心と体が整う、ストレスフリーな生き方探し

はてなブログでの「吹き出し」の作り方を、どこよりも丁寧に解説!(これで出来なかったら逆にあきらめましょう)

こんにちは、こんばんは、おはようございます!チャオ酢です。

鼻メガネです。ごきげんよう

よくブログでこのようなLINE風の会話形式の見せ方を見かけますよね。

文章よりもパッと読みやすく、ブログの「つかみ」や要点整理に使われる見せ方として、有名ブロガーさんも多用しています。

やってみたいんですが、はてなブログの基本機能ではできないので、改造が必要です。

方法はいろいろなブログでも紹介されています。

www.notitle-weblog.com

僕は「コピペするだけ」のはずなのに何故かうまく行かず、苦戦しました。。

ですので、この記事を見てもちゃんと設定できない方のために、どこよりも丁寧に全ての工程を順を追って解説します。

一度設定してしまえば、すぐに「吹き出し」が出せるようになるので、ぜひチャレンジしてください。(所要時間30分くらいのイメージ)

かなり丁寧に書きますので、分かっているところはどんどん飛ばしながら見てください。

 

まずは画像を「2つ以上」用意(吹き出しに使う画像)

チャオ酢 鼻メガネ

まずはアイコンにする画像を2つ設定します。

僕はこの2つを基本とすることにしました。

左側は、僕のブログ同期の「カドたん。」さんに最近描いてもらったアイコンで、このブログやTwitterのアイコンで使わせてもらっています。

アイコン作成の過程も記事化してくれてますので、よろしければご覧ください。

kadotann.hatenablog.com

もう1つの右側のアイコンは、以前(初心者向け)記事・ブログに使うフリー素材サイト3選 という記事で紹介した、FLAT ICON DESIGN」を利用しました。

人っぽいものを探していたら、こんなことに・・・笑

 

 

画像を「はてなフォトライフ」にUPする

はてなフォトライフ?と思った方、僕もです。

ブログに画像をUPする時にも実は使っていた機能です。

やり方を説明します。

まず、ご自身のはてなブログを開いてください。

右上にある「⬛︎が9つ集まったマーク」をクリックすると、「利用中のサービス」として、「はてなフォトライフ」があると思います。

こちらをクリック。

吹き出し作成 解説①

遷移先の画面右上にある「アップロード」をクリックします。

吹き出し設定 解説2

すると、こちらの画面になるので、以下の2ステップを進めてください。

①右側のオプション内のフォルダを「トップ」から「Hatena Blog」に変更。

②左側の大きな点々で囲まれた部分をクリックし、使用したい画像を選択します。

吹き出し設定 解説3

無事アップされると、このように画像が出てきます。

吹き出し設定 解説4

出てきた画像をクリックしてみてください。

 

 

アップロードした画像を吹き出しで使えるようにする(画像のURL取得)

まず、右上にある「リンク」をクリックしてください。

吹き出し設定 解説6

すると、下の画像のようなHTMLタグが表示されます。(意味は気にしなくていいです。)

「このHTMLタグで写真をブログに貼ることができます」の枠にある、<img src="の後の「http〜png」までをコピーしてください。(2行目ぐらいにあります)

僕の場合、以下のような表示になっているので、オレンジ文字のところをコピーしました。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/j/jiaozi77/20190627/20190627214101.png" alt="アイコン"></a>

吹き出し設定 解説5

パソコンがMacの方は、この画面のところで2本指タップ(右クリック的なもの)で「イメージのアドレスをコピー」を選んでも、HTMLタグを取得できます。

吹き出し設定 解説7

これで画像のURLをゲットです。

後で使うので、メモか何かにコピペしておきましょう。

 

 

ここからが本番!吹き出しが表示されるよう改造します

ここからは、吹き出しが実際にあなたのブログに表示されるよう、「デザインCSS」を設定する作業です。

まずは、はてなブログページの右上にある、「ご自身のアイコン」をクリックしてください。

下にズラッと選択肢が出てくるので、「デザイン」をクリックすると、ブログ編集画面に遷移します。

吹き出し設定 解説7

下のようなページに飛ぶはずです。

吹き出し設定 解説8

ここから、レンチのマークをクリックして、一番下のデザインCSSの枠をクリックしてください。

僕の場合は、はてなブログ無料版のカスタマイズ方法(初心者向け)で紹介した、文字に黄色いマーカーをつけるためのコードが表示されます。

吹き出し設定 解説9      吹き出し設定 解説9

このコードの一番下で、enterで改行したら、以下のコードをコピペして貼り付けてください。

/* 吹き出し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);}

※先述の吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 | SHIROMAGからの引用です。

上記コードの最下段2行の色つけをしたところだけ、個人設定が必要です。

意味合いとしては、

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

この吹き出し

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

この吹き出し

「それぞれのアイコン画像を出すためのクラス名を設定している」とご理解ください。

のクラス名1と2は、 吹き出しを使用する時に必要な合言葉みたいなものですので、好きな言葉を設定してください。

の画像のURLには、はてなフォトライフでゲットした画像のURLをコピペしてください。

僕は、以下のように設定していますので、参考まで。

.fukidashi1::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/j/jiaozi77/20190627/20190627214101.png);}
.fukidashi2::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/j/jiaozi77/20190629/20190629023656.png);} 

注意点としては、以下の2点です。(僕はここで間違いました)

  • クラス名の前の「.」は消さないこと。
  • 緑の画像URLの前後の( )を消さないこと。

ちなみに、よくブログでこのような会話調にするために2つのアイコンを設定していますが、3つ4つ設定しておいて使い分けても構いません。

 

最後に、「変更の保存」をお忘れなく。

吹き出し設定 解説9

これでデザインCSSの設定はすべて完了です。

 

 

ブログに「吹き出し」を入れてみよう。

では早速、念願の吹き出しを使ってみましょう。

ブログ作成画面の「HTML編集」を使って、入力します。

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

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

 ※こちらも先述の吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 | SHIROMAGからの引用です。

こちらも僕の設定を参考に入れておきます。

右にでる吹き出しはこんな感じ

<p class="r-fuki fukidashi1">右にでる吹き出しはこんな感じ</p>

左にでる吹き出しはこんな感じ

<p class="l-fuki fukidashi2">左にでる吹き出しはこんな感じ</p>

僕はもう1つ設定しました

<p class="r-fuki fukidashi3">僕はもう1つ設定しました</p>

「編集見たまま」だと、変更されているのかチェックできないため、「プレビュー」の方で逐一チェックしてください。

 <注意点>

  •  吹き出しの中で改行する時は、通常の「enter」では行わず、「shift」+「enter」で改行するようにしてください。
  • スマホ版の画面は、別途設定する必要があります。が、PROの方でしかさわれない領域のため、スマホ版にも反映させたい場合は「レスポンシブ」対応のデザインテーマを使用するようにしてください。僕は、レスポンシブ対応しているMinimalism を使っています。
  • もちろん、太字や文字の色変えなどとも組み合わせは可能ですが、「編集見たまま」の方で編集したり、コピペすると吹き出しが反映されないことがあります。

 

 

あとがき

これで皆さん、吹き出しデビューですね。

お疲れ様でした。

ここからは、アイコンの表情違いを用意してより臨場感を出すも良し、キャラクターを増やしながら世界観を広げるも良し、皆さんなりにアレンジしてみてください。

吹き出しは、ユーザビリティを高め、皆さんのブログにファンがつきやすくなるツールだと思いますので、どんどん使っていきましょう!

一緒に楽しみましょう!

 

    

ブログランキング・にほんブログ村へにほんブログ村