WordPressでブログを作ってみたけど、なんだか見た目が物足りない…。
と思ったことはありませんか？
実はWordPressのテーマはコーディングの知識がなくても、ある程度はカスタマイズできるんです！
そこで今回は、わたしの使っているCocoonというテーマの「目次」のデザインを編集する方法を解説します（この下の方に表示されている目次のように、鉛筆マークを付ける方法です）。
わたしもつい2日前にカスタマイズを始めたばかりなので、初心者でも簡単にできる内容になっています。この記事を見て、自分のブログのデザインを少しずつオシャレにしてみましょう！
まずは子テーマをインストールしよう
まずは以下のように、WordPressの「外観」から「テーマ」を選択します。
テーマの画面の「新規追加」から、Cocoonの子テーマである「Cocoon Child」を検索し、インストールしましょう！
※インストール後は、「有効化ボタン」を押すことを忘れないでください
ではなぜ、子テーマをインストールする必要があるのでしょうか。
テーマには、親テーマと子テーマがあります。
どちらのCSSファイルも編集できるのですが、親テーマのCSSファイルを編集しても、親テーマの更新時にせっかく編集した内容が消えてしまいます…。
しかし子テーマのCSSファイルの編集内容は、親テーマの更新をしても消えることはありません。
そのため、CSSファイルを編集するときは必ず子テーマをインストールしましょう。
子テーマのCSSファイルを編集する
それではさっそく、CSSファイルを編集してみましょう！
ファイルをいきなりいじるのが怖い方のために、間違えても消せばすぐに復元できる編集方法を解説します。
コードを書いてみる
まず、「外観」の「カスタマイズ」を選択します。
次に、左のメニューから「追加CSS」を選択します。
次に、以下のようなコードを書きます。
以下のコードをコピーして、「追加CSS」に貼り付けてください。
.toc-list > li a::before {
content : "\f303";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: 7px;
}「.toc-list」というのが「目次」で、「li a」が目次の見出しリストのリンクという意味です。
「before」は見出しリンクの前のCSSを指定する（今回は鉛筆マークの部分）のですが、今回は意味がわからなくても大丈夫なので気にしないでいましょう。
すると以下のように、鉛筆のアイコンが表示されます。
コピペするだけで、アイコンの表示ができました！
好きなアイコンを指定する
今回は鉛筆のアイコンを表示させましたが、このほかにもさまざまなアイコンを表示できます。
Font Awesomeというサイトからアイコンを検索し、コードをコピーして使用してみましょう！
まず、Font Awesomeのサイトの左上にある検索窓に、好きなアイコン名を英語で入力します。
鉛筆のアイコンの場合、「pen」と入力すればOKでした！
すると該当するアイコンが表示されるので、お好みのアイコンを選択します。
※アイコンの右上にproと表示されるものは、有料なのでご注意ください！
画面右上のアイコンのコードをクリックし、コピーする。
先程のCSSの「content」部分に、コピーしたアイコンのコードを貼り付けます。
コードの先頭には\マークを忘れないように入力しましょう！
最後に、画面上の「公開ボタン」を押せば完了です！
ブログの記事にアクセスし、目次にアイコンが付いているか確認しましょう。
もしもアイコンがうまく表示できなかったら…
アイコンが表示されない理由は、私の知っている限りでは二つあります。
ここでは、アイコンが表示されなかったときの対処法を解説します。
Font Awesomeのバージョンが古い
Cocoonには、Font Awesomeのバージョンを指定できる場所があります。
指定しているバージョンが古い場合は、アイコンが表示できずに四角いマークが表示されてしまうので、バージョンを確認してみましょう。
※Cocoonの親テーマを最新のバージョンに更新しておきましょう。親テーマが古いバージョンの場合、Font Awesomeを設定する場所が表示されないことがあります。
まず、「Cocoon設定」の「全体」タブを選択します。
画面を下にスクロールしていき、「サイトアイコンフォント」で「Font Awesome 5」を選択します。
すると、新しいバージョンである「Font Awesome5」のアイコンを表示できるようになります。
ブラウザにキャッシュがある
キャッシュとは、ユーザーが一度閲覧したサイトを次回以降の閲覧時に速く表示させるために、ユーザーのブラウザに保存させたサイトの情報のことです。
ブラウザのキャッシュが削除されないままでいると、CSSの情報も前回の閲覧時の状態のまま残っているので、CSSを編集しても画面に反映されないことがあります。
ここではブラウザのキャッシュを削除する方法をご紹介します。
まずGoogleChromeの場合、画面右上の「…」マークから「設定」を選択し、設定画面を表示します。
次に、「閲覧履歴データの削除」を選択します。
「キャッシュされた画像とファイル」にチェックを入れ、「データを削除」ボタンを押します。
最後にブログの画面をリロードすれば、CSSの編集内容が画面に反映されます。
CSSがわからなくてもコピペである程度はカスタマイズできる
CSSがわからないからといって、ブログをカスタマイズしないのはもったいないかもしれません。
コピペでCSSを編集すれば、ある程度はカスタマイズが可能なので、チャレンジしてみましょう！
CSSは初心者からでも独学で学べる言語です。
書き方を理解することでカスタマイズの幅も広がりますので、カスタマイズしてから勉強してみるのもよいですね。
