シングル&ワーキングママのぽんちゃん日記

公認心理師でシングルママの情報発信ブログです♪ 不登校気味の娘やお金ことなど、尽きない悩みを力強く乗り越えたい♡

【はてなブログ】コピペで簡単!吹き出しをつくってみました♡【サルでもできる!カスタマイズ】

にほんブログ村 子育てブログ ワーキングマザー育児へ にほんブログ村 ライフスタイルブログ 心地よい暮らしへ
にほんブログ村

↑↑↑ ブログランキングに参加してます♪

♪ ポチッとしてくれたら嬉しいです♪

f:id:ponchan-club:20210515202558p:plain

 

以前からずっとやってみたかった『吹き出し』のブログ・カスタマイズ、ついにやっちゃいました!

 

コレですコレ!(↓)

 

やっと喋れるようになりました!

みなさんが吹き出しにセリフを書かれているのをみて、ずっとやってみたかったんですが、『なんだかとっても難しそう』と思って、二の足を踏んでいました。

 

しかし、この度やっと作成成功!

といっても自分でCSS(←文書の見た目を装飾するための言語。はてなブログの『デザイン→🔧レンチマーク』部分に事前に書き込んでおく)を書いたわけではなく、他の方が公開してらっしゃったCSSをコピペさせていただきました。

 

参考にしたのは、こちらの2つの記事。

コピペで使えるCSSを公開してくださっているので、興味ある方はチェックしてください♡

www.notitle-weblog.com

jiaozi77.hateblo.jp

 

SHIROMAさま、チャオ酢さま、ありがとうございました!

 

パソコンで作業していたのですが、先ほどチェックしたところスマホでもちゃんと吹き出しが表示されていて成功です

 

吹き出しの作成手順は、

①アイコンとなる画像を用意。

はてなブログの『デザインCSS』にコードを貼り付ける。

③記事のHTMLにコードを入れる。

 

CSSのコード貼り付けは、SHIROMAさま&チャオ酢さまの記事からのコピペで大丈夫だし、 個々の記事で吹き出しを使うときに書くHTML表示も簡単で、一つの吹き出しに1行だけ!

 

★左の吹き出しHTML(↓)

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

★右の吹き出しHTML(↓)

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

  

クラス名のところにCSSで自分で設定した吹き出しの名前を入れて、『テキスト部分にセリフの内容を書き込むだけのお手軽さです。

 

ブログでも使っているタヌキの被り物キャラの他に、2名会話に参加できる設定にしました!

たぬきの相方のきつねです

女の子キャラです♡

 

 ちなみにアイコン画像は、タヌキとキツネはいらすとやかわいいフリー素材集 いらすとや)さんから、女の子キャラは IconponIconpon - 高品質な無料(フリー)の顔アイコン素材)でつくってみました。

 

どちらも無料で使えるのでうれしいサイト。おすすめです♡

 

吹き出し作成の実質所要時間は約30分。コピペでOK! 超初心者でも簡単なのでやってみてね♡

今回も最後までお読みいただき、どうもありがとうございました!