iEhohs.com

ウェブ&システム担当の仕事メモ的なブログ。個人的な記事ばかりです。

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;
    color: #000;
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-size: 120%;
    color: #000;
}
.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に入れ直しました。

※2020年1月23日追記 記事タイトルや見出しは真っ黒の方が目立つということで、色を#000に変更しています。

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">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-47711529-31"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-47711529-31');
</script>


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

?>

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

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

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

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

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

コメントする

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