ブログ投稿の日付・カテゴリ・タグをWebフォントを使ってシンプルに彩る

2013/12/21 2014/09/04

はじめに

最近ブログをちょこまかカスタマイズしているえじ(@SakuEji)です。

カスタマイズ内容についてメモがてら記事を書きたいと思います。

最初はブログ投稿についてる投稿日・カテゴリ・タグ。

デフォルトだとカテゴリとタグの境目がちょっと分かりづらいですね。それと、背景色が灰色で味気ないです。

そこで、Webフォントを使って見た目を整えていきたいと思います。

スクリーンショット_2013-12-20_22.41.30-5

最終的にはこんなかんじになります。

まずはフォントの用意

ダウンロード

Fontelloというサイトを使います。

FontelloはWebフォントのうち、必要なものだけを選んで使うことが出来ます。

スクリーンショット 2013-12-20 23.39.53

今回はFont Awesomeというフォントから投稿日に使う時計っぽいアイコンと、カテゴリに使うフォルダっぽいアイコンと、タグに使うタグっぽいアイコンの3つを選びました。

次に、それぞれのアイコンを「何の文字として」表示するかを決めます。

スクリーンショット 2013-12-20 23.44.28

ここでは時計は「d」、フォルダは「c」、タグは「t」にしました。それぞれdate、category、tagの略です。

設定が終わったら、右上の「Download Webfont」をクリックするとzipファイルがダウンロードされます。

アップロード

ダウンロードしたzipファイルを解凍すると、cssとかいうフォルダとfontとかいうフォルダが出てきます。

スクリーンショット 2013-12-20 23.50.23

このうち、fontフォルダをテーマフォルダ(stinger3ver○○)の直下にアップロードしましょう。

ライセンスについて

フォントのライセンスはそれぞれ違うので、良く確認してください。

たとえば、Font AwesomeはSILライセンスなので、Webサイトのどこか or CSSのコメントにURLを記載する必要がありますね。

PHPをいじる

次に、single.phpをいじっていきます。

single.phpの割と最初の方にblogboxについての部分があります。

[php]
<div class="blogbox">
<p><span class="kdate">公開日：
<time class="entry-date" datetime="<?php the_time('c') ;?>">
<?php the_time('Y/m/d') ;?>
</time>
:
<?php if ($mtime = get_mtime('Y/m/d')) echo ' 最終更新日：' , $mtime; ?>
</span>
<?php the_category(', ') ?>
<?php the_tags('', ', '); ?>
<br>
</p>
</div>
[/php]

これを、

[php]
<div class="blogbox">
<p><span class="kdate">
<time class="entry-date" datetime="<?php the_time('c') ;?>">
<?php the_time('Y/m/d') ;?>
</time>
</span>
<span class="kcate"><?php the_category(', ') ?></span>
<span class="ktag"><?php the_tags('', ', '); ?></span>
<br>
</p>
</div>
[/php]

このように変更します。変更内容は、

「公開日:」という文字列を削除
最終更新日を表示しないように
カテゴリにはkcate、タグにはktagというclassを設定

です。3つ目がメインです。最初の2つは好みに合わせて設定してください。

CSSをいじる

@font-faceの設定

先ほど解答したフォルダの中にあるcssフォルダの中の「フォント名.css」ファイルを開き、「@font-family{」から「}」までをコピーします。

そして、style.cssの最初の方(charsetの後くらい)に追加します。

具体例はこんな感じ。

[css]
@font-face {
font-family: 'fontello';
src: url('./font/fontello.eot?48629566');
src: url('./font/fontello.eot?48629566#iefix') format('embedded-opentype'),
url('./font/fontello.woff?48629566') format('woff'),
url('./font/fontello.ttf?48629566') format('truetype'),
url('./font/fontello.svg?48629566#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
[/css]

このとき、URLに書いてある「../」を「./」に書き換えてくださいね！

beforeセレクタを使う

先ほど設定した.kdateなどにbeforeセレクタを使ってアイコンをつけていきます。

「タイトル下」のあたりのCSSを以下の物に書き換えます。

[css]
.kizi .blogbox p {font-size: 12px;}
.kizi .blogbox {color:#666;}
.kdate, .kcate, .ktag {margin-right : 5px;}
.kdate:before, .kcate:before, .ktag:before {
font-family:'fontello';
margin:0 3px;
}
.kdate:before {content:'d';}
.kcate:before {content:'c';}
.ktag:before {content:'t';}
[/css]

beforeセレクタはその要素の前に何かを付け足してくれるもので、

[css]
.ktag:before {
font-family : 'fontello';
content : 'd';
}
[/css]

のように書けばktagというclassの要素の前に「d」という文字列を付け足してくれます。

Webフォントを使えばそれがアイコンに変わると、そういう仕組み。