WordPressブログにResponsiveテーマを適用した時のメモ

(前半は会社ブログのWordPressへの移行に伴う検討とかなので、興味なければ後半へ読み飛ばしてください)

会社ブログのWordPress変更で、デザインをどうするか考える必要が出てきました。

切り替え前のブログは、MovableTypeのテンプレートを元に、会社のwebデザイナーにいつもの色(akkyカラー #900)だけ指定して作ってもらったもの。

MovableTypeのテーマと同じ表示になるようにWordPressのテーマを自作する、というほどには、今のデザインでないといけない、という思い入れもなかったので、ありもののWordPressテーマで赤っぽいものを選んで適用すればいいかな、と考えました。

あと考えるとすれば、スマートフォンや携帯電話など、画面のサイズが違うデバイスで見る人にどう対応するか。これまでなら、携帯電話にはKtai Style、スマートフォンにはWPTouch、Nintendo DSには、PSPには、etc. とUser-agentを見て吐き出すHTMLを切り替えるようなプラグインを入れていたのですが、考えてみれば、このブログは画像少しにテキストがメインだし、デバイスごとのテーマを統一感があるように直しているわけでもないので、ここに注力してもあまり意味がないかな、と。

Responsiveテーマの導入と設定

ここは最近バズってるレスポンシブデザインでお茶を濁そうか、ということで、WordPressのResponsiveな無料テーマを公式テーマ・ディレクトリから検索しました。

# 「お茶を濁す」というのは、レスポンシブデザインは基本的に開発・提供側が楽をするための手法でしかないと僕が思っているからです。「これからはレスポンシブ・デザインだ!」みたいなノリで導入したわけではなく。

いろいろ出てくるのですが、その名もずばりResponsiveというテーマが最初に出てきて、ダウンロード数も30万と人気のようなので、管理画面からこれをインストールしました。

テーマを有効にすると、ブログのトップページにブログ記事がまったく出てこなくなるのでびっくりしますが、ブログをメインに戻したいときは、固定ページでブログ風のテンプレートをトップに表示させます。

[固定ページ]-[新規追加]で、固定ページのタイトルを適当に("blog"とか)入れて、パーマリンクはトップページにします(http://developer.cybozu.co.jp/akky/ とか)。

あとは、[ページ属性]の[テンプレート]を"Blog (full post)"に。

次に[設定]-[表示設定]-[フロントページの表示]で、[固定ページ]のフロントページに、先ほど作成した固定ページを選択します。

これで、WordPressブログのトップページがブログ形式になります。

デフォルトのロゴは要らないので、[外観]-[ヘッダ]からロゴ画像を削除します。ブログのロゴ画像がある人は自分のロゴに差し替えればいいでしょう。

あとは、旧ブログのサイドバーに表示していたブログパーツ等を、[ウィジェット]の管理ページでサイドバーとかフッタとかに追加していき、過去記事へのリンクやRSSもウィジェットとして表示させれば、デザインは多少変わったけれど情報量としては移行前のブログとあまり変わらない感じになりました。

デザインもレスポンシブになっているようで、ブラウザの横幅を小さくしてもそれなりに読めるように表示されます。

デザインにこだわりはないので、このままでもいいのですが、ヘッダの背景色だけはいつもの色にしておこうかと、[外観]-[テーマ設定]-[カスタムCSS]で、Responsive Themeのデフォルトのスタイルを上書きしました。ちょっとしたデザインのカスタマイズは、Themeファイル中のcssをいじらずにこちらで上書きした方が、元のThemeファイルが更新されても無くならないのでいいかなと思います。(Responsive Themeはけっこう頻繁にアップデートされるようです)