今回は、投稿のメタデータ部分CSS設定を行います。

TwentyFourteenでのCSS設定

　
記事本文のテンプレートファイルcontent.phpの中身を見ると、記事のメタデータに関して下記CSSクラスを使って設定しています。
　
<div class=”entry-meta”>
<span class=”cat-links”>
<footer class=”entry-meta”><span class=”tag-links”>
　
TwentyFourteenのstyle.cssから該当する部分をコピーし、適宜修正します。
　

TwentyFourteenのstyle.cssの設定をベースに設定

　
上記のCSSクラスは、TwentyFourteenのstyle.cssの”6.3 Entry Meta”の部分に設定されています。
　
“6.3 Entry Meta”の部分をコピーし、使用していないクラスは除去し、使用しているCSSクラスを自分の好みに合わせて修正します。
　
●修正例
　

/**
 * 6.3 Entry Meta
 * ---------------------------------------------------------
 */ 

.entry-meta {
        clear: both;
        color: #767676;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.3333333333;
        text-transform: uppercase;
}

.entry-meta a {
        color: #767676;
}

.entry-meta a:hover {
        color: #41a62a;
}

.cat-links {
        font-weight: 900;
        text-transform: uppercase;
}

.cat-links a {
        color: #2b2b2b;
}

.cat-links a:hover {
        color: #41a62a;
} 

/* Tag links style */

.entry-meta .tag-links a {
        background-color: #767676;
        border-radius: 0 2px 2px 0;
        color: #fff;
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2727272727;
        margin: 2px 4px 2px 10px;
        padding: 3px 7px;
        position: relative;
        text-transform: uppercase;
}

.entry-meta .tag-links a:hover {
        background-color: #41a62a;
        color: #fff;
}

.entry-meta .tag-links a:before {
        border-top: 10px solid transparent;
        border-right: 8px solid #767676;
        border-bottom: 10px solid transparent;
        content: "";
        height: 0;
        position: absolute;
        top: 0;
        left: -8px;
        width: 0;
}

.entry-meta .tag-links a:hover:before {
        border-right-color: #41a62a;
}

.entry-meta .tag-links a:after {
        background-color: #fff;
        border-radius: 50%;
        content: "";
        height: 4px;
        position: absolute;
        top: 8px;
        left: -2px;
        width: 4px;
}

　
「ブートストラップ３を使って自作テーマ作成」の目次へ

関連記事の目次