Blog

【WordPress】テーマの編集でHTMLとCSSを編集する方法

 

テーマの編集で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コードを書き換えます。(しっかり書き換えた部分はメモに残しておきましょう)そうしたら「ファイルを更新」をクリックします。

 


 

手順⑤ 変更されたか確認する

変更がされたか確認しに行きましょう。サイトトップに行き、「更新」を押します。サイトが変更されていれば書き換え完了です。

 

 

※書き換えが更新されない時の対処法

この時に変化がなくて「あれ?」ということが良くあります。その時の解決方法をご紹介します。

  1. 新しいタブで【Command】+【Y】を打って、ブラウザの「履歴」を表示
  2. 「閲覧履歴データを消去する」を選択
  3. 「キャッシュされた画像とファイル」だけにチェックを入れて、「消去」を選択
  4. サイトトップに戻り、「更新」をクリック

CSS書き換え前のデータがキャッシュ(通信回数を減らすために画像などのデータを保存しておく機能)に残ったままになっていて、新しく書き換えたCSSが反映されない現象が起きているので、キャッシュを一旦消去して再度CSSを読み込ませるようにしているということです。

 

基本的にはHTML・CSSの基本的な扱いがわかっている人のみが操作をしましょう!

1週間で不労所得を獲得する


-Blog
-,

© 2023 IBカレッジ