navigationBasicWordPressでは、テーマを適用することによって、簡単に様々なデザインのブログを作り出すことができます。前回の記事までで、ページを追加したり、サイドバーのウィジットを組み替えたりして、必要な機能をそろえるところまで見てきました。ブログを作成するだけならここまでで十分ですが、人気のあるテーマはほかのWebサイトも使っていてかぶってしまったり、あるいはもっと自分好みに修正したいという需要もあったりすると思います。そこで、今回はWordPressのテーマカスタマイザー機能を利用して、テーマのカスタマイズに挑戦してみます。WordPressのテーマを自分好みにする方法のまとめ本題に入る前に、WordPressのテーマをカスタマイズする方法について整理しておきます。方法は、大きく分けて次の4種類あります。テーマカスタマイザーを利用してカスタマイズする子テーマを作成して、既存のテーマをカスタマイズするテーマそのものを改変して、別のテーマとして利用するテーマ自体を自作する基本的に、上から下に行くにつれて難易度が上がっていきます。3.4から追加された機能で、その名のとおりテーマを簡単にカスタマイズできる機能です。後で詳しく説明しますが、あまりWebについて知識がなくても、ある程度までテーマを調整することができます。テーマがカスタマイザーに対応しているかどうか、あるいはどこまでカスタマイズできるかは、そのテーマの対応範囲次第ということになります。子テーマによるカスタマイズテーマにはバージョンアップがあります。従って、テーマそのものを改変したとしても、バージョンアップしてしまうと改変した部分はすべて消えてしまいます。これを防ぐための仕組みが子テーマで、親となるテーマは修正せずに、その子供となるテーマで親テーマを部分的に修正する(上書きをする)ことができます。子テーマについては、別の記事で改めて紹介します。テーマを改変するカスタマイズ上記の通り、テーマがバージョンアップすると、自分で修正した部分は消えてしまいます。これを避けるために、あるテーマを利用して別のテーマを新たに作り出すのがこの方法です。別のテーマを作り出すのでバージョンアップされることはなくなりますが、反面それ以降の管理はすべて自分自身で行う必要があります。子テーマによるカスタマイズが部分的で小規模なカスタマイズなのに対し、テーマを改変して新たなテーマを作るこの方法は、ある程度広い範囲を改変するか、または大きく発展させる場合に使います。ちなみに、本ブログではこの方法については語りません。テーマ自体を自作するテーマ自体を自作できれば、すべて完全に自分の思い通りになります。一から作成する分、難易度は高く、労力もかかりますが、やってできないことはありません。子テーマによるカスタマイズも、「どこを」「どのように」修正すれば自分の求めている結果になるのかを試行錯誤する時間がかかるので、範囲が広がると難易度も上がり、時間もかかってしまいます。本ブログでは、テーマを自作するところまで解説しますので、興味のある方はぜひ読み進めてください。テーマカスタマイザーをみてみようそれでは、今回の本題「テーマカスタマイザー」を見ていきましょう。Seventeen”というテーマを適用した状態で話を進めます。テーマカスタマイザーを開くアドミンバーのカスタマイズボタンWebサイトにいる場合は、ログインしている間、上に常に表示されているアドミンバーの[カスタマイズ]ボタンを押すとテーマカスタマイザーに移動します。管理画面のカスタマイズボタン管理画面からは、[テーマ]から[カスタマイズ]を選びます。テーマカスタマイザー1にカスタマイズできる項目が並んでいます。ここのリストから選んでもよいですし、右に表示されている鉛筆アイコンをクリックしても大丈夫です。2は、タブレットやモバイル端末でどのように見えるかを切り替えるためのボタンです。カスタマイズしたあとの確認として利用してください。実際にカスタマイズしてみようそれでは、試しに少しカスタマイズしてみましょう。1の中から、[サイト基本情報]を選んでみます。サイト基本情報ロゴの登録や、タイトルの変更などが行えるようですね。実際にロゴを登録し、キャッチフレーズを変更してみました。リアルタイムでプレビューされるのもうれしい機能です。今度は、画像を変えてみましょう。左上にあるバックボタンで戻ってから[ヘッダーメディア]を選んでみてください。Seventeenでは動画をヘッダーの背景として使えるようですが、ここでは単に画像を変更してみました。トップ画像を変更するだけで、だいぶ個性が出せますね!また「ウィジット」や「メニュー」という項目がある通り、前回の記事でお話ししたウィジットや、その前の記事のメニューについても、テーマカスタマイザーで変更可能です。どちらで修正しても構いません。カスタマイズが終わったら、一番上にある[保存して公開]ボタンを押して、設定を反映してください。追加CSSによるカスタマイズ追加CSSとは追加CSS「追加CSS」とは、テーマの持つCSSはそのままに、新たに独自のCSSを追記できる仕組みです。「追加CSS」は次のような性質を持ちます。テーマをバージョンアップしても残り続けます追加CSSはテーマごとに独立して保存されます元のテーマを修正することなくCSSを追記できる仕組みが「追加CSS」です。CSS”を直訳しているので、少し意味が分かりにくいですね。実際に追加CSSを記述してみようテーマカスタマイザーにはメニューの背景色だけを変える機能がありませんでした。そこで、CSSを用いて背景色と文字色を変えることを試みます。Chromeデベロッパーツールまず、Chromeデベロッパーツール(Firefoxにも同様の機能があります)を用いて、エレメントを突き止めます。調査したいものの付近で右クリックします。[検証]を選びますエレメントが表示されるので、付近のタグを適当にマウスオーバーします青いハイライト(上の図)を頼りに、目的となるエレメント(タグ)を突き止めます上の図のように、メニューには”navigation-top”というクラスがついていることがわかりました。このクラスに、背景を黒くするスタイルを付与してみます。black;}というCSSを、追加CSSに貼り付けてみてください。......が、文字も黒なので見えなくなってしまいますね。文字色は白にしましょう。今度はエレメントを突き止めるだけでなく、テーマのCSSでスタイルがどのように定義されているかに注意しながら進めます。文字に適用されているスタイルディベロッパーツールでスタイルも同時に確認できます。aの#222が文字色のようですね。本題から話がそれるのでこれ以上は説明しませんが、このような操作を繰り返すことで、見た目を変更していきます。white;}文字の色を調整した結果が次の図です。文字色を修正CSSによるStyleは、見た目に関するすべてを支配しているので、本気になればどこまででも調整できてしまいます。この「追加CSS」のエリアは小さいため、コード量が増えてくると使いにくくなりますし、メンテナンス性も良くありません。「追加」CSSによるカスタマイズは、小規模なCSSの追加にとどめておくのが良いといえます。今回のカスタマイズ結果です。Seventeenだった感じはなくなりましたね。このように、ちょっと手を入れるだけで十分オリジナリティを発揮できます!おわりに今回は、サクッとテーマをカスタマイズできるテーマカスタマイザーについてみてきました。次のチェックリストでおさらいしておきましょう。テーマをカスタマイズする方法は、大きく分けて4種類あるテーマカスタマイザーを利用して、テーマを部分的にカスタマイズできる追加CSSを用いて、スタイルを追記することができるここ数回の記事を通して、テーマを自分の求めるページ構成・機能にし、見た目をカスタマイズする、というところまで見てきました。最後の追加CSS以外は、管理画面上でクリックするだけの簡単操作でしたが、これ以降はHTML/CSSの知識が多少なりとも必要になってきます。サンプルを出しながら解説しますが、簡単にでも事前にHTML/CSSに触れておいていただけると、今後の内容がより深く理解できると思います。次回は「子テーマ」について語っていきたいと思います!つづけて読むこの記事には続きがあります。