Glocal Life

自分らしさを大切に、世界とゆるく繋がるブログ

ブログ記事が格段に読みやすくなる!枠線や色の背景をCSSでつける

最近の記事の中で、CSSでつける枠線や色の背景を使いまくっています。

いや〜これマジ便利ですよ!ブログが半端じゃなく、読みやすくなります!

f:id:kbooks:20160608115619p:plain

ひとまず土下座

いや〜私は、この記事の背景のカスタマイズを、すごく気に入っているのですが、

www.yukihy.com

「めちゃくちゃ良いよ〜!!!」と、読者の皆様にオススメする前に、
まず自分の心をスッキリさせるために、謝罪から始めさせてください。

すーう(息を吸う音)


「ゆきっひーさん、以前の記事の中で、

『このカスタマイズ、あんまり役に立たなかった』

みたいなことを言っちゃって、

本当に本当にすみませんでした〜!!!m(_ _)mゴメン」


(最大限の声量で叫んでおります)

f:id:kbooks:20160608093225p:plain

以前に紹介した記事

いやね、実をいうとね、このカスタマイズを紹介するのは、初めてじゃないんですよ。

以前の記事でも、ご紹介させて頂いたのですが、なんとその記事の題名が、


「ブログのカスタマイズは『沢山すればするほど良い』という訳ではない」


Σ( ̄ロ ̄lll) ガビーン

kbooks.hatenablog.com

お前は何様だよ!?

今、読み返すと、「ブログ超初心者のくせに、お前は何様だよ!?」と

その記事を書いた時の自分を、膝詰めで問いただしたい気持ちでいっぱいです。

平にご容赦願います

普段あれだけお世話なっている、

ゆきっひーさんのカスタマイズに対して、

後ろ足で砂を掛けるような真似で、本来は切腹ものですが、

どうかご容赦いただけたらと平に願います。

百聞は一見にしかず

さて、前置きが長くなってしまいましたが(笑)

このカスタマイズの素晴らしさをお伝えするのに、
「百聞は一見にしかず」ということで、まずこの記事をご覧ください。

kbooks.hatenablog.com

私のブログの中では評判が良く、たくさんのブクマも頂いたのですが、
実はこの記事は、ゆきっひーさんのカスタマイズがなければ、
めちゃくちゃ読みにくく、読者の皆様に不快な記事となっていたと思います。

背景のカスタマイズのお陰だった記事

もともとは、この本の第8章「最後の労働者」の最後の1段落に感銘を受けたので、

限界費用ゼロ社会 <モノのインターネット>と共有型経済の台頭

限界費用ゼロ社会 <モノのインターネット>と共有型経済の台頭

その部分を解説しながら、私自身の意見もお伝えしたいと思って書き始めた記事ですが、
何せこの本の引用部分が難しくて、この本全部を読んでないと分かりにくい!

結果として、引用部分を細切れに切って「少し引用したら、その部分を解説する」
という方法を取りました。

引用と意見の部分が一目瞭然

しかし、この方法は、背景のカスタマイズがなければ、
「どの部分が本の引用で、どの部分が私の意見なのか」が
すごく分かりにくくなってしまっていたと思います。

しかし、背景のカスタマイズのおかげで、パッと見てすぐに

引用部分と私の意見の部分が、一目瞭然となりました。


お陰で、読者の皆様にも分かりやすい記事となり、

ご好評を頂いたと思っております。

基本の背景は5種類だが、バリエーションは無限大

基本の背景は、灰色・青・赤の3種類の色と、

枠線と点線の2種類で、計5種類ですが、

ゆきっひーさんが、このページで公開なさっているcssコードを少しいじれば、

いろいろなバリエーションが楽しめると思います。

www.yukihy.com

私の使い方とサンプル

私はシンプルなデザインが好きなので、「目次に灰色の背景」と、

「記事の部分で強調したい場所に青色」、

「引用部分を枠線で囲む」というような使い方をしていますが、


読者の皆さんに、ご紹介するために、

今回の記事で「赤色と点線の背景」も、初めて使用してみました。


本当に使いやすいカスタマイズなので、皆さんも是非一度試してみてください!

関連記事

初心者向けのブログのカスタマイズには、こちらの記事も合わせてどうぞ。

kbooks.hatenablog.com
kbooks.hatenablog.com