こんにちは。ざらあしです。
先日、当ブログをリニューアルしたとお知らせしました（＊＾＾＊）
当ブログはWordpressを使用して構築しておりますが、そもそもWordpressとはなんぞやというお話は割愛するとして。。

ブログのデザインをカスタマイザー機能を使わないで、自分で好きなように変える方法をちょっと書いてみようと思います。

この記事の対象となる方

まずは前提として、この記事はこちらのような方に向けて書いています。

  • 割と初心者
  • WordPressでブログを書いてるけどHTMLやCSSはあまり分からない
  • コピペOKのネット記事でコードを拾ってきて何とか騙しだましデザインを変更してきた

私自身、「ネットにコードが書いてある部分のカスタマイズはコピペでどうにかなっていたけど、それ以外の部分は自力で弄れない」という状態だった過去があるので、そのような方に向けて「これからは自分自身でブログの好きな部分を自由に変更できるようになるよ」ということを知って欲しいなぁと思い、書いてみました。

WordPressのカスタマイザー機能で出来ない変更はどうするの？

テーマごとにあるカスタマイザー機能はこの画面のことです。便利なアレです。

使うテーマにも依存しますが、文字色や背景色、ヘッダーのデザイン等、色んな部分をコードが分からなくても変更出来ることがテーマカスタマイザーの素敵な点ですね。

ただ、どんなに優れたテーマであっても、自分が「あ～～！ここの色変えたい！」と思った部分の変更がカスタマイザーでは出来なかったりしますよね。

カスタマイザーで変更できないデザインの例

例えばこちらのように、記事一覧の枠線を太く&水色にし、目立たせたいとき。
変更前

↑これを、

↓こうしたい

私が使っているテーマ「Emanon Pro」のカスタマイザーには「記事一覧の枠線の色」という項目はありません。
自力で変更する必要がある訳ですね。
＞＞Wordpressテーマ「Emanon Pro」の詳細はこちら。

ネットで探せばそれっぽいコードは見つかるけど…

困ったらすぐ検索して使えそうなコードを見つけてくればいいんですが、使っているテーマが違うと上手く反映されなかったりしたことはありませんか？

その原因は、大抵が「class名（またはid名）が違っている」せいだったりします。
単純にコピペしても上手く動かないのはそのせいです。

例）グローバルナビゲーションのclass名が違うケース

ネットで見つけたコードは「Aテーマ」用だとすると、当然CSSのセレクタにはAテーマのclass名が使われています。
これを自分が使っている「Bテーマ」用に書き換える必要があります。

Aテーマのclass名は「global-nav」だけどBテーマのclass名は「gnav」。
グローバルナビの色を変えるコードをネットから拾って来て自分のテーマのstyle.cssに追記しても、あれ？色は変わらないぞ？となる事態。

地味ですが、ここを見落とすと「コピペしてるのに何でデザインが変わらないんだ～？」と無駄に悩むことになります。。。
しかも、せっかく自分が気に入ったコードを見つけたとしても、自分が使っているテーマじゃない他のテーマ用のコードだと、「使えないじゃん」となって、結局は有名でカスタマイズ記事が沢山あるテーマしか使わなくなっちゃいます。😭

有名なテーマは良いものだから有名なので、それはそれで良いんですが、出来ればもっと融通が利いた方がいいですよね。

使っているテーマのHTMLとCSSを確認してみる

要は、使っているテーマが設定しているCSSの「class名」が分かればいいんです。
（本当はこれだけじゃダメな時もありますが、追々…）
このclass名、実はめっちゃ楽勝で見つけられるんです。

結論から言う。今すぐF12キーを押してみるんだ！！

Windowsの方はF12キー。
Macの方はCommand＋Option＋Iキー。

このキーを押してみてください。
お使いのブラウザによって、出てくるものは違うかと思いますが、

IEなら画面下側に。
Chromeなら画面右側に。

何かコードがうんちゃらかんちゃら書かれた画面が出てくるかと思います。


↑こちらはChromeの場合。

この画面を出した時点で、もうこちら側の勝ちなんですよ。（何との勝負？）
class名なんかもう、モロ見えな訳です。下着も履いてない状態です。（？）

ホントにめっちゃ簡単なのです（・□・；）

お使いのブラウザは「IE」ですか？

もし、IEをお使いの方は、こちらのブラウザへの乗り換えを真剣に提案します。

Chrome（クローム）　－Google提供のめちゃスゴいブラウザ

Web制作をお仕事にされている方はChromeをぴょぴょ～～っと使いこなされています。Wordpressでブログを運営してる方で、もしまだChromeを使っていないという方は、めちゃくちゃ損してるかもですぞ。（理由は後述。）

という事で、この記事ではChromeを使ってclass名を調べる方法を説明していきます。

ChromeのデベロッパーツールでHTMLとCSSを表示する

Chromeで自分のブログを開いて、F12キーを押してみてください。（Macの場合はCommand＋Option＋Iキー）
これだけで今開いているページのHTMLとCSSを感覚的に見ることができます。

このコードは、まさに今開いているページが出力しているHTMLとそのCSSです。

よく見ると更に上下で画面が分かれています。

上段にHTML、下段にCSSが表示されています。

もちろん自分のブログだけなじゃく、他のサイトのHTMLとCSSもF12キーですべて見ることが出来ます。
「あっ、このサイトのグローバルナビのデザイン素敵だな～～」と思ったら、F12キーでデベロッパーツールを開き、CSSなどを確認してみましょう。ヒントが得られると思います。
（もちろんデザイン丸パクリはダメです！参考にするだけにしましょ）

（読み飛ばしてもOK!）
Wordpressは、PHPというHTMLとはまた違った動的な言語で構成されています。この画面に映し出されているHTMLは出力された「結果」です。PHPが「こうやって出力するんだよ～」と命令したその結果がここに出てるというだけなので、実際にアップロードするPHPファイルの中身はここに出ていません。

デザイン変更したい部分のclass名を見つける方法

HTMLとCSSのコードが見られるのは分かった。でも、ここからどうやって直したい場所のclass名を見つけるの？という話です。

では、デベロッパーツール（画面右側）の左上部分、矢印をクリック。

そのまま左画面のブログが表示されている所にカーソルを持って行ってください。
「なんか知らんけどカーソルが当たった場所が選択されたぞ」っていうのが分かると思います。

このままその部分をクリックして右側のHTML・CSSが表示されている所を見ます。
すると選択した部分のHTMLとCSSの場所に移動しています。

そしてそこには、ずっと探し求めていたclass名が映し出されています。

class名を見つける方法おさらい

class名の見つけ方

  1. デベロッパーツールの矢印をクリック
  2. 変えたい場所にカーソルを当ててクリックして選択
  3. 上段HTMLがグレーに選択されているので、その部分のclass名を確認
  4. 下段CSSも一応確認

無事、デザイン変更したい部分のclass名が分かりました😄
コピペしたいCSSのセレクタ（class名が書いてある所）を、今見つけたclass名に変えてから更新すると、ちゃんと変更内容が反映されると思います✌️

追記：もっと楽な方法があった！！

ここまで書いておいてなんですが、「F12キーを押してデベロッパーツールを起動させ、要素を検証する矢印アイコンをクリックする」という上記の流れを、なんと更に簡単にできるショートカットキーが存在するという情報を頂きました！

Windowsの方はShift＋Ctrl＋Cキー。
Macの方はShift＋Command＋Cキー。

動画で見てみてください。すごく便利なことが分かります。
（クリックorタップで始まります。）

このショートカットキーを押すと、最初に矢印アイコンをクリックする手間がひとつ省けるという訳ですね。
出来るだけマウスを触る手間を省くのは、制作の時間短縮にかなり有効です。
ぜひ、今から共に活用していきましょう！私も記事を書いてから知りました。
教えていただいたのは、超憧れのすぴかあやかさん（@spicagraph）です。ありがとうございました！（T▽T）♡😍

も～～っとカスタマイズする方法

このやり方を覚えたら、どんどん色んな部分を弄りたくなってくると思います😁
もうオールコピペに頼らなくても、カスタマイズ記事が無いからと言って有名なテーマを使わなくても大丈夫。
他の素敵なブログを見て「こういうデザインはこういうコードを書けば出来るのかぁ～」と勉強することも出来ます。

実際にどうやってカスタマイズするかの例

では、自分が使っているテーマのCSSをどんどんカスタマイズしていきましょ～～

以下、子テーマをお使いの方に向けて説明してます。
（親テーマを直接カスタマイズしている方も大丈夫です。でも出来るだけ子テーマでのカスタマイズをおすすめします。）

1. 前項の方法でChromeのデベロッパーツールを使い、カスタマイズしたい個所のclass名を確認します。

今回は記事一覧ページのデザインを変更します。
1記事ごとボックスになってますが、その枠線を太くして水色に変更します。

↓完成予想図

デベロッパーツールのおかげで、この枠線のclass名は「archive-list」だと分かりました。

2. WordPressのダッシュボード、左メニューの「外観」→「テーマの編集」をクリック。

3. 親テーマを表示させます。

最初は子テーマのstyle.cssが表示されてると思いますが、見たいのは親テーマのstyle.cssなので、親テーマを表示させます。

4. 親テーマのstyle.cssが表示されたら、Ctrl＋Fを押して検索窓を出し、class名を検索します。

検索したいclass名の「archive-list」を入力し、Enter

これで、親テーマのstyle.css内に該当するすべての「archive-list」を検索できました。該当した個所はオレンジ色、黄色でマーカー表示されています。

5. 調べたclass名がセレクタとなっている部分のコードをコピーします。

6. そのまま子テーマのstyle.cssをもう一度表示させ、コピーしたコードを貼り付けます。

7. 変えたい部分のCSSを変更します。



クイックリファレンスも参考にしてみてね！

↓とりあえず全部のCSSはこちら

.archive-list {  position: relative;  margin: 0 0 32px 0;  border: 5px solid #D6EFEB;  box-sizing: border-box;  background-color: #fff;}

↓変更した部分のみのCSSはこちら

.archive-list {  border: 5px solid #D6EFEB;}

8. 更新してブログを確認すると、デザインが変わっています👌


出来上がり～～～～～♡お疲れ様です！🙊

デベロッパーツールは必須ですぞ～～

Windowsなら、F12キーを押すだけでピョンッと出てくるデベロッパーツール。
この機能、ブログやWebサイトのデザインカスタマイズに絶対必要なツールになっちゃってます。
IEでもChromeでも、どっちにもある機能ではありますが、これからもブログやWebサイトを運営するよ～～頑張るよ～～って思っている方は、出来ればChromeを使うことをオススメします（ーωー）
なぜChromeが良いかは、また別の記事で書いてみますね！

→早速のネタバレ：Chromeには「スマホ画面の確認ができる機能」とか、「超楽な画面キャプチャ」とか「Webサイト上の色をスポイトしてカラーコードをコピペする機能」とか「Webサイト上で定規を使う機能」とかいった便利な拡張機能（アドオン）が沢山あるからです。🙊

Webサイトやブログのデザインを弄るの楽しい～～でももう少し自分で自由に変えてみたいな～～～
でもコピペじゃないと分かんないしなぁ～～と悩んでいる方は、とりあえずChromeを使ってF12キーを連打してみましょ！

では！〆サバちゃん！🐟