
Simplicityの記事内で表示されるタグリストの見た目を、ブロック状に表示されるようカスタマイズしてみました。
やり方
タグリストの先頭に表示されているアイコンと「,」を消して、CSSの:beforeによって各タグ毎にアイコンを表示している。以下はその詳細。
PHPファイルの編集
entry-boty.phpの以下の部分を編集。
<span class="post-tag"><?php the_tags('<span class="fa fa-tag fa-fw"></span>',', '); ?></span>
<!-- 上の行を下のように変更-->
<span class="post-tag"><?php the_tags('',' '); ?></span>
CSSの編集
style.cssに以下のコードを追加。
.article .post-tag a {
background: #F3F3F3;
padding: 6px;
margin-right:8px;
border-radius: 2px;
text-decoration: none;
color: #4D4D4D;
}
.article .post-tag a:before {
font-family: 'FontAwesome';
content: "\f02b";
margin-right: 4px;
}
コメント