TopMovable Typeカスタマイズページ分割 > 2013年11月
2013年11月 8日

Movable Typeでブログ記事やウェブページをページ分割する方法

Movable Typeでブログ記事やウェブページをページ分割する方法を紹介します。

ブログ記事やウェブページをページ分割

1.はじめに

Movable Typeでは静的に出力したアーカイブページやブログ記事、ウェブページをページ分割する機能が用意されていません(ダイナミックパブリッシングやDynamic MTMLであれば可能)。

メインページやアーカイブページのページ分割については「Pagebuteプラグイン」でページ分割することが可能です。

PageBute プラグインによるページ分割

が、このプラグインでもブログ記事やウェブページのページ分割についてはサポートされていません。

ということで、ブログ記事やウェブページをページ分割する方法を紹介します。

2.プラグインのインストール

実は、ブログ記事やウェブページを分割する場合もPageButeプラグインの利用が可能です。

ただしちょっと細工が必要なため、プラグインがデフォルトでサポートしているという意味ではありません。

そういうわけで、PageButeプラグインのインストールから行います。

まず、下記のリンクからプラグインアーカイブ(2013年11月現在の最新バージョンは3.5.7 )をダウンロードし、任意のフォルダに保存してください。

静的ページ用ページ分割プラグイン:PageBute

プラグインアーカイブを展開し、中にあるPageBute.plをpluginsディレクトリにアップロードしてください。

ブログ管理画面より「システム」→「プラグイン」でプラグイン一覧を表示し、次のように「PageBute」が表示されればOKです。

プラグイン一覧

3.ブログ記事をページ分割する

MT管理画面でブログ記事アーカイブ(MT6以降は「記事アーカイブ」)テンプレートの編集画面を開き、以下の赤色部分を追加します。

テンプレートはMT6のものを使用していますが、設定位置は他のバージョン、他のテンプレートでも大体同じで、MTEntryBodyタグの前後を追加・修正します。

PageButeのバージョン3.5.7以降ではMTPageNextタグがMTPageAfterタグに変更されているので注意してください。

…前略…
<mt:If tag="EntryBody">
    <div class="asset-body">
<mt:PageContents count="1">
    <$mt:EntryBody mteval="1"$>
</mt:PageContents>
<div class="content-nav">
<mt:ifPageBefore>
    <span><$mt:PageBefore delim="&#65308;"$></span>
</mt:ifPageBefore>
<$mt:PageLists show_always="0"$>
<mt:ifPageAfter>
    <span><$mt:PageAfter delim="&#65310;"$></span>
</mt:ifPageAfter>
</div>
    </div>
</mt:If>
…後略…

設定内容は通常のアーカイブページのページ分割とそれほど変わりませんが、ポイントとしては以下の3点です。

  • MTEntryBodyタグに「mteval="1"」を追加
  • MTPageContentsタグのcountモディファイアは必ず「1」を設定
  • MTPageListsタグに「show_always="0"」を設定

そして分割したいブログ記事の本文に、次のようにMTPageSeparatorタグを埋め込みます。文末にも設定することを忘れないでください。

あいうえお
かきくけこ
<$mt:PageSeparator$>
さしすせそ
<$mt:PageSeparator$>
たちつてと
なにぬねの
<$mt:PageSeparator$>

設定イメージ(クリックで拡大)
設定イメージ

これで記事を保存すれば、MTPageSeparatorタグで区切った部分でページ分割されたブログ記事ページが出力されます。

1ページ目
1ページ目

2ページ目
2ページ目

3ページ目
3ページ目

ページナビゲーションのHTMLマークアップは自由に変更してください。

4.ウェブページをページ分割する

MT管理画面でウェブページアーカイブテンプレートの編集画面を開き、以下の赤色部分を追加します。

設定内容の説明は3項とほぼ同じなので割愛します。

…前略…
<mt:If tag="PageBody">
    <div class="asset-body">
<mt:PageContents count="1">
    <$mt:PageBody mteval="1"$>
</mt:PageContents>
<div class="content-nav">
<mt:ifPageBefore>
    <span><$mt:PageBefore delim="&#65308;"$></span>
</mt:ifPageBefore>
<$mt:PageLists show_always="0"$>
<mt:ifPageAfter>
    <span><$mt:PageAfter delim="&#65310;"$></span>
</mt:ifPageAfter>
</div>
    </div>
</mt:If>
…後略…

そして分割したいウェブページの本文に、次のようにMTPageSeparatorタグを埋め込みます。文末にも設定することを忘れないでください。

AAA
BBB
<$mt:PageSeparator$>
CCC
DDD
<$mt:PageSeparator$>
EEE
FFF
GGG
<$mt:PageSeparator$>

設定イメージ(クリックで拡大)
設定イメージ

これで記事を保存すれば、MTPageSeparatorタグで区切った部分でページ分割されたウェブページページが出力されます。

1ページ目
1ページ目

2ページ目
2ページ目

3ページ目
3ページ目

ページナビゲーションのHTMLマークアップは自由に変更してください。

5.リッチテキストで利用する場合

まずNGになるパターンです。

リッチテキストの状態のまま、MTPageSeparatorタグを記述すると、

(クリックで拡大)
MTPageSeparatorタグを記述

HTMLではこのように実体参照されて「&lt;$mt:PageSeparator$&gt;」となってしまい、ページ分割が正常に動作しません。

(クリックで拡大)
実体参照

また、「<$mt:PageSeparator$>」と書くと、HTML編集モードに切り替えたときにHTMLタグと認識されず誤って実体参照されてしまうようです。

ということで、リッチテキストモードでページ分割を行う場合、次の手順で作業を行ってください。

ここではTinyMCEをサンプルに使います。

まず、リッチテキストで入力したあと、HTML編集モードのアイコンをクリックして、HTML編集モードにします。

(クリックで拡大)
HTML編集モード

ページ分割を行いたい箇所に以下のフォーマットでMTPageSeparatorタグを記述します。

<mtpageseparator></mtpageseparator>

設定イメージ(クリックで拡大)

テンプレートタグを埋め込んだあと、リッチテキストモードに戻せば完了です。

(クリックで拡大)
リッチテキストモード

リッチテキストモードに戻したあと、文末に余分な改行が含まれるように見えるかもしれませんが削除しないでください。

6.その他

本カスタマイズでは、MTEntryBodyタグやMTPageBodyタグにmtevalモディファイアを設定するため、本文に記述したMTテンプレートタグが評価されます。

たとえば、本文にMTPageSeparatorタグ以外のテンプレートタグ(たとえばMTEntryTitleタグなど)を誤って記述すると、評価されて記事タイトルが出力されるので注意してください。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3