あべろぐぷらす

元SEが半農半Xな暮らしを目指して頑張る様子を福島から発信するブログ

【はてなブログ】『会話風吹き出し』で読みやすさアップ!カスタマイズ方法を紹介するよ!

f:id:abeshi01:20181025215204j:plain

こんにちは、あべし(@honjituno)です。今日はブログカスタマイズのお話です!

 

すでにお気づきの方もいるかもしれませんが、会話風吹き出しのカスタマイズをやってみました(*´▽`*)!

 

いやー、ずっと憧れていたんですよね!

これからはこんな感じにしょくぱんがしゃべります!

というわけで、今回ははてなブログで会話風吹き出しのカスタマイズ方法について書いていこうと思います٩( ''ω'' )و!

 

ぼくと同じように吹き出しカスタマイズに憧れているけど、まだやっていない方!ぜひ最後まで読んでみて下さい!

『会話風吹き出し』で読みやすさアップ!カスタマイズ方法を紹介するよ!

やろうやろうと思ってなかなかできずにいましたが、ついに…

 

会話風吹き出しカスタマイズをやってみましたよ!!!

 

冒頭でもしょくぱんに話してもらいましたが、これからはガンガン登場してもらうことになりました。

 

これまでのブログ記事は、基本テキストベースでした。たまに画像を挿入したり、文字色を変えてみたり、太字にしてみたり…。

 

ただ、文字だけで読みやすさを追求するのは限界があるんですよね。

 

そんなわけで吹き出しカスタマイズに憧れておりました!カスタマイズできてよかった!

吹き出しのおかげで読みやすさアップだね! 

参考にしたブログ記事!

自分一人の力ではカスタマイズできないので、今回も先人の知恵をお借りすることにしました!!

以下の作業はこちらのサイトを参考にさせていただきました!ありがとうございましたm(_ _)m。

www.uenoyou.net

CSSをコピペでOK!

紹介されているやり方は本当に簡単で、CSSを追加するだけ!!基本部分はコピペでOKです!

 

  1. 吹き出しで使用したい画像を用意する!
  2. クラス名決める!(今回はabeshiにしました!)
  3. 画像URLをCSS内にコピペ!
  4. デザインCSSにコードまるごとコピペ! 

 

ここまでの作業で、用意した画像に吹き出しで会話させることができます!

 

記事中でも紹介されている通り、吹き出しを自分の好み通りにアレンジすることができるんです!

 

具体的には、吹き出しやアイコンについている影を消す方法や、枠線の色、吹き出し部分の背景色の変更方法が紹介されています٩( ''ω'' )و!

 

これまで何度か登場していますが、ぼくも少しだけアレンジしています!ぜひ吹き出しカスタマイズにチャレンジしてみて下さい!

吹き出し部分を色々いじってみたよ!お気に入りのアレンジをためしてみて!

『Chrome Add-on for Hatena』で吹き出しを挿入!

実際に吹き出しを表示させる方法も合わせて紹介されています!

 

お使いのブラウザがGoogle Chromeであれば、『Chrome Add-on for Hatena』という拡張機能を使って簡単に吹き出しを挿入することができます!

 

拡張機能の使用方法は以下の通りです!

  1. 『Chrome Add-on for Hatena』拡張機能をインストール!
  2. 吹き出しにしたい文章を選択!
  3. クラス名入力箇所に『r-fuki クラス名』と入力(右側に吹き出し)!
  4. 『Add Class』をクリック!

見たまま編集の画面では何の変化もありませんが、HTML編集画面で見るとしっかりクラスが追加されています!

これも拡張機能でやってみたよ!簡単にできました!

まとめ

はてなブログの『会話風吹き出し』のカスタマイズ方法を紹介してみました!

 

基本コピペでOKですので、とても簡単にカスタマイズすることができました!

 

もし会話風吹き出しをやってみたい方は、自分の好みでアレンジしながら挑戦しつつ、今回の方法を試してみて下さいね!それではー!