テーマSaitamaのH2、H3タグをカスタマイズしたSaitama childを作りました

私が今おすすめしているテーマの3つのうちの1つがSaitamaというテーマです。サイドブロックが上まであることや、トップページのコンテンツの並び方が見やすいなどが特徴的な良いテーマです。
八王子WordPressもくもく会でもこのテーマを使っている方が多いです。今回はよくカスタマイズするところについて子テーマを作ってみましたのでそれについて書きます。

テーマsaitamaについて

テーマSaitamaについて、以前もブログに書かせていただきました。

WordPress界で実績が多数ある会社 コミュニティコム さんがWordPressの公式テーマを登録しました。その名も Saitama...

WordPressに関する著作コワーキングスペース7Fの運営でも有名な星野さんの会社が作られたテーマです。

デザインもスッキリしていて、自分的にはサイドバーが上まであるというデザインが気に入っています。

WordPressをインストールしたり、初期設定をするときに立ち会うことが多いです。インストールが終わって、本格的にコンテンツを入れてい...

こちらにも書かせていただいているように今現在おすすめする3つのテーマのうちの1つとなっています。

Saitamaのカスタマイズで良く行うことを子テーマにしてみました

Saitamaを自分で使ったりするときに行ったり、八王子WordPressもくもく会で良く質問されるものにH2タグのカスタマイズがあります。

デフォルトのテーマのままですと、

このような感じの見出しになっています。文字は大きいのですが、ちょっとわかりにくいかなーと思う人もいるかもしれません。

そこで子テーマを作って、

こんな感じになるようにしてみました。線をつけることで見やすくなったような気がします。

H2,H3のカスタマイズ

H2だけでなくH3もカスタマイズしてみました。

Saitamaでの見え方は

このような感じになります。カスタマイズして作った子テーマでは、

このようになります。若干ですが見やすくなったような気がします。
※ なぜか全体のフォントサイズが指定していないのに変わってる気がしますが、それについては後述します。

Saitama childの内容

Saitama child のダウンロードはこちらになります → saitama-child

style.css

style.cssH2、H3のCSSをカスタマイズしています。内容は

こちらになります。たとえばH2の線の色を変えたいときは .blog h2

このあたりで色を変えてみたりしてください。

そのほかのファイル

functions.php ここには子テーマに必要な部分が入っています。詳しくは、

2年ほど前に「子テーマの作り方」という記事を書いたのですが、その後子テーマの作り方についてのオススメの方法が多少変わりました。 自分自身...

この記事をご覧ください。

screenshot.png テーマをインストールするときに表示される画像です。H2、H3のスクリーンショットにしました。

子テーマの使い方

ダッシュボード 外観>テーマ をクリックして

新規追加 をクリック

テーマのアップロード をクリック



ファイルを選択
をクリックして、ダウンロードしたzipファイルを指定して

今すぐインストール をクリック

有効化 をクリック

これでテーマがSaitama childに変わります

おまけ:saitama childテーマでなぜか文字が小さくなった原因を考察しました

SaitamaとSaitama childを比べると

なぜか指定していない部分のフォントまで小さくなっていることがわかりました。指定していないのですが、デベロッパーツールで確認してみたところ saitama child の方では saitama直下のstyle.cssではなく、assets\css\ というフォルダにあるstyle.cssを参照していることがわかりました。これはSaitamaの仕様なのかもしれません。

私的にはこの大きさが良いなと思ったのでこのまま使うようにしていますが、もしも文字の大きさは元のSaitamaテーマと同じにしたい場合は?と考えました。試しに昔の子テーマの方法

このblogではWordPressのカスタマイズをするときは基本的に「子テーマ」を使っているという前提で書いています。 今日は そもそ...

この記事にあるような方法でテーマを作ってみたところ、

このような感じで、文字の大きさは元のSaitamaテーマのままで指定したCSSだけが適用されたものになりました。

あまり推奨されてはいないようなのですが

WordPress Codex 子テーマ

最後のステップでは、親テーマと子テーマのスタイルシートをキューに入れます。以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。したがって子テーマには functions.php を作成する必要があります。子テーマの functions.php の最初の行は、PHP の開始タグ (

念のために古い形式で作ったテーマもここに置いておきます。→saitama-child2

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る