今回は、投稿のメタデータ部分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;
}