見出しの装飾を変更し使い分ける

a-01

見出しは、ただの装飾の為にある訳ではありません。Googleさんが、クロールしやすい様に,例えば、<h2><h3><h3><h2><h3>の様な感じでツリー構造を心がける様にする事で、SEOが有利に働きます。

しかしながら、観るのはユーザー、つまりは人の目ですので、装飾を施すことによりユーザーが観やすい様なサイトデザインにしたいものです。

<h1>タグは、一般的にタイトルに使われているので、実質的には<h2>タグから使用する事になります。<h1>タグは基本1回しか使用しません。

大体変更のやり方をかじった方で<h3>を変更したら、サイドバーまで変わってしまって、「何じゃこりゃ!?」となって、<h4>とかを変更した経験のある人もいるかも知れません。原因はただ単に記述が足りないから。

検索をすると、見出しの見本サイトにあるコードの記述は、WordPress前提で記述したもので無かったり、「それくらい自分で考えろ」的なただ単に見出しを変えるコードしか書かれていない場合が多いです。

確かに、「それ位、自分でどうにかしろ」なんですけど、記事とサイドバーを分けるのは簡単です。まあ、見出しのコードを無償で提供してくれているのですから、文句を言うのはお門違いですね。

私は、<h2><h3>で回しています。

スポンサーリンク

見出しの装飾

はいここで、この4つを覚えてちょうだいな。

  • border-top
  • border-left
  • border-right
  • border-bottom

私の見出し2はborder-rightと言う事で、左に7pxの立てライン、border-bottomで文字下に線、dashed で1pxの破線を指定している訳です。

サンプル

この様な感じの<h2>見出しが出来上がる訳なんです。

そして、肝心の分岐ですが、表に【.entry-content】とありますよね?これで、メイン領域はこの見出しを使いますよ~と、指定している訳です。

では、サイドバー(ウィジェット)を変更するにはと言うと、【.widget-area .widget h3】と頭を変えて指定してやればいいだけ。

大抵の見出しサンプルには、この記述が無い為、サイドバーや他の部分の表示にも影響が出てしまう訳なんです。

  • .entry-content
  • .widget-area .widget h3

殆どのテーマでh3はサイドバーのタイトルに指定されているので、この指定を覚えておくと、カスタマイズしやすくなるかな

スポンサーリンク

シェアする

フォローする

スポンサーリンク