ブログの見出しに装飾を施す方法と効果的な見出しの付け方

headline
文章を書く上で、次章の要点を簡潔にまとめ、セクションの頭に大きめの文字で表現される「見出し」。

執筆を生業としたりブログを書かれる方なら馴染みのある言葉だろう。一般的に新聞や雑誌などでも目に付くものだ。

中には、見出しだけで内容の理解できる書き方があるそうだ。

今回はブログに於いて、文字だけではない「装飾の施された見出し」の付け方と「効果的な見出し」を紹介したい。

物語の切り替えに効果的

まずは、ブログを書く中でどのような時に見出しをつけるのが良いのか。

あくまでぼくの場合だが、「起・承・転・結」の流れに沿って表示するのがいいと思っている。つまり物語の転換期に使用することで、読者に「あ、話しが変わったんだな」と思わせる手法だ。

外食した内容を記事にする簡単な方法を例にとろう。

(起)お店
外観の写真や店構えの感想。どんな類いの飲食店なのか。

(承)店内
座席の状態・雰囲気・五感の感想など。

(転)料理
見た目・香り・食感など。ここが一番大事なところ。一番の撮影ポイント。

(結)食後
食べ終わったあとの感想や、金額に見合う味だったのかの判断。お店の場所。

一番オーソドックスな説明だが、こういった流れで見出しを使うと解り易いのではないだろうか。

ブログに装飾付きの見出しをつける方法

ぼく自身最近まで装飾付きの見出しは使っていなかった。ブログへの反映の仕方が解らなかったわけだが、下記の記事を参考にしたことで解決できた。

超基本のhtmlタグ <h2>の使い方をずっと間違えてたぞ・・・ | むねさだブログ

スタイルシートで見出しを設定する

基本はCSS(スタイルシート)に表現したい見出しの記述を追加し、記事本文でHTMLタグを用いて完成させるというものだ。

テーマを編集することになるので事前のバックアップは必須

style.css(スタイルシート)に記述する

とてもデリケートな部分を弄ることになる。設定するのであれば細心の注意をしながらい行たい。

テーマ style.css
使用しているテーマによって表記に違いがあるかもしれないが「a img { border: none; } 」の下あたりに追加する。

h2.mds {
font-size: 150%;
font-weight:bold;
padding:3px 6px;
margin:0 0 10px 0;
border-left:12px solid #000000;
border-bottom:1px solid #000000;
}

.fontLL{
font-size:200%;
}
.fontL{
font-size:175%;
}
.fontM{
font-size:125%;
}
.fontS{
font-size:81.3%;
}

テキスト上にHTMLで見出しを囲う

スクリーンショット 2013-01-22 17.30.28
このように囲うことにより、見出しが生成される。

難しい説明はしない。記述をコピペするなりして自分で試してみてほしい。ボーダーの太さやフォントの色など、必ず自分好みの「見出し」が見つかるはずだ。

カラーコードなどは下記のサイトを参考にするといいだろう。

カラーコード/みんなのタグ辞書/HTMLタグ辞書

さいごに

見た目ばかりに気を取られて中身のないブログに仕上がってしまっては本末転倒だが、事実、見栄えの良いブログには目を奪われたりするものだ。

誰かにとっては当たり前でも、当たり前ではない人に届くことを願っている。


記事が参考になったりおもしろかったら
いいね!してね( ´ ▽ ` )ノ

Twitterでマツオユキを

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA