表示するページによって見出しレベルを自動で変更する

表示するページによって見出しレベルを自動で変更する

a-blog cmsでは、表示するページによって、HTMLの見出しのレベルを自動で変更することができます。

例えばトップページ、一覧ページ、詳細ページにおいて、それぞれのページで異なる要素を割り当てたい場合があります。

例1）エントリータイトルの場合

一覧ページ：h3 詳細ページ：h1

それぞれのテンプレートファイルを用意すれば、それぞれのファイルでマークアップすればよいですが、テンプレートを共通で使いまわす場合はそれが難しい場合があります。

表示するページによって見出しレベルを自動で変更できれば、ページに適したマークアップを施すことで検索エンジンにもコンテンツを適切に伝えることができ、SEOにも効果的です。

記述例

表示するページによって見出しレベルを自動で変更する方法は、2つあります。

Touchモジュールを使用する

Touchモジュールを使用すれば、特定の条件の場合にだけ表示するといったことができますので、これを利用します。

例2）Webサイトのロゴをトップページ・一覧ページ・詳細ページで1つのテンプレートで表示する場合

<!-- BEGIN_MODULE Touch_Top --><h1><img src="logo.gif" width="150" height="50" alt="a-blog cms" /></h1><!-- END_MODULE Touch_Top -->
<!-- BEGIN_MODULE Touch_Index --><p><img src="logo.gif" width="150" height="50" alt="a-blog cms" /></p><!-- END_MODULE Touch_Index -->
<!-- BEGIN_MODULE Touch_Entry --><p><img src="logo.gif" width="150" height="50" alt="a-blog cms" /></p><!-- END_MODULE Touch_Entry -->

トップページの場合にはh1要素として表示され、一覧ページ・詳細ページの場合にはp要素として表示されます。

例3）エントリータイトルを一覧ページ・詳細ページで1つのテンプレートで表示する場合

<!-- BEGIN_MODULE Touch_Index --><h3><a href="{titleUrl}">{title}[raw]</a></h3><!-- END_MODULE Touch_Index -->
<!-- BEGIN_MODULE Touch_Entry --><h1><a href="{titleUrl}">{title}[raw]</a></h1><!-- END_MODULE Touch_Entry -->

一覧ページの場合にはh3要素として表示され、詳細ページの場合にはh1要素として表示されます。

Case_Viewを使用する

以下のように記述します。例2と記述のしかたが異なりますが、動作は同じです。

<!-- BEGIN_MODULE Case_View -->
<!-- BEGIN top -->トップページ表示のとき<!-- END top -->
<!-- BEGIN index -->一覧ページ表示のとき<!-- END index -->
<!-- BEGIN entry -->詳細ページ表示のとき<!-- END entry -->
<!-- END_MODULE Case_View -->

見出しだけでなく、他のコンテンツにも応用可能

これらの方法で応用すれば、見出し以外のコンテンツもページによって表示を切り替えることが可能です。

---