Nasty Black

ブログ、再開しました。

上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

FC2ブログのテンプレート変数に曜日の英語表記(Monなど)があります。
しかし月名の英語表記(Janなど)の変数はありません。
普通にブログをやる分には、気にするほどではないかもしれませんが・・・
デザイン面ではこれが意外と重要なのです。

そこで即興で思いついた簡単かつゴリ押しな方法を紹介します。
JSを使用する方法が既にありますが、今回はCSSのみで実装可能です。

至って簡単

説明すれば1行も掛かりません。
FC2ブログの変数を利用して作ったクラスの擬似要素にcontentプロパティで英月名を表示する
という方法、コードは以下の通りです。

HTML

<!--topentry-->
<span class="month<%topentry_month>"></span><%topentry_day>
<!--/topentry-->

記事の投稿月を表示する変数<%topentry_month>をクラス名とします。
クラス名は数字や記号始まりに出来ないので、何かしらの英字を頭に付け足します。
これでspan要素に自動的に月別のクラス名が付け加えられます。

CSS

span.month01:before{
content:"Jan";
}

span.month02:before{
content:"Feb";
}

...

span.month12:before{
content:"Dec";
}

次に対応するクラスをスタイルシートに12個記述します。(長いので例は中略)
例では3文字に略していますが、Januaryなどのフルスペルも勿論可能です。
睦月、如月、弥生･･･なんてのも一応出来ます(笑)

まとめ

この方法はCSSTagCloudに使われていたのを参考にさせて頂きました！
CSSTagCloudではタグの件数でクラスを作り、フォントの大きさを変化させるというものでした。
:beforeを使うか:afterを使うかはデザイン次第で。

この方法のメリットはCSSのみで実装可能、ページの読み込みと同時に表示。
デメリットは擬似要素を使うためIE8未満は非対応(非対応の場合何も表示されません)、12個のクラスが必要。


と言ったところでしょうか。以上FC2ブログでの月名を英語表記にする方法でした。