テンプレートの要素(CSS)を探し変更する方法

デフォルトのテーマや子テーマで、サイトテーマのデザイン(CSSファイル)を変更するとき、「どのタグ」で「どのセレクタ」が設定されているのかを探すとき、テーマ作成また開発環境などないなど・・やり方がわかないという方もいると思いますのでその方法。

【変更したいCSSを探して特定する】

1-1.ブラウザでページのソースを表示してHTMLタグとCSSを探す・確認する場合。

ソースのブラウザでの確認方法は、以下の方法で確認できます。

・IEの場合、「表示」⇒「ソース」
・FireFoxの場合、「ツール」⇒「Web開発」⇒「ページのソース」

ソースが表示されるので、ソース画面で探しているタグを検索し設定されているCSSのセレクタ名を確認します。

1-2.テーマのテンプレートでCSSの設定している箇所を探す・確認する場合。

テーマのテンプレートを直接エディタで開き、HTMLタグが設定されているCSSのセレクタ名を(検索し)確認します。

※また、テーマ編集のプラグインを利用していて検索機能がある場合は、それを利用します。

【デザイン(CSS)を変更する】

2-1.デザイン(CSS)の編集をWordPress以外のエディタを使用する場合。

エディタを使用して子テーマのCSSファイル(style.css)を開き編集します。
サーバーへアップロードをします。

※エディタには、Windowsの場合、ワードパッド以外のエディタでUnicode(UTF-8)が使用できるものを使います。

【エディタ】
Terapad
サクラエディタ
上記以外にも有用なエディタはあります。

2-2.デザイン(CSS)の編集をWordPressのエディタを使用する場合。

ダッシュボードより、「外観」⇒「テーマ編集」よりファイル内容を変更します。
(※参考として。WordPressデフォルトのテーマ編集エディタが使いづらいとき、「WordPressテーマ編集(エディタ)プラグインのリスト」記事を参考にして下さい。)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です