アメブロカスタマイズ記事編：記事に小見出しを付けて読みやすくしよう

今回は、文章をメインに記事を書かれる方にオススメのカスタマイズです。

誰しもそうだと思いますが文章がずら～～～～～と羅列しているページと
記事が段落別けされていて、それぞれ小見出しがついているページとでは
断然後者の方が読みやすいですよね？

小見出しを見るだけで、そのページがどんな内容で構成されているからも一目瞭然です。
ただ自分が言いたいことを羅列する記事ではなく、読者の立場に立ってより読みやすいページにする事が今回の目的です。

カスタマイズを始める前に

記事を読みやすくする為に小見出しをつけていきますが小見出しには見出しタグというものを使います。
見出しタグというのは「h1」から始まって「h2」「h3」・・・「h6」までの見出し用のタグで
「h1」が最も重要なメイン見出し、以降「h2」「h3」と続きます。

「h1」タグは、記事のタイトルで既に使われているので記事の中の小見出しは2番目に重要な「h2」タグを使います。

「h2」タグを使う事で検索エンジンに「小見出しだよ・重要だよ」と伝えることができ、SEOにも強くなります。

CSSでカスタマイズする事によりすべての記事につけた小見出しのデザインを統一することができるので
読者に判りやすく読みやすいページに仕上がります。

ただ、アメブロの記事編集機能ではHTMLタグを使う事が出来ないので、「HTML表示」で編集する必要があります。
その方法も合わせて説明します。

記事に小見出しをつける

では実際に記事に「h2」タグを使用して小見出しを付けてみます。
「ブログを書く」または「記事の編集・削除」の「HTML表示」をクリックします。


ここに小見出しを追加します。
小見出しにするテキストは「<h2>～</h2>」でくくります。

※標準エディタを使っている方は「新エディタを使う」をクリックして上のイメージと同じエディタに変更するか
標準エディタの「HTMLタグを表示」で小見出しを付けて下さい。



編集後は以下の様にページに表示されます。


他のテキストに比べて見出しテキストが大きく、太文字になっています。
しかし、このままでは小見出しとしては判りにくくパッとしません。
そこでCSSを使って見た目を変えていきます。

CSSの編集画面を開く

まずは、CSSの編集画面を開いて下さい。

「ブログを書く」＞サイドバーの「ブログデザイン」の「デザインの変更」＞「CSSの編集」をクリックします。
今回のCSSは修正ではなく追加になります。
CSS編集ページの一番下「/*その他、拡張があれば記述*/」の後に追加して下さい。

CSSを編集して小見出しのデザインをカスタマイズする

以下のCSSを追加します。

.articleText h2 {     font-size: 120%;     color: #333333;     border-left: 5px solid #009900;     font-weight: bold;     padding: 2px 0px 2px 5px;     marign: 0; }

実際の表示はこのようになります。


文字サイズを文章に合わせた比率に変え、左側に緑色のボーダー(#009900)をつけて小見出しであることを判りやすくしました。

文字の色は黒より一段階薄いダークグレー(#333333)を指定し、文字の太さは太文字のままですがboldで指定しました。

まとめ

以上で修正は終了です。要領がわかればご自分のサイトに合わせて以下を変更してみて下さい。

文字の大きさを変えたい場合：「font-size」の値を編集
文字色を変えたい場合：「color」

文字の太さを変えたい場合：「font-weight」

左のボーダーに関しては「border-left」を編集して下さい。
値は左から「線幅」「線の種類」「線の色」になります。
線と文字の間隔を調整するには「padding」の4つめの数字を変更して下さい。

ボーダーの値はスタイルシートリファレンスを参考にして下さい。

今回は「.articleText h2」の書き方がポイントになります。
単に「h2」だけだと、ページ全体で「h2」の小見出しを指定している場所全てが変わってしまいます。
「.articleText h2」と書くことによって、記事の中だけの小見出しに適用されるのです。

カスタマイズ前に比べて小見出しがはっきりとして文章全体が読みやすくなりました。
記事編集時に手で入力する必要がありますが、記事の内容をしっかり段落分けして上手に小見出しを付けて下さい。

ちなみに、私のブログで「カスタムを始める前に」とか「まとめ」とかもすべて「<h2>～</h2>」でくくった小見出しになります。

わかりにくい箇所があれば気軽にコメントで質問して下さい。