ファンブログ カスタマイズ　ぽあろの休日

見出し。
それは一目で記事内容の趣旨が把握できる大切な文です。
短い記事ならあえて付ける必要がありませんが、
長い記事を書く場合は有ったほうが見やすいですよね。

今回は、文章を装飾する見出しと引用ボックスの
カスタマイズです。

１．文章を装飾する効果

　なぜ、文章に見出しをつけたり、引用文を装飾する必要があるのでしょう？
　単に誰にも見せることを意図せず、自分の日記としてブログを活用するなら
　のんべんだらりと文章を綴るのも問題ないでしょう。

　しかし、せっかくのブログです。
　世界中の人が見る機会がある文章です。
　できれば、多くの人に読んでもらいたいですよね。
　特にアフィリエイトをメインでやってるいる人なら尚更のことです。

　フォントサイズ・行間のカスタマイズ記事でも述べましたが、その為にはやっぱり、
　見た目、第一印象が大事です。


　　【関連記事】 フォントサイズ・行間を変更して読みやすくしよう


　文字だけの文章より、写真やイラストがあった方が見やすいでしょうし、
　長い文章でも章立てがきちんとできていれば、読むのもそれほど苦にもなりません。



　　



　そして、その見やすさ、読みやすさが「また今度来てみようかな？」という気持ちに
　させるのではないでしょうか？
　少なくとも、私はそうです。

　以上のような点から、文章を装飾するということは、意味を持つカスタマイズだと
　私は感じています。

２．文章の装飾例

　では、具体的にどういう装飾をすれば良いのか？
　ここでは、例をあげて見ていきましょう。


　１）文章構成の重要さ

　　私の場合、解説記事が多いので結構長文の記事になることがよくあります。
　　ただでさえ、ニッチな分野だけに、興味がない人が最後まで読んでもらうようにするのは、
　　至難の技です。

　　いかにして、あまり興味がない人を引き付けるか？
　　勿論、引き付ける文章力があればそれが一番ですが、なかなか一長一短に
　　身に付くものではありません。

　　では、どうするか？

　　私は、章構成を重視し、文章を分けるようにしています。
　　そして、それぞれの章毎にわかりやすい見出しを付けるのです。

　　こういう感じですね。


　　


　　そうすることにより、章の見出しを見るだけで、大体の内容を把握できます。
　　タイトルだけで忌避しがちな記事も、ある程度パッと見で記事内容が解るため、
　　ちょっと読んでみようかな？という意識付けになるのではないでしょうか？

　　ただ、これら対策をとっても、長文であるがゆえのデメリットもあって、
　　なかなか一筋縄ではいかないのです。
　　その辺りはこちらの記事で解説したいと思います。

　　　【関連記事】 記事の表示方法を色々試してみよう



　２）見た目の重要さ

　　例えば、記事において「これが言いたい！」っていうのが一つや二つあるものです。
　　この時、ただプレーンな文字で書いても、あまり意図は伝わりません。

　　そこで、色を変えたり、太字にしたり、フォントサイズを大きくしたりして、
　　文字自体を装飾する方法がよく使われていますよね。

　　ここでは、文字ではなく文章としてひとくぐりに装飾してみましょう。
　　こんな感じですね。通常、引用ボックスと言われているものです。

ぽあろ
　名言とか、昔の人の言葉が引用されている記事を見ると、
　ちょっと得した（勉強した）気持ちになるよね。

　　どうでしょう。
　　文字として装飾するよりも、面として装飾した方が、アピール性が強いと思います。

　　所々に、こういった装飾を入れることにより、文章間にスペースが出来ます。
　　結果、文字が多めの記事でも、圧迫した感じが解消される効果もあります。
　　（普段からスペースは空けるほうなので、下図はいまいち説得力がありませんが)



　　



　　また、視認性も向上し、読みやすくなったのではないでしょうか。


　文章装飾の方法として、様々な文字色を使用したり、絵文字を使うという方法もあるのですが、
　私はあまり多用しないように心掛けています。

　何故かというと、どうしても視線が目立つ方に行ってしまいがちなので、
　記事としてはちょっと読み難くなってしまうと私が感じているからです。

３．見出しを作ってみよう

　では、実際にカスタマイズしていきましょう。
　この手のカスタマイズは、ちょっと検索すると山のように参考事例が出てくると思います。


　見出しデザインの参考にしたい CSSで作るhタグのサンプル集
　　いろいろな見出しのサンプルが紹介されています。




　スタイルシート見出しメーカー
　　自分の好きな色で見出しを自動的に作ってくれるサイトです。
　　スタイルシートも生成してくれるので、貼れば直ぐにイメージ通りの
　　見出しが作れます。


　ここでは、私が普段よく使用しているものを例に解説します。

　装飾といえば、やはりスタイルシートのカスタマイズがメインとなります。
　この記事で使用している見出しのスタイルシートを見てみましょう。

 
/* 見出し */
.entry-index{
	text-indent:3px;					/* 左ボーダーからの距離 */
	font-size: 130%;					/* 文字フォントサイズ */
	color: #000000;						/* 文字色 */
	border-left:10px solid #840000;		/* 左ボーダーの色と太さ */
	border-bottom:1px solid #840000;	/* 下ボーダーの色と太さ */
	padding:2px 5px 2px 5px;			/* ボーダーから文字までの距離 */
	margin:2px 5px 10px 3px
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'ＭＳ Ｐゴシック',sans-serif;
	}

　　



　記事中では、こんな感じで指定しています。
　classを指定するだけなので、お手軽に見出しを使うことが出来ます。

 
３．見出しを作ってみよう

 

　下ボーダーを無くしたり、太さを変えたりと、自分のブログに合った見出しを
　作ってみてください。

４．引用ボックスを作ってみよう

　次に引用ボックスの解説です。
　こちらもいろいろありますが、私が使っているのはこんな感じです。

　まずは、スタイルシート。

 
#bq2{
	/* 背景に使用する引用符の画像を指定 */
	background: #eee url(https://fanblogs.jp/poirot/file/144/cXVvdGUwqQ.gif) no-repeat 5px 5px;
	padding: 15px;
	width: 430px;
	margin-left: 45px;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'ＭＳ Ｐゴシック',sans-serif;
}

　　



　記事中では、このように指定しています。
　色とフォントサイズについては、ここでは割愛してます。

 
 
ぽあろ
　名言とか、昔の人の言葉が引用されている記事を見ると、

　ちょっと得した（勉強した）気持ちになるよね。

　こちらも、気に入った引用符のデザインを使ったりして、色々試して下さいね。


以上、見出しと引用文についての解説でした。
ちょっと長くなってしまいました。２回に分けても良かったですね。




【スポンサード リンク】