ブログをスマホ対応にカスタマイズ/MovableType レスポンシブテーマ「Rainier」

MovableTypeで構築している当ブログを、PCでもスマホでも閲覧できるレスポンシブに変更しました。

MovableType標準のレスポンシブテーマは「Rainier」と「Eiger」という2種類が用意されています。
他に有料・無料のテーマが公開されています。

とりあえず「Rainier」を使用してみました。

管理画面の「デザイン>テーマ」でRainierを選択。

レスポンシブWebデザインテーマ 「Rainier」 : Movable Type 5 ドキュメント

>レスポンシブWebデザインテーマ 「Rainier」
Rainierは、Media Queries (CSS) を利用したマルチデバイス対応のテーマです。PC、スマートフォン、タブレットなどのサイズを検知して、最適なデザイン表示を行います。また、テーマのロゴやヘッダーバナー画像、ナビゲーションの内容を簡単にカスタマイズできる機能を実装しています。

パソコンの大きい画面で閲覧すると本文記事の隣にウィジェットを並べて表示。
ブログの小さい画面では本文記事の下にウィジェットを置きます。

標準状態の「Rainier」 は、ヘッダーが黒のシンプルなデザインです。

rainier_black
色を変えるのはどうするか調べてみたら「ブログのスタイル」でヘッダーの画像や文字の色を簡単に変更できました。

管理画面の「デザイン>スタイル」で好きなスタイルを選択。

スタイルを適用する : Movable Type 5 ドキュメント

テーマを変更すると、これまで使っていたカウンターや広告が消えてしまったので、ウィジェットテンプレートを作ってウィジェットセットに追加。

要領が分かってきたので、他のブログもカスタマイズしていきます。

rainier+thema