おかゆなれきし

歴史に少しでも興味を持ってもらったり、面白いと思ってもらえるように歴史を話すブログです。

はてなブログに吹き出しを導入するために参考にするべき記事4選!

f:id:shoooy:20190508183359p:plain

どうも!しょう(@shos_history)です!

 

ほぼ一日使ってこのブログに吹き出しを導入することに成功しました。

 

今回は、「吹き出しってそもそもなに?」「なんのために使うの?」という素朴な疑問から吹き出し導入に当たって参考にした記事の紹介までをします。

 

歴史全く関係なさそうなタイトルですが、要所要所にしっかり入れてますので心配なく!

 

そもそも吹き出しって?

 

どうも!しょうです!

 

冒頭でやってたこれです。

 

 

 

ããªã¼åç é段ã§ä¼è©±ãã¦ãããã¸ãã¹ãã³LINEとかtwitterのDMとかにある会話っぽく見えるやつです。

 

 

例えば織田信長が本能寺の変で明智光秀に倒された後に生き返った時のシチュエーションを吹き出しで表現するとこうなります。

 

 

 

f:id:shoooy:20190508184806p:plain

まぁ間違いなく、豊臣秀吉は明日がないですね。

 

主人の織田信長が倒れた後に天下取って「俺がキング!(ドヤ)」ってやってましたからね。

 

さらば秀吉。南無〜。

 

こちらの記事で一応秀吉のフォローをしておくので吹き出しの話を理解した後にどうぞ! 

www.sho0310.com

 

吹き出しにするメリットって?

 

例えば、

 

 

江戸時代は260年続きました。

 

 

江戸時代は260年続いたんです!

 

 

文中にあったらどっちが読みやすいと思いますか?

 

 

おそらく後者の吹き出しで書かれた方だと思います。

 

 

 

吹き出しを使うメリットは読みやすくするためです。

 

 

 

会話口調の文って読みやすくないですか?

 

よく物語とか小説とか漫画読んでいる方ならわかると思うのですが、会話のある文の方が圧倒的に読みやすいです。

 

逆に論を展開したり、専門的なことを言っているだけの文見たことありませんか?

 

あれ、

 

めっちゃ読みづらかったと思います!

 

 

会話があるかないかで読み手の負担が大きく変わるのです。

 

特に自分の記事は歴史風味なので、最初から少し読みづらさがあります。

 

そのため、その読みづらさを払拭できる吹き出しは最高のアイテムです。

 

 

結果的に吹き出しを入れることによって、 記事を読んでくれる人が多くなったり、滞在してくれる時間が伸びることに繋がります。

 

これはもう吹き出しを使うしかない!

 

では、自分が吹き出し導入に当たって参考にした記事を紹介します。

 

はてなブログの吹き出し導入の際に参考にした記事

 

ここでは僕がはてなブログの吹き出し導入の際に実際に参考にして、「役に立った!」と思った記事を紹介してます。

 

これから吹き出し入れてみようと思ってる方はぜひ参考にしてみてください!

 

はてなブログの吹き出しの基本がわかる記事!

 

www.notitle-weblog.com

 

一つ目は、「はてなブログ 吹き出し」と検索すれば一番上にくるこの記事です。

 

自分好みに編集するためには書かないといけないCSS。

 

そのCSSという記事のデザインをするためのコードが完成形の状態で載っているので、コピペをすれば一発で吹き出しを使うことができます。

 

つまりCSSってなに?美味しいの?って方でもすぐに吹き出しが使えるのです!

  

記事自体も丁寧に書かれているので、まず迷子になることはありません。

 

この記事だけでは吹き出しのデコレーションの仕方はわからないのですが、吹き出しについての基本的なことは書かれているので必ず最初に見ておくことをおすすめします。

 

はてなブログの吹き出しのアレンジの仕方がわかる記事!

 

www.blacklist-kirin.com

 

二つ目は、はてなブログの吹き出しに色をつけたくて探しまくっていたらたまたま見つけたこの記事です。

 

この記事が参考にしているもとの記事は一番最初に紹介した記事です。

 

LINE風の吹き出しになるようなコードがすでに記事に載っているので、それをコピペするだけとなっています。

 

この記事で、コピペしたコードの中に「吹き出しに色を与えている」ものがあることを知ることができます。

 

 

つ・ま・り!

 

 

その色のコード部分を変えれば自分の好きな色にできるということです!

 

吹き出しに色をつけたいという方にはおすすめの記事ですね。

 

はてなブログの吹き出しのアイコンのアレンジの仕方がわかる記事!

 

www.uenoyou.net

 

三つ目は、はてなブログの吹き出しのアイコン画像をデコレーションしたくて探していたら見つけた記事です。

 

やはりこちらも参考にしているのは最初の記事です。

 

こちらの記事の通りに編集するとアイコン周りの装飾ができるようになります。

 

アイコンといえばこの吹き出しの横にある丸い画像のやつです。

 

twitterとかにもあるよね!

 

編集するコードの位置を丁寧に教えてくれているので迷子になることはありません。

 

アイコンも少しデコレーションしたい方はこの記事がおすすめです。

 

はてなブログの吹き出しの色のコードがわかる記事!

 

www.colordic.org

 

最後は色のコードが一覧になっている記事です。

 

この中に自分の好きな色があれば、そのコードをコピーして二つ目や三つ目の記事で出てきた該当箇所(色のコードを入れるところ!)に貼り付ければOKです。

 

色はバランスが大事なので、好きな色だけにしてしまうとかえって見づらくなる場合があるので注意してくださいね!

 

僕は水色が好きなので水色にしたかったんですが、アイコン画像的に色のバランスが変なので灰色にしました!

 

ツッコミとかしてくれる相方を水色にしました!

 

twitterのDMと同じ色の構成な件について…

 

吹き出しは偉大!

 

ということで、紹介した4つの記事を見ながら吹き出しを自分のはてなブログに導入することができました。

 

時間はかかりますが、一回導入できればあとは楽だし、見やすくなります。

 

今では何も見ずに「ここだ!」って思った書いてる記事の中に吹き出しを入れられてます。

 

見やすくなれば見てくれる人も増えて、滞在してくれる時間も増えて、もはやいいことしかありません!

 

しかも、好きな偉人同士の会話とか夢の共演的なこともできちゃいますよ!

 

それなら入れるしかないですよね?

 

最初の面倒くささには目をつぶりましょう!

 

このブログでも吹き出しをガンガン使っているので参考にしてみてください!

shoooy.hatenablog.com

 

 

twitterやってます。わかりやすく面白く日々歴史を発信しているのでぜひフォローしてみてください。いつの間にか歴史にハマっていますよ!

twitter.com

 

最近はYouTubeも始めました。これから動画方面も攻めて行くのでぜひチャンネル登録・高評価よろしくお願いします!

www.youtube.com