Movable TypeのテーマCSSをカスタマイズしたけど反映されない!時に確認する4つのこと。

2020年12月23日

クライアントのMovable Typeサイトをカスタマイズしていて、HTMLとCSSの書き方は間違っていないのに、反映されなくて困っていた時の話です。

結果からいうと、反映されなかった原因は、デザインの管理画面がページごとにある(クライアントのサイトでは3箇所も)のに、1箇所変えたら全部変わると思い込んでいたためでした。

原因がわかると何も大したことではありませんでしたが、この時の経験で学んだ、Movable Typeサイトのカスタムが反映されず困ったら確認すべき事項をまとめておきます。

 

1.サイト内でMovable Typeを組み込んでいるページはいくつあるか?

全てのページがMovable Typeで構築されていない場合は、Movable Typeで作られたページがいくつ組み込まれているかによって、そのページごとに個別にデザイン管理画面があり、それぞれを編集する必要があります。

Movable Typeの管理画面にログインすると、そのサイトの中にMovable Typeのページがいくつあるのかを確認できます。

筆者のクライアントのサイトでは、HTMLでコーディングされたサイトにMovable Typeで作られたページが3つ組み込まれてありました。

同じクライアントのサイトなのでデザインは統一されているのですが、HTML・CSSで構築されたサイトと違って、同じCSSを複数箇所書き換える必要があるのは面倒なところです。

 

2.Movable Typeのカスタマイズ方法に間違いはないか?

一番簡単なカスタマイズ方法は、Movable Typeの各ページ左側の「デザイン」→「テンプレートモジュール」(HTML)と「スタイルシート」(CSS)を書き換える方法だと思います。

画像を使わないカスタマイズであれば、そこを修正したり追記して、「保存・再構築」ボタンを押せば反映されます。

スタイルシートは複数のCSSをimportするようになっている場合もありますが、そのまま追記すれば後から書いたものが反映されるので、元のCSSを修正しなくてもカスタマイズ可能です。

 

3.画像のリンクが正しいか?

Movable Typeのカスタマイズで新たに画像を使用する場合、「アイテム」に画像をアップロードします。

アップロードしたら、その画像のURLをコピーして、テンプレートモジュールやスタイルシートの画像URLのところに貼り付けます。

ローカルの相対パスのままでは画像が表示されないため、パスを書き換える必要があります。

 

4.再構築ボタンを押したか?

テンプレートモジュールやスタイルシートを修正して、保存ボタンを押しただけではカスタマイズが反映されないようです。

「保存・再構築ボタン」もしくはデザイン管理画面の右上にある再構築ボタンを押す必要があります。

 

まとめ

以上、Movable Typeのカスタマイズが反映されなくて困った時に、確認すべき事項をまとめてみました。

原因がわかれば簡単なことでしたが、Movable Typeのテンプレートの構造を理解でき、いい勉強になりました。。

CMSは更新するのに便利ですが、HTMLサイトの一部として組み込むと管理が複雑になるので、新たにサイトを構築する時は構築した後のことまで考えて制作できたらと思います。