FC2ブログで個別記事のタイトルをページによってh1、h2に切り替える

この前FC2ブログの「<title>」タグをページ毎に切り替えるカスタマイズ方法を紹介したけど、今回はエントリーのタイトルをページによってh1、h2に切り替える方法を紹介。

切り替え方法を説明する前にhtmlを説明。このブログもそうだけど、インターネット上に存在する全てのWebページはhtmlで出来ている。試しにブラウザ（Internet Exploreとか）のメニューで「ソースを表示」でクリックすると、英語に似たような文字でズラズラと訳の分からん文字があるよね？
それがWebページの実態。ブラウザはhtmlを解釈してビジュアルに表示してくれているって訳。

このhtmlには「書く決まり」、つまり文法がある。そしてhtmlの文法は「文書」を想定している。文書とはwordソフトで文章を書くことを想定すると分かり易い。
htmlで書かれた文章は「h1」で大見出しを書き、以降の見出しには段階的に「h2、h3、h4、h5、h6」を使うことになっている。wordソフトでも一番上にその文書の見出しを書くよね？それと同じでhtmlでは文書の大見出しをh1で書くという決まりがある。

SEO対策的にもhtmlの文法に則って書くというのは効果が高いと言われている。SEOについては専門的に解説しているページがあるで、ここでは多くは述べない。要するにきちんとhtmlの文法に基づいて書かれたWebページの方が検索エンジンで検索した結果に載りやすくなるということ。

FC2ブログのテンプレートでは「ブログのタイトル」（このブログでは「自由人万歳ν（ニュー）タイプ」）がh1になっている。記事のタイトルはh2になっていることが多い。

ブログのトップページやカテゴリ一覧のページ、アーカイブページでは、h2でも良いんだけど、個別記事のページではそのWebページの見出しは、「エントリーのタイトル」にしたいところ。文書的な観点から考えてみても、「エントリーのタイトル」が見出し、つまりh1の方が相応しい。
そこで個別記事ページとそれ以外のページでh1、h2を切り替えたいとなってくる訳だ。

ページによってエントリーのタイトルをh1、h2で切り替えるには、同じくFC2ブログの「変数」（テンプレート中で使える変数一覧）を使う。

使う変数は4つだけ。「<title>」タグの切り替え方法に比べたら遥かに簡単だ。
「<%topentry_link>」は個別記事のURLを抽出する変数。個別記事ページへのリンク先URLだ。
「<%topentry_title>」は個別記事のタイトルになる変数。
「<!--not_permanent_area-->～<!--/not_permanent_area-->」は個別記事以外のページで表示する変数。つまりこの変数で挟まれた内容は個別記事以外のページ、カテゴリページやトップページで表示されることになる。
「<!--permanent_area-->～<!--/permanent_area-->」は個別記事ページでのみ表示する変数。個別ページでのみ表示されることになる。

もう分かったと思うけど、「<!--not_permanent_area-->～<!--/not_permanent_area-->」では個別記事以外のページなのでh2を使い、「<!--permanent_area-->～<!--/permanent_area-->」では個別記事のタイトルをhtml文書の見出しにしたい訳だからh1を使う。
まとめると以下の通り。これで記事のタイトルが個別記事ではh1、それ以外のページではh2になる。

<!--not_permanent_area--><h2 class="entry_title"><a href="<%topentry_link>" title="この記事を開く"><%topentry_title></a></h2><!--/not_permanent_area-->
<!--permanent_area--><h1 class="entry_title"><a href="<%topentry_link>" title="この記事を開く"><%topentry_title></a></h1><!--/permanent_area-->

「class="entry_title"」は使っているテンプレートによって名前や指定されている内容が違うので、自分が使っているテンプレートを確認すること。また見栄えを整える場合はスタイルシート（CSS）を確認して編集する。

FC2ブログのテンプレートではそれほど難しいCSSは使われていないので、同じ名前のもの（上で言う「class="entry_title"」）を使えば多くの場合は問題ないと思う。
表示が崩れてしまった場合は、CSSを頑張って読んでもらうしかないが、崩れる原因としてはCSSで「h1」に対して何らかのスタイルが適用されている、または名前や指定方法が間違っている（上の例で言うと「class="entry_title"」のスペルを間違えたり、「"」が抜けていたりとか。）がよくある原因。それでもダメだったら本当に頑張ってCSSの勉強をしましょう。

ブログのよさは簡単に記事が書けて公開できるところだけど、このようにカスタマイズを考えるのも楽しい。特にFC2ブログは変数も豊富に用意されているし、瞬時に反映されるのでカスタマイズしやすい。色々と試行錯誤しながらカスタマイズすると、自分のブログがますます自分のものになるようで愛着が湧きますよ。

関連記事

• 「FC2ブログで関連エントリーリスト」が使えなくなっているようです
• DORAEMON ETERNAL
• 今さら！？「Netscape Navigator 9、正式リリース」だって
• ソニーの薄型テレビ「BRAVIA」のうさぎ満載なCM動画
• FC2ブログで「関連記事」「関連エントリー」を表示する方法
• flOwという無料Flashゲームを紹介してみる
• 無料版livedoorブログからFC2ブログへの引越し方法（データのバックアップや画像ファイルの再アップロード方法も！）
• F6ユーザのサイト「Nikon F6で・・・」を紹介してみる
• GoogleMapライクな「ドラクエ地図」
• 「住所パワー」を使って住所のパワーを測ってみよう！

タグ（ブログ内検索もできます）：FC2ブログ html タイトル カスタマイズ

うーん、、勉強になりますが、詳しくないのでわかりません。。。｡｡･ﾟ･(ﾉд`)･ﾟ･｡

もうちょっと熟読いたします。。。。