独自ドメインを取得して WordPress で運用を開始してから、もうすぐ1年になります。
見た目もシンプルで、使いやすそうな Simplicity をテーマに選んでいましたが、そろそろカスタマイズの勉強も兼ねて、少しづついじっていきたいと思います。
もくじ
Simplicity
シンプルでカスタマイズがしやすく、SEO対策済みでありながら無料ということで人気のWordPressテーマです。
精力的に開発も進められていて、頻繁にアップデートもされています。
現在は、Simplicity2 というバージョンになっています。
本体ファイルを直接いじるカスタマイズは危険ということで、カスタマイズ用の子テーマも配布されています。
まさに、致せり尽くせりですね。
Simplicity | 内部SEO施策済みのシンプルな無料Wordpressテーマ
オフィシャルページも納得の充実ぶり。
初心者からでも分かりやすく、使い方やカスタマイズ方法などを詳しくアップされています。
テーマのカスタマイズ
テーマのカスタマイズは、直接CSSファイルなどを編集することなく、もっと簡単にできる方法が用意されています。
テーマ毎に変更できる内容は違いますが、WordPress の管理画面から行うことが出来ます。
ここから、色やレイアウトを変えることが可能です。
用意されたメニューにないカスタマイズを行いたいときは、CSSの追加機能を使って記述することも可能です。
今回は、この機能を使って、”見出し”部分のカスタマイズをしていきます。
見出しのカスタマイズ
いままでの見出しは、Simplicityのデフォルトである、こちらのデザインでした。
・h1
・h2
・h3
それを、このように変更していきます。
・h1
・h2
・h3
変更箇所の特定方法
WordPress の管理画面からできるカスタマイズメニューの中に、見出し部分のデザインを変更する項目がないので、CSSを書き換える必要があります。
CSSの書き換えは、WordPress の管理画面から 外観 → CSS編集 と進んでいくと記述画面になるのですが、白紙の記述画面が表示されるだけで、いま現在の内容を見ることが出来ません。
いま現在の内容を見る方法は、サーバ上の CSS ファイルを直接見に行くか、GoogleChromeブラウザのデベロッパーツールなどを使うかです。
今回は、GoogleChromeブラウザのデベロッパーツールを使って、確認することにしました。
デベロッパーツールでは、ソースを選択すると対応したCSSなどの情報が表示されます。
ここでクラス指定や名称などを確認することができ、どのような内容が適用されているか確認することが出来ます。
もとの設定に上書きされた(優先された)内容も確認できるので、とても便利ですね。
設定内容の変更
WordPress の管理画面から行う CSS 編集は、本来の CSS ファイルに記載したある内容を直接変更するものではなく、記載された内容が優先されるようになっています。
変更するにあたって、記述した内容は、以下の通り。
フォントの大きさなどは変えないので、記述していません。
記述がないところは、元のまま変更されないということです。
変更した内容
変更した内容を簡単に紹介します。
h2
デベロッパーツールで確認すると、h2などの見出しのクラスは、「 .article h2 」という記述でした。
.article h2 { border-left: 9px solid #383838; margin: 80px -29px 20px; }
・border-left:
もともとは、「 1px solid #000 」の指定がされていました。
肥大のバーの幅を 9px と太くし、solid(直線)のまま、#000 だと真っ黒なので、少し薄くしました。
・margin:
もともとは、「 40px -29px 20px 」の指定がされていました。
見出し上部のスペースを 80px へ広げました。
h3
.article h3{ border-bottom: 2px solid #383838; }
・border-bottom:
もともとは、「 5px solid #e7e7e7 」の指定がされていました。
下線の太さを 5px と太くし、solid(直線)のまま、色を h2 と統一しました。
h4
.article h4{ border-left: 8px solid #383838; border-bottom: 1px solid #383838; padding: 8px 10px; }
・border-left:
もともとの設定はありませんでしたが、新たに追加しました。
左サイドに 8px の solid(直線)バーを配置しました。
・border-bottom:
もともとは、「 5px dashed #eee 」の指定がされていました。
下線の太さを 1px と細くし、dashed(点線)を solid(直線)へ変更、色を h2 と統一しました。
・padding:
もともとは、「 8px 0 」の指定がされていました。
新たに追加した左のバーとの間隔が狭かったので、10px のスペースを設けました。
まとめ
よくある表現ですが、シンプルな見た目で気に入っています。
今回、もとの設定内容を見るのに、デベロッパーツールを使いました。
少し手間ではありますが、使い慣れてくるとクリックだけで確認できるので、結構便利です。
設定ファイル全体を見ながら確認したい場合は、サーバからファイルを開くしかありませんが、手間を考えるとどちらも同じようなものだと思います。
がっつり開発環境を構築して、自PC上に仮想サーバを立てたりすると、ブログ本体に不具合を抱くこともなく、いろいろ自由に試せるようになるので、いつかは挑戦してみたいです。