ブログのテーマをSpaciousからColorMagに変更しました。作者は共に ThemeGrillです。

ダウンロードから有効化まで

Spaciousもスッキリとしてとても使いやすいテーマでしたが、ちょっと気分転換したいと思い、探していたら良さそうなものがあったので早速ダウンロード。

1. ダウンロード
2. ダッシュボード→外観→新規追加→「colormag.zip」を選択
3. 「今すぐインストール」→「有効化」

カスタマイズ前の準備

1.Color Pickerを導入

導入の手順はこちらに書かれていますので参照してください。ColorMagの特徴は、カテゴリーごとの記事が表示できることとカテゴリーごとに色分けできることにあります。 通常、サイトの色を決める時は背景の画像に合わせて基本のカラーを決めていくと思いますが、そんな時に便利なのがChromeの拡張機能「Color Picker」です。

これをインストールしておけば、ColorMagに限らず他のテーマに変える時でも便利に使えます。

2.WPプラグイン「WP Theme Test」を導入

ブログのデザインを変える時、それが完成するまでは一般のユーザーには別のテーマを表示しておきたいと思うはずです。「WP Theme Test」は、ログインしたユーザーにだけこれから変更したいと思うテーマの表示ができますが、それ以外の訪問者には別のテーマが適用されるというスグレモノ。これは楽屋裏がとっちらかっている間は人様にお見せしたくないという切なるユーザーの願いを叶えてくれる便利なプラグインです。

ただし管理者が裏側でウィジェットを変更すれば一般の訪問者に見えているウィジェットも連動して変更されてしまうので、大幅なデザインの変更には不向きです。

3.InstantWP

InstantWPはローカルの環境でWordpressを構築できるフリーソフトです。テーマの編集はもちろんのこと、ブログの下書きなどにも使えるのでWPユーザーにはあればなにかと重宝するはずです。

インストール後、Wordpress AdminをクリックするとWordpressの管理画面が表示されます。ユーザーネーム❪admin❫とパスワード❪password❫は最初から設定されていますので、Languageの欄で「日本語（ja）」を選択すればあとはそのまま使えます。 上記でご紹介したWPプラグイン「WP Theme Test」との使い分けですが、ゼロからカスタマイズする場合はInstantWPを。それである程度デザインが仕上がり、仕上げ段階になったら最後の確認のために「WP Theme Test」に切り替えて最終チェックをしています。

4.WPプラグイン「Easy Google Fonts」を導入

ColorMagは「カスタマイズ画面・Typography」からGoogleフォントが選べますが、このプラグインを導入しておかなければTypographyは表示されません。「Easy Google Fonts」をダウンロードして有効化するだけなので、デザインの設定に入る前に用意しておくことをお勧めましす。

5.子テーマの作成

一生懸命カスタマイズしても、テーマのバージョンアップでCSSが初期化され、また一からテーマの編集をする手間を省くために子テーマを作ります。 「colormag-child」という空のフォルダを作成し、FTPソフトで「wp-content」→「themes」フォルダへと進み、「colormag」と同じ断層にさきほど作成したフォルダをアップロードします。 次にテキストエディタで「style.css」と名付けたファイルを作成し、下記のように記入して上書き保存します。

★補足:「@import url」と記述したことで親テーマのスタイルをそのまま引き継ぐことになります。上記のコード以降は、変更を加えた箇所だけを記述をすればOK。これをしておけば親テーマの更新があっても影響を受けません。 同じ要領で「functions.php」も作成します。下記のコードを記述して上書き保存、これで子テーマは完成です。

そして管理画面「外観」から「テーマ」を選択し、子テーマを有効化します。

6.WPプラグイン「Regenerate Thumbnails」を導入

このテーマの推奨画像サイズは公式サイトのドキュメント・推奨画像サイズ28に書かれているとおり「800×445」です。このサイズでアップロードした画像を、各パーツごとに指定されたサイズのサムネイルにして収まる設計になっています。

トップページのデザインの構成を見る限り、画像はこのサイズを守ればきれいに収まりますが、今まで他のテーマを使用していた私にとって膨大な数の画像サイズを変更するのは大変な作業です。 そんな時のお助けになるのがすでにアップロードされた画像を一括して希望するサイズに変換してくれるプラグイン「Regenerate Thumbnails」です。

ColorMagのフォーラムでも画像サイズに関する質問がとても多く、その解決策としてこのプラグインの使用を推奨しています。まぁ逆に言えば、この画像サイズ限定という作りになっていることが唯一の難点と言えますが、それ以外はとても完成度の高いテーマです。 ここまでがカスタマイズ前の準備です。次はいよいよ細かい設定に入ります。