子テーマを利用してサイトデザインをカスタマイズする方法

カテゴリー別今日の人気ランキング
スポンサーリンク

子テーマによるテーマの編集方法

WoedPressのテーマは、

  • 配置するコンテンツを設定したり、テーマの機能を設定するためのphpファイル
  • サイトのデザインを定義するスタイルシートcssファイル

で構成されています。
このファイルを管理メニューの「テーマ編集」で編集することで、テーマのカスタマイズが可能です。その手順は、以下のようになります。

  • 変更する部位の「class」を確認します。
  • 親テーマで該当するclassを検索し、classを指定しているCSSをコピーします。
  • コピーしたCSSを子テーマに追記し、変更箇所を編集して保存します。

タイトルの文字サイズを変更する

変更する部位の「class」を確認します

  • IEの場合:ページ右クリックでソースを表示しタイトル文字「WordPress 初心者講座」を検索します。
    タイトル文字検索(IE)
  • Chromeの場合:タイトル文字「WordPress 初心者講座」を右クリックし「要素を検証」をクリックします。
    タイトル文字検索(Chrome)
  • Safariの場合:タイトル文字「WordPress 初心者講座」を右クリックし「要素の詳細を表示」をクリックします。
    タイトル文字検索(Safari)

タイトル「WordPress 初心者講座」が「site-title」というclassであることがわかります。

親テーマで該当するclassを検索し、classを指定しているCSSをコピー

  1. 「外観」→「テーマの編集」をクリックし「編集するテーマを選択」で親テーマに切換えます。
  2. ブラウザの検索機能で、該当するclass「site-title」を検索します。
  3. 「site-title」の文字サイズを指定してるコードをコピーします。親テーマの該当class

コピーしたCSSを子テーマに追記し、変更箇所を編集して保存

  1. 「編集するテーマを選択」で子テーマに切換えます。
  2. コピーしたコードを子テーマのstyle.cssに貼り付けます。
  3. 文字サイズを大きくするので「font-size:30px」を「font-size:40px」に変更します。
    CSSを子テーマに追記
  4. 「ファイルを更新」をクリックし変更を保存します。
  5. ページを表示して文字が大きくなっているのを確認します。
  6. カスタマイズ後

ブログの見出しデザインとCSSカスタマイズ

デフォルトの見出しデザイン

デフォルトの見出しデザイン

カスタマイズ後の見出しデザイン

カスタマイズ後の見出しデザイン

子テーマのstyle.cssに追記した内容

文字サイズの変更と同じ方法で見出し項目のclass(.article h2など)を検索し、classを指定しているCSSをコピーします。次に、コピーしたCSSを子テーマに追記し、変更箇所を編集して保存します。

コメント欄に「デフォルト」記述の有るものはデフォルトから変更したスタイル定義、無いものは新規追加したものです。class要素の中に変更の必要のないスタイル定義があれば削除してもかまいません。削除した場合は親テーマの設定が継承されます。

テンプレートファイル(phpファイル)のカスタマイズはこちらを参照してください。

header-insert.phpのサンプル

子テーマを利用してXREAのバナー広告を簡単に設置する方法
XREA無料サーバーの自動挿入広告の問題 XREAの無料ウェブサービスの自動挿入広告は、HTML の <BODY> タグの直後に自動挿入さ...

footer-insert.phpのサンプル

子テーマを利用してフッターに最新の新着・更新記事を表示する
過去記事を追加・変更しても・・ WordPressの投稿記事は「投稿日時」順に記事が表示されますが、過去に書いた記事の内容を補強したり、新...

function.phpのサンプル

子テーマを利用してHTMLエディターにタグや定型文のボタンを追加する方法
クイックタグとは WordPressで原稿を作成する時に、HTMLエディターに記事内でよく使う見出しなどのタグをボタン(クイックタグ)とし...

Simplicity 関連 おススメ記事

スポンサーリンク
wp_レクタングル (大)
wp_レクタングル (大)
☆最後までお読みいただきましてありがとうございます。
☆この記事がお役に立ちましたらシェア・フォローしていただけると嬉しいです!

シェアする

フォローする