記事内の見出し要素のレベルを調節するショートコードのプラグイン

先日公開したShortCodeプラグインを使って、ブログ記事内の見出し要素(h1など)のレベルを調節するプラグインを作りました。
個別のブログ記事の文章にあるh1~h5の見出し要素を、インデックスページやカテゴリアーカイブ/日付別アーカイブページではh2~h6に変換することができます。

1.プラグイン作成のきっかけ

先日参加したWCAN 2009 Summerで、a-blog cmsの機能の1つとして、ページの種類に合わせて、見出し要素(h1など)のレベルを自動的に調整する機能が紹介されていました。
例えば、以下のようなことができるということです。

  • 個別の記事のページでは、記事のタイトルをh1要素にする
  • 記事一覧のページでは、記事のタイトルをh2要素にする

Movable Typeでは、記事のタイトルはテンプレートタグで独立して出力できるので、タイトルの見出しレベルの調節は、テンプレート側で簡単に行うことができます。
しかし、記事の文章中にh2などのタグを入れた場合、それらのh2タグ等だけを独立して出力する機能はないので、テンプレートでどうにかするのは難しいです。
また、ページの種類に応じて、文章内のh2などの要素のレベルを自動的に調節するような機能もありません。

a-blog cmsのこの機能は受けが良いようだったので、MTでも実現してみたという次第です。

2.インストール

プラグインは以下からダウンロードします。

SlideHeadingLevel_1_00.zip

ダウンロードしたファイルを解凍すると、「SlideHeadingLevel」というフォルダができます。
このフォルダを、Movable Typeの「plugins」ディレクトリにアップロードします。

なお、このプラグインはShortCodeプラグインと組み合わせて使います。
ShortCodeプラグインをまだインストールしていない場合は、そちらも合わせてインストールします。

3.基本的な使い方

このプラグインをインストールすると、「h1」~「h5」のショートコードが追加されます。
ブログ記事の「本文」や「続き」の欄で、見出しにしたい文章をこれらのショートコードで囲みます。

個々のブログ記事のページでは、「h1」~「h5」のショートコードは、それぞれh1~h5の要素に変換されます。
また、メインインデックスページや、カテゴリアーカイブ/日付別アーカイブページでは、「h1」~「h5」のショートコードは、レベルが1段下がってh2~h6の要素に変換されます。

例えば、記事の本文に以下のように入力したとします。

[h2]SlideHeadingLevelプラグインの使い方[/h2]

記事にh2ショートコードを入力した例

この部分は、ブログ記事のページのHTMLファイルには、以下のように出力されます。

<h2>SlideHeadingLevelプラグインの使い方</h2>

一方、メインインデックスページや、カテゴリアーカイブ/日付別アーカイブページの記事一覧の部分には、見出しレベルが1段下がって、以下のように出力されます。

<h3>SlideHeadingLevelプラグインの使い方</h3>

4.パラメータの指定

h1~h5ショートコードにパラメータを指定すると、それがそのままh1などの要素の属性として出力されます。
例えば、例えば、記事の本文に以下のように入力したとします。

[h2 class="hoge"]SlideHeadingLevelプラグインの使い方[/h2]

すると、変換後のHTMLファイルでは、「class="hoge"」のパラメータが、以下のようにh2(h3)要素のclass属性として出力されます。

<h2 class="hoge">SlideHeadingLevelプラグインの使い方</h2>

5.ライセンス

このプラグインはMITライセンスでご提供します。
商用版MT/MTOSと自由に組み合わせてご利用いただくことができます。