kako-b

~60代を穏やかに楽しく生きる~

【めちゃ簡単】はてなブログに吹き出しを表示させる方法はこれだ!

\読者登録おねがいします/

ブログに吹き出しを表示させてみよう

f:id:kakonobu:20200509111337j:plain

 

 

ブログに可愛い吹き出しを表示させたいけど、ちょっと難しそう....?

意外と簡単ですよ。ゆっくり解説してゆきますね。 

  

 「吹き出し」とはこのような感じで、会話形式に表示させる方法。
これを自分のブログに表示出来たら嬉しいと思いませんか?

  

 

吹き出しに必要なもの

 

MEMO
必要なものはこの3点。
【CSS】【HTML】【イラスト】

 

吹き出しを作るのに必要な準備は、【CSS】コードと、【HTML】コード、そしてイラストの3点です。

 

偉そうに書いているので、「プログラミングの知識あるのかよ。」と思われそうですが、もちろん私はコードの知識はありません。
すべてSHIROMAGさんを参考にさせていただきました。


もぉ~、プログラミングの知識がある人って天才!!!

 

 

【CSS】と【HTML】を用意しょう

f:id:kakonobu:20200509111404j:plain

 

コードはこちらのサイトさんを利用させていただきましたよ。
本当にありがとうございます。
丁寧な解説で、60代のわたしでもメッチャわかりやすかったです。

 

  SHIROMAGさん

www.notitle-weblog.com

 

 

コードをコピペしよう。

 

まず、上記のサイトさんで【CSS】と【HTML】のコードをコピーして下さいね。
そして、パソコンのメモ帳等に貼り付けておきましょう。

 

 

 

イラストを用意しよう

 

  次にイラストを用意します。

 

イラストはフリー素材の物を探せばたくさん見つかると思いますので、気に入ったものをパソコンへ保存しておいて下さいね。
私は長女に描いてもらいました(^^)

 

こちらもお勧めです。
凄く有名な素材屋さんなので一度は見た事があるかも。

 

  いらすとや

www.irasutoya.com

 

 

私が準備したのはこの画像です。
だいたい130ピクセルぐらいの大きさに縮小しています。

 

20200502113927f:id:kakonobu:20200508113410p:plain20200502112354

 

左のイラストが「」で、中央と右側のイラストは「質問する人」に設定しました。それでは準備したイラストを「はてなフォトライフ」にアップロードしましょう。

 

 

イラストをアップロードしょう

 

f:id:kakonobu:20200509113033j:plain

 

 

  次は画像のアップロードの仕方を説明します。

 

♦「はてなブログ」右上のアイコンをクリックしてください。

f:id:kakonobu:20200508131922p:plain

 

 ♦「はてなフォトライフ」をクリックします。 

f:id:kakonobu:20200508132030p:plain

 

 

 

♦「アップロード」をクリックします。

f:id:kakonobu:20200508132115p:plain

 

 

※ ↓↓↓ この画面が表示されたら、画面上で再びクリックしてくださいね!

f:id:kakonobu:20200508132204p:plain

 

♦ 準備したイラストを選びます。

f:id:kakonobu:20200508132258p:plain

※アップロード完了しました!

 

 

 

f:id:kakonobu:20200508132406p:plain

ポイント
アップロードしたイラストの上で右クリックして、(リンクのアドレスをコピー)を選択し、メモ帳等に貼り付けておきます。 

 

 

CSSコードを変更しよう

f:id:kakonobu:20200509112125j:plain

 

  次にコードを書き換えます。 

 

先ほどSHIROMAGさんのサイトよりコピーさせてもらった【CSS】コード。
今回変更するのは下の部分、「クラス名」と「画像のURL」です。

 

私の場合、クラス名は私自身を《kako》、質問者さんを《r1》《r2》としました。
「クラス名」は自分の好きな名前でOK。

 

もちろん「クラス名」と「画像のURL」はどんどん増やせます。

 

それでは「画像のURL」の部分に、表示させたいイラストのアドレスをペーストしてくださいね。これでCSSコードは完成しました。

 

 

変更したCSSコードをブログ内に貼り付けよう



次はこの完成した【CSS】コードをコピーして、ブログ内にペーストします。
コードの貼り付け場所がわからない場合は、こちらに詳しく解説していますので、参考にしてくださいね。

 

www.kako-b.com



お疲れ様でした。
無事にペーストできたでしょうか。

 

もう少しで完成しますよ。頑張ってくださいね。

 

 

HTMLを使って吹き出しを表示させよう

 

さぁ、 次は【HTML】です。
これは簡単。

  

記事に挿入する時は、【HTML】コードを、自分の設定した「クラス名」に変更し、「HTML編集」モードの画面を開き、ペーストするだけです。「見たままモード」では反映されませんが、「プレビューモード」にすると反映されているはずです。

 

たとえば私の場合、クラス名は私自身を《kako》、質問者さんは2種類用意していて、《r1》《r2》と設定しています。書き換えるのは《クラス名》の部分で、書き換えた場合のコードはこんな感じ。

質問者さん《r1》の場合   <p class="r-fuki r1">テキスト</p>
質問者さん《r2》 の場合  <p class="r-fuki r2">テキスト</p>

 ポイント 必ず<r-fuki>の後は「半角スペース」を開けて下さい。

 

表示させてみましょう。

 

ドキドキ.....。表示されたかな?

 こんな感じに、《r1》のふきだしが右側に表示されました。

 

次は《r2》を表示させてみますね。

うふふ。楽しいな♪

  

 

次は私のイラストを表示させてみましょう。
今度は吹き出しが左側に表示されますよ。

  <p class="l-fuki kako ">テキスト</p>

 

どんな感じかな♪

 

ここ重要
《r-fuki》や《l-fuki》の後に指定した《クラス名》を入れる場合は、必ず半角スペースを開けて下さいね。
また改行は「Shift」+「Enter」でするようにしてくださいね。
「Enter」だけで改行をするとデザインが壊れます。

 

まとめ 

 

まとめ

いかがでしたか?
表示させることが出来ましたでしょうか。

実はこの記事は、数日前の困っていた私に向けて書きました。
でも説明を文字と絵にするのって、ホント難しい(>_<)

どうやって書けば、ちゃんと伝わるだろうと思いながら記事を書きました。
この記事を読んだあなたが、可愛い吹き出しを表示させることができますように(*˘人˘*)

 

 

「ブログ村ランキング」に参加中です。
f:id:kakonobu:20200703163042g:plain いつも応援ありがとうございます。

 

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