8.子テーマでデザインをカスタマイズ

子テーマの作成とインポート

そろそろ半年近くなってきてしまったので、子テーマを作成し
デザインのカスタマイズします。

と言ってもこれだけ

wordpress 子テーマ style.css

style.cssのファイルを作成してzipでインポートして有効化するだけ。

注)このままでも日本語に対応していて問題ないんですが、
Theme Nameは英字にしたほうがいいとの記述も見かけたので、特別事情がなければ英字がいいと思います。(これは某参考書のTwenty Twelve用子テーマのダウンロードサンプルをテーマ名だけ変更してそのまま使用したもの)

問題が出たのは以下の2点

元テーマのTwentythirteenで取り替えたヘッダー画像がデフォルトに戻ってしまったので、ペン次の画像に変更。

グローバルナビでブログのカテゴリーのプルダウンメニューが表示されなくなってしまったのでメニューをチェック。

グローバルメニュー

ナビゲーションメニューのチェックが外れていたのでチェックを入れたら
表示されました。

元テーマに加えたfooterなどの変更はそのまま継承され、以前と何も変わって
ない様子、これからこのcssファイルに随時加筆しながらデザインを変更して
いきます。

デザインをカスタマイズ

ナビゲーションの背景色をグレーに変更

色はWebセーフカラーを参照

#navbar {
    background-color: #cccccc;
}

斜体字になってるフォントを修正

body * {
    font-style: normal  !important;
}

サイトのタイトルと説明文の色を臙脂色に

.site-title, .site-description {
         color: #330033;
}

参考書ではヘッダーのid属性#mastheadも併せて指定されていますが
class属性の.site-titleだけで問題なさそうなのでこのままいきます。

記事のタイトル文字を小さく

#content article .entry-title{
             font-size: 36px;
}

スマホ用の説明文のサイズを小さく

幅400pxぐらいのディスプレーになると「男もすなる美文字日記」が絵にかぶってしまうのでサイズを小さくします。

が、子テーマでメディアクエリ643px以下で設定しようとしたものの、適応されず
しょうがないので親テーマのTwenty Thirteenの方に追記

@media (max-width: 643px) {
 .site-title {
 font-size: 30px;
 }
 .site-description {
 font-size: 16px;
 }

しかしFirefoxとSafariでは小さくなったもののChromeでは変化せず。

2017  2  24    

記事が増えてきた上、一本の記事が長いので
カテゴリー別のページが見づらくなったため久々のカスタマイズ。

抜粋文の表示に変更して、1ページあたり10本に。

記事を出力するcontent.phpにif文で検索結果を抜粋文で表示する仕様になってる事を発見。 the_excerpt()が抜粋文のコード。

 <?php if ( is_search() ) : // Only display Excerpts for Search ?>
 <div class="entry-summary">
 <?php the_excerpt(); ?>
 </div><!-- .entry-summary -->
 <?php else : ?>
 <div class="entry-content">

ならば カテゴリーとタグのテンプレートもここに加えればいいので 追加。

 <?php if ( is_search() || is_tag() || is_category() ) : // Only display Excerpts for Search ?>
 <div class="entry-summary">
 <?php the_excerpt(); ?>
 </div><!-- .entry-summary -->

見やすいようにデザインを変更。

class = “entry-title”にスタイルをつける。

タイトル背景色を白にして、タイトルを太字に。

ボーダーをborder-style:doubleで二重線にしてborder-radiusで角丸めときました。

wordpress the_excerpt()

で こうなりましたと。

サイドウィジェットにかぶって見苦しかったアーカイブヘッダーも
この際、修正。

.archive-header {
 background-color: none;
}
.archive-title {
 max-width:65%;
 float:left;
 background-color : rgba(0,0,255,0.3);
 border-radius: 10px;
 font-weight:bold;
 padding:20px;
 margin:20px;
}
@media (max-width: 643px) {
 .archive-title {
 font-size:20px;
 }

#content article .entry-title {
 font-size:28px;
 }
}
@media (max-width: 359px) {
 .archive-title {
 font-size:14px;
 }
 #content article .entry-title {
 font-size:20px;
 }

メディアクエリーでデバイスのサイズによって
タイトルのフォントサイズを切り替えるように設定。

もちろん 追記はすべて子テーマを使ってのオーバーライドです。

今回は子テーマでもメディアクエリー反映した。

コメントを残す

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

CAPTCHA