今まで、間違われたことなど一度もありません。

そのぐらい、変なところに細かく、そして、変なところにダラシナイ。

そんな性格なので、ウェブサイトを見ていると、なぜだか文章の右側の折り返しが狂って下の段に落ちてるのが気になってしょうがない。

私の中で、文章の折り返しが揃わないというのは許されない範囲なのだ。

これは、ブログでも同じことで、MovableTypeの初期設定では、ブログの記事の右側部分が揃う設定にはなっていない。

別に気にならない人は関係ないかもしれないが、私のように気になる人は結構多いのではないだろうか。

ちょっとイジッテみよう。

スタイルシートの編集

編集する前には、必ず、「テンプレートの初期化」を行うことで、バックアップをとることが出来ます。

必ずとる必要はありませんが、この記事を見ている人は、私と同じような性格なのではないかと推測しましたので、記載しておきました。

ちなみに右の絵がこのブログの設定画面です。

バックアップも日付を付けて管理しています。

MovableTyleの設定画面から、

[デザイン] → [テンプレート] → [スタイルシート(ベーステーマ)]

を押して編集画面に入ります。

一番上の方に、下記の部分があると思いますので、そこを追加しました。

html,body,div,
ul,ol,li,dl,dt,dd,
form,fieldset,input,textarea,
h1,h2,h3,h4,h5,h6,p,pre,code,blockquote,hr,
th,td {
margin:0;
padding:0;
text-align:justify;
text-justify:inter-ideograph;
}

スタイルシートに上記を追加するだけで、「記事」や「タググラウド」の文字の折り返しが、揃ったと思います。

私のように細かい方はお試しあれ。

All Pages　1｜2｜3｜4

Movable type 4でもトップページが分割されない仕様だったので、同じように設置しようとしたとき、下記の部分で足踏みしてしまった。

• php化への対応

いろいろな所で、Movable Type 4のphp化について触れられていますが、大変面倒で煩わしかったので、今回は避けたい部分の一つです。

そんな中、php化を行わずに、htmlをページ分割してくれるプラグインがあったので早速試してみることにしました。

• スカイアークシステム
  静的ページ用ページ分割プラグイン：PageBute
• SCREAMO
  クールにページ分割 for Movable Type
• Movable Type(MT)の無料テンプレート
  静的ページでアーカイブを分割するプラグイン PageBute

設置方法の手順を忘れないよう、以下にまとめておくことにしました。

今回は、私のブログ環境での設置方法ですので環境の違う方は読み替えて下さい。

• MovableType本体 : public_html/system/
• PageBute本体 : public_html/system/plugins/pagebute/

PageButeの設定手順

作業概要

1. PageButeのダウンロード
2. PageButeファイルのアップロード
3. テンプレートモジュールの新規作成
4. インデックステンプレート「メインページ」の修正
5. ブログの設定「ブログ記事の表示数」を[0]にする
6. サイトの再構築

PageButeのダウンロード

スカイアークシステム
http://www.skyarc.co.jp/

ダウンロードファイルを解凍すると、[PageBute]というフォルダが展開される。

[PageBute]
　　　└PageBute.pl

データのアップロード

ftp等により、[plugins]フォルダに設置する。

<[MovableType本体]>
 　　└[plugins]
　　　　　　├[PageBute]
　　　　　　│　└PageBute.pl
　　　　　　│
　　　　　　├[・・・]
　　　　　　│
　　　　　　├[・・・]
　　　　　　│

そのまま、[plugins]の直下に「PageBute.pl」のみ設置してもいいのですが、整理しやすいようにフォルダごと設置することをお勧めします。

テンプレートモジュールの新規作成

参考としたサイトのように、メインページやアーカイブページに直接書き込んでもいいのですが、直感的に分かりやすくすることに加え、記憶忘れ防止のため、モジュール化して管理することにしました。

管理画面から、テンプレートモジュールの画面へ進み、「モジュールテンプレートを作成」を押すことで、新規に作成が行える。

そこに、下記を貼り付けて保存する。

ちなみに、テンプレート名は、「ナビブロック」としている。

新規作成
<MTPageContents count="5">
<MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
<$MTPageSeparator$>
</MTEntries>
</MTPageContents>

<div align="center">
<MTIfPageBefore>
<span><$MTPageBefore delim="前に戻る"$></span>
</MTIfPageBefore>
<$MTPageLists$>
<MTIfPageNext>
<span><$MTPageNext delim="次に進む"$></span>
</MTIfPageNext>
</div>

インデックステンプレート「メインページ」の修正

修正を行う箇所は、 <MTEntries>～</MTEntries> 、と <div class="content-nav">～</div> を削除して、代わりに先ほど作成した <$MTInclude module="ナビブロック"$> を追加しただけです。

修正前（デフォルト）

<$MTInclude module="ヘッダー"$>

<MTEntries>
    <$MTEntryTrackbackData$>
    <$MTInclude module="ブログ記事の概要"$>
</MTEntries>

<div class="content-nav">
    <a href="<$MTLink template="archive_index"$>">アーカイブ</a>
</div>

<$MTInclude module="フッター"$>

修正後

<$MTInclude module="ヘッダー"$>

<$MTInclude module="ナビブロック"$>

<$MTInclude module="フッター"$>

ご覧頂いたように、スッキリ設置することが出来ましたので、今後、他の設定を行う場合にも、同様にモジュール化とした方が管理しやすいでしょう。

ブログの設定「ブログ記事の表示数」を[0]にする

サイトを再構築する前に、上記設定を確認しておく必要があります。（私はこれでつまづきました）

数値が入っていると、正しく投稿数を取得出来ないので、私のように「あれっ！」と何度も見直すハメになります。

[0]にすることで、無制限の設定と思われます。

サイトの再構築

1 2 3 4 5 6 7 8 次に進む

実際に上記のように表示されているか確認する。

この「lightbox」というプラグインは、サムネイル画像を押したときに、大変オシャレにポップアップ表示されるため、気に入っていたプラグインの1つです。

今回、新しいエンジン(Movable Tyle 4.*)でも、是非とも設置したかったので調べてみました。

そうすると、lightbox自体もバージョンアップ(1.*→2.*)しているのですね。

ますます意欲がわいてきます。

参考としたサイトは、以下の2つ。

• マイコミジャーナル

【ハウツー】ゼロからはじめるLightbox 2.0
• nasu
  Lightbox JS v2.0をMovable Type 4に設置する。
• Movable Type備忘録
  画像を挿入で出力されるタグを Lightbox 対応にする

設置方法の手順を忘れないよう、以下にまとめておくことにしました。

今回は、私のブログ環境での設置方法ですので環境の違う方は読み替えて下さい。

• MovableType本体 : public_html/system/
• lightbox本体 : public_html/system/javascript/lightbox/

lightbox JS v2の設定手順

作業概要

1. Lightboxのダウンロード
2. lightboxファイル(lightbox.js)の修正
3. 既存ファイル(Image.pm)の修正
4. lightboxファイルのアップロード
5. スタイルシートを読み込む設定
6. ウィジェットテンプレートの「フォト」の修正
7. サイトの再構築

Lightboxのダウンロード

Lightbox 2
http://www.huddletogether.com/projects/lightbox2/

ダウンロードファイルを解凍すると、[lightbox JS**]の直下に[css][images][js]というフォルダが展開される。

[lightbox]
　　　├[css]
　　　│└lightbox.css
　　　│
　　　├[images]
　　　│├blank.gif
　　　│├close.gif
　　　│├・・・ 
　　　│
　　　├[js]
　　　│├effects.js
　　　│├lightbox.js
　　　│├prototype.js
　　　│└scriptaculous.js
　　　└index.html
 

lightboxファイル(lightbox.js)の修正

修正箇所は「loading.gif」の設置場所を指定する設定を行う。

それぞれ異なるディレクトリから動作させるため、トップからのURLで記載すること。

[js]フォルダ内の「lightbox.js」というファイルをエディタで開き、下記のように修正を行う。

修正前(MovableType4だと65行目)
var fileLoadingImage = "images/loading.gif"; var fileBottomNavCloseImage = "images/closelabel.gif"; 

修正後
var fileLoadingImage = "/[MovableType本体] /javascript/lightbox/images/loading.gif"; var fileBottomNavCloseImage = "/blog/images/closelabel.gif";

<[MovableType本体]>
 　　└[javascript]
　　　　　　├[lightbox]
　　　　　　│　├[css]
　　　　　　│　│└lightbox.css
　　　　　　│　│
　　　　　　│　├[images]
　　　　　　│　│├blank.gif
　　　　　　│　│├close.gif
　　　　　　│　│├・・・ 
　　　　　　│　│
　　　　　　│　├[js]
　　　　　　│　│├effects.js
　　　　　　│　│├lightbox.js
　　　　　　│　│├prototype.js
　　　　　　│　│└scriptaculous.js
　　　　　　│　└index.html
 

<[MovableType本体]>
 　　└[lib]
　　　　├[MT]
　　　　│　├[Asset]
　　　　│　│　├image.pm
　　　　│　│　├・・・
 

いろいろなプラグインを入れては、楽しんでいたのだが、バージョンが「4.*」に上がってからは、一般的に使うのであれば「デフォルト」で十分といった印象。

新しい機能の中に、 ウィジェットセットというのがあり、XOOPSのブロックのような仕組みのようで、なんとなく使ってみたくなった。

やはり、何度設定しても何も変らない。

いろいろ調べてみると、「デフォルト」では使えないらしい。

こんなに使い勝手が良くなっているのだから、使う、使わないについては、選択出来るようになぜしなかったか疑問に思う。

普通に使う場合は問題ないだろうが、最低でもカレンダーを貼り付けておかなくては、ブログっぽくないと思ったので、久々に「カスタム道」に挑戦することにした。

いろいろな記事を総称すると、下記にたどり着いたので、まとめておく。

1. テンプレートのバックアップ(サイドバー (3カラム)or(2カラム))
2. ウィジェットの新規作成
3. テンプレート修正(サイドバー (3カラム)or(2カラム))
4. サイトの再構築

 
何が起こるか分らないので、バックアップを取っておく。

[サイドバー(2カラム)or(3カラム)]にチェックを付けて、プラグインアクションの「テンプレートの初期化」を押すと、以下のようにバックアップが取れたことを確認する。

サイドバー (3カラム)or(2カラム) (Backup from 200*-**-** **:**:**)

続いて、ウィジェットの新規作成を行う。

[デザイン]→[ウィジェットセット]→[ウィジェットセットの作成 ]→[必要なウィジェットを選択]→[セット名を付けて保存]

ここでは、デザインのレイアウトがどのタイプでも使えるように、ウィジェットセットを2種類作っておく。

セット名(1) Widget-left

セット名(2) Widget-right

今回は、左カラム(Widget-left)、右カラム(Widget-right)のように分りやすい名前を付けた。

こうすることで、3カラム時の、「大・小・小」でも「小・大・小」でも対応可能となる。

続いて、ウィジェットセットを反映させるためにテンプレートの修正を行う。

「テンプレートモジュール」→[サイドバー(2カラム)or(3カラム)]を開く。

デザインをすべて「ウィジェットセット」で設定することを踏まえて、デフォルト部分を全て消して下記に書き換えてることにした。

<div id="beta">
<div id="beta-inner">
<$MTWidgetManager name="Widget-right"$>
</div>
</div>
<div id="gamma">
<div id="gamma-inner">
<$MTWidgetManager name="Widget-left"$>
</div>
</div>

赤色は、先ほど作成したウィジェットの名前を入れている。

最後に、サイトを再構築すれば、ウィジェットが反映される。