Twenty Twelveの子テーマを作成してCSSをカスタマイズ

Twenty Twelveのシンプルな良さを活かしつつ、自分好みに見出しやメニューのデザインを変更しました。

コード

style.css

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif;
    font-size: 16px;
    color: #333;
}
.entry-header .entry-title {
    font-size: 140%;
    font-weight: bold;
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-size: 120%;
}
.entry-content h2 {
    padding: 0.5em;
    border-left: 2px solid #333;
    background-color: #f5f5f5;
}
.entry-content h3 {
    border-bottom: 5px solid #f5f5f5;
}
.entry-content h4::before {
    margin-right: 10px;
    color: #22b24c;
    font-family: 'Font Awesome 5 Free';
    text-shadow: 1px 1px 3px #666;
    content: '\f00c'
}
.widget-title {
    font-size: 120%;
}
.nav-previous, .nav-next {
    font-size: 90%;
}
@media screen and (min-width: 600px) {
    .entry-header .entry-title {
        font-size: 160%;
    }
    .entry-content h2 {
        font-size: 150%;
    }
    .entry-content h3 {
        font-size: 140%;
    }
    .entry-content h4 {
	font-size: 130%;
    }
    .widget-area .widget p,
    .widget-area .widget li,
    .widget-area .widget .textwidget {
        font-size: 14px;
    }
    .main-navigation li a,
    .main-navigation li {
        display: block;
        float: left;
        text-decoration: none;
    }
    .main-navigation li a:hover {
        background: #f5f5f5;		
    }
    .main-navigation li {
        margin-right: 0;
    }
    .main-navigation li a {
        padding-left: 1.5em;
        padding-right: 1.5em;
    }
}

子テーマのstyle.cssに以上のコードを追記します。

直接書き込んでFTPでアップするのもいいですが、ダッシュボードからテーマエディターを開いて記述する方が速くて安全。

カスタマイズの追加CSSのところで編集すればリアルタイムで反映が確認できるので便利です。そこに書きっぱなしでもいいですが、style.cssに入れ直しました。

function.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}

// head内にカスタム用のコードを追加する
function meta_headcustomtags() {
$headcustomtag = <<<EOM

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

EOM;
echo $headcustomtag;
}
add_action( 'wp_head', 'meta_headcustomtags', 99);

?>

head部分にウェブフォントであるFont Awesomeを読み込むタグを挿入します。見出しで使います。

header.phpを編集するのが正攻法ですが、function.phpに入れる方法があり、それを使っています。

カスタマイズ

BEFORE

こちらがカスタマイズ前、つまりTwenty Twelveの素です。

気になっていたのは全体的なフォントサイズ。映っていませんが見出しも装飾が無くて文字サイズが異なるだけなのでレベルがわかりにくかったです。

あとナビゲーションメニューはテキスト部分にリンクがあります。できればバナーみたいにリンク範囲を広げて、ポインタを重ねた時に背景が変わるようにしたい。

AFTER

これがアフター。フォントサイズを大きくし、見出しを目立つようにしました。見出しはこの記事で直接確認してください。

ナビゲーションメニューも選択範囲を広げ、ポインタを重ねると背景が変わるようにしています。

フォントと見出しについて

フォントカラーは#444と少し薄めだったので#333にしました。真っ黒よりもこれぐらいが読みやすい。

ベースとなるフォントサイズを16pxで指定し、記事タイトルや見出しのレベルは文字サイズで明確にしました。

ただし、スマホ表示の時はあまり大きくなると読みにくいので、タイトル以外の見出しサイズは同じにしています。

見出しには装飾を付けています。大見出しは背景、中見出しはアンダーライン、小見出しはチェックマークです。チェックマークはFont Awesomeを使っています。

あとサイドバーの見出しとテキストもかなり小さかったので大きくしています。

ナビゲーションメニューについて

ナビゲーションメニューはliをinline-blockからblockに変更し、floatをleftにしています。

これだけではテキストの始まりと終わりからリンクが始まってしまいかっこ悪いので左右のpaddingを設定。代わりに間隔を空けるために指定されているmargin-rightを0にします。

あとはli a:hoverのbackgroundを指定していっちょあがり。

今後更新したらこの記事に書き留めます。

今後もカスタマイズしたらここに書き留めていきます。

もしお気に召されたらご自由に使っていじってやってください。

コメントを残す

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