WordPressサイトのデザインをもうちょっと変えたい、という方は多いでしょうか。例えば文字のサイズや色、罫線やちょっとした飾りなど、少しでも自分の思い通りに変更できるとサイトへの愛着も増してくるものです。今回はそんなちょっとしたデザイン調整の具体的な方法についてご紹介します。
この記事を書くきっかけとなったのは、『あるクマっぽい人が書くブログ』を書かれているギター弾き＆ブロガー安宅さん（ @yasumihirotaka ）からのリクエスト。〈 Simplicity 〉という無料のWordPressテーマを利用されており、トップのデザインを少し変えたい、とのことでした。
Contents
現状と調整内容の確認
変更前のサイトデザインは下図のようなものでした。
基本的に既存のテーマデザインのままの状態でした
お話する中で、ブログのデザインについて「トップの見た目がカードデザイン風になるといいんですけどねー」というお話が出ました。どんなイメージか？ をヒアリングしていると、要件はちょっとしたもので、以下のような内容でした。
たしかに既存のデザインは、記事ブロック同士の境界がややあいまいな印象かもしれません。ひとことで言うなら、メリハリをもう少しつけたい、というのが要点でしょうか。
具体的な作業手順
では、具体的にどのような手順で変えていくかを紹介します。
実際には HTML や CSS の知識が必要になってきますが、一連の流れをつかんでいただく意味でご参考になれば幸いです。すぐには思い通りにできなくとも、調べながらやればご自身の手でできるようになるかもしれません。その最初のきっかけになれば…という思いで続きを書きます。
まずは下図のように、記事一覧の全体を囲っているグレーの罫線を消すことから始めてみましょう。
色が薄くてわかりにくいかもしれませんが、薄いグレーの罫線部分です。
Google Chromeの「デベロッパー ツール」でシミュレーションする
Google Chrome （以下 Chrome ）というブラウザを使い、まずは調整のイメージをシミュレーションしてみます。Chrome をお持ちでない方はインストールします。
Chrome を立ち上げ、[表示] → [開発/管理] → [デベロッパー ツール] を選択します。
Safari など、他のブラウザでも類似のことはできますが、今回は Chrome を例に進めます。
「デベロッパー ツール」が表示できたら、下図①のアイコン（Webページ上の要素を選択するためのツール）をクリックし、②のように、変更したい部分をクリックします。
Webページ上で変更したい要素をクリックすると、③の通り選択部分に適用されている CSS（スタイルシート）がわかります。具体的には「 border: 1px solid #ddd; 」という部分ですね。ちょこっとだけ解説すると以下の通り。
- border:（文字通り、線を引く指定です。「プロパティ」と呼ばれます。）
- 1px（線の太さです。「px」は「ピクセル」のことで単位を指します。）
- solid（線の形状です。solid は普通の直線で、他に点線などもあります。）
- #ddd（色の指定です。「red」や「pink」などと指定することもできます。）
結論から言うと、該当部分を「 border: none; 」と書き換えれば、罫線が消えます。
このあたりから HTML や CSS の知識が必要になりますが、ご興味のある方は Chrome のデベロッパーツールで下図のようにいろいろいじってみましょう。CSS の記述が、サイトにどのように反映されているかが見えてきます。
数値を変更や無効化、追記を試してみましょう。
意味がわからなくても、数値を変えてみたり、チェックボックスを入れたり外したり（有効化／無効化）、いろいろいじってみましょう。追記することもできますが、ここは CSS の知識が必要です。
いじってみると、下図のようにリアルタイムでページのデザインが変わります。CSS がページ上でどのような意味をもっているかがつかめると思います。ご自身のサイトでためしてみましょう。
これはブラウザ上で一時的に変更するだけの機能ですので、実際のサイトが即座に変更されるわけではありません。ご安心を。
以上のように Chrome の「デベロッパーツール」を使うことで、デザインの微調整をシミュレーションすることができます。これでこんな感じかな？ という CSS の設定が定まったら、実際のサイトに反映します。
実際のサイトへの反映手順
サイトへの反映前に、必ずバックアップ（変更前のデータ）をとっておきましょう。予期せぬことが起きた時、元に戻すことができます。
反映するには、WordPress の管理画面にログインし、[外観] → [テーマの編集] を選択します。
次に、①「子テーマ」の ②「スタイルシート（ style.css ）」が選択されていることを確認し、③ CSS を追記します。下図では、罫線を消す記述を追加しています。
「子テーマ」についての詳細は割愛しますが、WordPress のカスタマイズをする上では設定しておいた方がよいものです。要は、WordPress のテーマの作者が、テーマのアップデートをすると、自分で書いたカスタマイズの記述がリセットされてしまうことがあります。そのアップデート時のリセットを避けるために用意するのが「子テーマ」です。
ここまでが、デザインの微調整の一連の流れでした。
調整後のイメージ
実際にはさらに多くの CSS を追記し、最終的には以下のように調整しました。
ぱっと見ではよくわからないかもしれませんね。笑
ビフォー・アフターは以下の通り。
ビフォー
Before：記事同士の境界がちょっと曖昧かも？
アフター
After：記事を罫線で囲み、若干シャドウを追加。日付とカテゴリのフォントサイズや余白も微調整。
場合によっては細かすぎて伝わらないシリーズになってしまうかもしれませんが（笑）、人間の感覚というものは自覚しない範疇で細かい差異を感じ取ります。何かいいものを目にしたとき、「何かいいな〜」と感じるのは、つまりそういうこと。どこがどういいのか？ を分析できると、自分のサイトに応用できます。
まとめ
いろいろなサイトやブログを見ていて、「あ、このサイトいいな」と思ったら、どこがいいのか？ を少し掘り下げてみましょう。例えば、文章が読みやすいなと感じたら、今回ご紹介した Chrome のデベロッパーツールを使って、文章の部分にどんな CSS が書かれているかを検証してみます。
いいなと思う CSS がわかったら、ご自身のサイトに当てはめてみましょう。そのまま「いいね！」となるかもしれませんし、「自分のサイトには合わないな〜」、となるかもしれません。いろいろ試してみるのがおすすめです。
CSS でわからない単語が出てきたら、「CSS わからない単語」などで調べてみてください（例「CSS padding」）。フォントのサイズを大きくしたい場合は、「CSS フォントサイズ」などと調べてみるとヒントが出てきます。
最終的にサイトに反映する際は、くれぐれもバックアップをとってから反映するようにしてください。
ここがビギナーの方には難しいポイントなのですが、CSS は広範囲に影響する可能性が高いものです。トップページだけ変えたかったのに、別のページも変わってる！ なんてことは普通に起こります。スマホで見たらおかしい！ も起こる可能性大です。
体当たりで学習するなら、テスト用のサイトをつくっていじり倒すのがいいかもしれませんね。直近で何とかしたい調整がある場合は、プロの方に相談するのがよいでしょう（間接的な営業行為）。
編集後記「 “ 自分のサイト感 ” って大事」
本件は私が思いつきで開いた〈個人サイトオーナー向けのWeb相談会（仮称）〉に安宅さんが参加してくださったのがきっかけでした。安宅さんがブログを始めた経緯から現状、今後のことなどをあれこれうかがう中で、トップのデザインを少し調整したい、というお話が出たのでした。
印象的だったのは、“ 自分のサイト感 ” があると、サイトを続けるモチベーションにつながるということ。今回はほんの少しの調整でしたが、よろこんでいただけて私もうれしく思いました。ごていねい光速でブログを書いていただいていました。
ブログのお悩み解決！ふもぱん先生のWeb版ライザップ（仮）を受けたらブログがさらに楽しくなった件。｜あるクマっぽい人が書くブログ
サイトの改善を通じて、人のモチベーションに貢献できた点が、私にとっての深い意味でした。
自分メディアのイメチェンは計画的に。
（このブログ記事作成工数は約4時間でした）