Simplicityの記事内に表示されるタグリストをカスタマイズしてみた

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;
}