テーマの編集でHTML・CSSを編集
テーマの編集では、適用しているテーマのHTML・CSS・PHPのコードを直接書き換えることができます。
※この操作はHTML・CSSの基本を理解している人が自己責任でやるようにしてください!
手順① サイトトップから変えたい領域で右クリック
サイトトップを確認して、変えたい領域を決定します。下の図では、各記事のフッターエリアの背景色を変更します。
変えたい領域の上で右クリックし、「検証」を選択します。
手順② 変えたい領域のid名・class名を確認
「検証」を選択すると、HTML・CSSのコードが表示されます。変えたい領域のHTMLを確認します。
下の図の場合、変えたい領域は「entry-footer」というclass名が当てられていました。
そして、CSSを確認すると、「entry-footer」の背景色(background-color)には#f7f7f7(薄い灰色)が当てられていることがわかりました。
手順③ 「テーマの編集」でid名・class名を検索する
「テーマの編集」に戻って、Macであれば【command】+【F】、Windowsであれば【Ctrl】+【F】でそのウィンドウ中の文字に、先ほどのid名・class名がどこにあるか検索をします。
検索をかけると自動的に検索した単語に色がつきます。
手順④ CSSを書き換え「ファイルを更新」をクリック
該当するid名・class名が見つかったら、cssコードを書き換えます。(しっかり書き換えた部分はメモに残しておきましょう)そうしたら「ファイルを更新」をクリックします。
手順⑤ 変更されたか確認する
変更がされたか確認しに行きましょう。サイトトップに行き、「更新」を押します。サイトが変更されていれば書き換え完了です。
※書き換えが更新されない時の対処法
この時に変化がなくて「あれ?」ということが良くあります。その時の解決方法をご紹介します。
- 新しいタブで【Command】+【Y】を打って、ブラウザの「履歴」を表示
- 「閲覧履歴データを消去する」を選択
- 「キャッシュされた画像とファイル」だけにチェックを入れて、「消去」を選択
- サイトトップに戻り、「更新」をクリック
CSS書き換え前のデータがキャッシュ(通信回数を減らすために画像などのデータを保存しておく機能)に残ったままになっていて、新しく書き換えたCSSが反映されない現象が起きているので、キャッシュを一旦消去して再度CSSを読み込ませるようにしているということです。
基本的にはHTML・CSSの基本的な扱いがわかっている人のみが操作をしましょう!