WordPressテーマSimplicityをカスタマイズする!見出しのCSSスタイルを変更

独自ドメインを取得して WordPress で運用を開始してから、もうすぐ1年になります。
見た目もシンプルで、使いやすそうな Simplicity をテーマに選んでいましたが、そろそろカスタマイズの勉強も兼ねて、少しづついじっていきたいと思います。

Simplicity

シンプルでカスタマイズがしやすく、SEO対策済みでありながら無料ということで人気のWordPressテーマです。

精力的に開発も進められていて、頻繁にアップデートもされています。
現在は、Simplicity2 というバージョンになっています。

Simplicity2のダウンロード

本体ファイルを直接いじるカスタマイズは危険ということで、カスタマイズ用の子テーマも配布されています。

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上に仮想サーバを立てたりすると、ブログ本体に不具合を抱くこともなく、いろいろ自由に試せるようになるので、いつかは挑戦してみたいです。



スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする