アイコン付きの吹き出しの作り方

スポンサーリンク

f:id:riaanehiriaotouto:20191030133749j:plain



 

みなさんどうも、非リア弟です

 

以前にこのような記事を書きましたが

 

www.riahiriakyodai.com

 

今度はさらにブログを見やすくするためにブログのデザインを整えていこうと思います。

 

我がブログはご存じの通り、俺(非リア弟)と、リア姉の二人で運営しており、たまにきょうだい対談なんかも記事として載せていたりします

 

参考記事

www.riaanehiriaotouto.com

例えば、これは姉が1か月で100記事書いたときに書いた

『100記事おめでとうへの反響に感謝! ありがとう対談』

という記事の一部ですが・・・

この俺と姉の会話部分を

 

 

 

俺「なんかもうコレ、すごいね・・・姉、どう思います?」

姉「どうもこうも・・・恐れ多いそしてめちゃくちゃ嬉しい!! 見てくださった皆さん、応援してくださっている皆さん、本当にありがとうございます!!これからも、皆さんがいてくださることを励みに頑張ります! それで、なんかもう、何かしなきゃっていう焦燥感に駆られて色々作ってみたんだけど、見てくれる?」

俺「おぉ! さすが姉!! どれどれ・・・」

 

って鍵かっこだけで書くと、すげー見づらい・・・

 

そこで、デザインcssをいじってアイコン付きの吹き出しを入れると

 

なんかもうコレ、すごいね・・・姉、どう思います?

どうもこうも・・・恐れ多いそしてめちゃくちゃ嬉しい!! 見てくださった皆さん、応援してくださっている皆さん、本当にありがとうございます!!これからも、皆さんがいてくださることを励みに頑張ります! それで、なんかもう、何かしなきゃっていう焦燥感に駆られて色々作ってみたんだけど、見てくれる?

おぉ! さすが姉!! どれどれ・・・

 

 

と!! すげー見やすくなる!!

 

というわけで、今回はこのやり方を誰でもすぐできるように解説していきます

 

えーとまずは・・・

 

ブログのデザインを開いて、

そのそのカスタマイズの工具マークをクリック、

 

f:id:riaanehiriaotouto:20191030130812j:plain

 

 

下にスクロールしてって、デザインcssをクリック

f:id:riaanehiriaotouto:20191030130823j:plain

 

 

 

 

で、そこにこれ(赤文字と緑文字)をコピペ↓

 

height: 60px;

border-radius: 30px;

}

.entry-content .l-fuki::after {

right: -84px;

}

.entry-content .r-fuki::after {

left: -84px;

}

}

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

 

 

 

 

これはこちらのサイトを参考にさせてもらってます

www.notitle-weblog.com

で、最後の緑の文字のとこだけは手動で変更する必要があります

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

まずこのクラス名ってとこに表示する画像につけたい名前を入れます

 

例えば俺だったら、この画像を設定するとして、

f:id:riaanehiriaotouto:20191028224923j:plain

.hiriaotouto::after {background-image:url(画像のURL);

 

とかにします。(ピンクのとこが俺が決めた名前)

 

そんで、あと一か所、画像のURLってとこも手動でなおします。

 

これは、この右上のキュービックマークから、はてなフォトライフを選んで

f:id:riaanehiriaotouto:20191030130820j:plain



右上のアップロードを選択

f:id:riaanehiriaotouto:20191030130818j:plain

で、ここに好きな画像を入れると

 

画像が左下にちっちゃく表示されるんでそこをクリック

したら、でかい画像が出てくるから、これの上で右クリックして

画像アドレスのコピー

 

このコピーしたアドレスをさっきの画像のURLのとこに入れる

.hiriaotouto::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/r/riaanehiriaotouto/20191030/20191030124247.jpg);

 

これでデザインcssは完成

 

今度は記事でふきだし出すときのやり方

記事を書くにしたら、タイトル記入欄上のHTML編集をクリック

で、そこにこれをコピペ↓

 

顔を文章の右に出したい人はこれ

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

 

顔を文章の左に出したい人はこれ

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

 

 

そんで、これのクラス名ってとこに、さっき自分で画像につけた名前を入れれば

完成

 

俺の場合はこう

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

 

こうすると

テキスト

こうなる

あとは、HTML編集じゃなくて、編集見たままってとこからでも、テキストってなってるとこに文章入れれば

 

まっ、こんな感じ

 

他にも別のアイコン画像の吹き出し増やしたいときは、さっきのデザインcssに

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

これをさらにコピペして今と同じ作業をするだけ、

最初ちょっとめんどいけど、

一回作っちまえば何回でも使いまわせるので、やっとくと便利です

 

 

ブログ運営関係記事

 

こちらの記事もよく読まれています