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



Amazonでお得に買う方法

ネット通販の代表格Amazon。Amazonプライム会員に登録すると送料無料の他にも様々な特典がついてきます。

そんなAmazonでの買い物を、さらにお得にするなら、Amazonギフト券への購入チャージをおすすめします。

 

現金でチャージするたびに、チャージ額 × 最大2.5%分のポイントがもらえます。

Amazonプライム会員の方なら是非活用して、更にお得に利用しましょう。

CHARGE NOW

コンビニ・ATM・ネットバンクが対象

1円単位で購入可能

スポンサーリンク

フォローする