MS Access Tips/Sample and VBA and Blog customize etc...

FC2ブログの月表示を英語に変更する

タイトル画像

FC2ブログの日付関係のテンプレート用変数で、曜日は日本語表記と英語表記のものがありますが、なぜか月は数字表記しかありません。それを英語表記に変更するチップスを紹介します。

難易度:

document.writeで出力する方法

当ブログで採用させていただいているテンプレートでは、下記のスクリプトをHTMLに埋め込んで出力していました。

テンプレート変数<%topentry_month>は、01、02、03・・・という値を返すので、それをswitchで場合分けしてdocument.writeで書きだすということですね。

しかし、HTML5の仕様書では document.write は非推奨となってますし、これはさけたいですね。同じスクリプトがHTMLのあちこちに点在しているというのも気持ちよくないです。

jQueryで変換して英語表記に書き換える

jQuery は導入済みですので、それを使って書き換えることにしました。

HTMLの日付を英語表記で出力したい場所に下記のようにタグを記述します。

これで、「08」というような数字表記になりますので、これをjQueryで書き換えます。テンプレートのHTMLの</boody>の直前に下記のスクリプトを配置します。(最近は、スクリプトは</boody>の直前に配置するというのが主流のようです。)

これで、ページ上のすべての class="month" タグ内の月が英語表記に置換されます。

CSS の contentプロパティを利用して英語表示にする

テンプレートのHTMLの日付表示部分は下記のようにします。

テンプレートのスタイルシートは下記のように設定します。

before記事要素のcontentプロパティでテキストを挿入するという方法です。クラス名にテンプレート変数で月を追加して区別します。

まとめ

jQueryの方法は、HTMLの最後(</body>)の直前に記述しますので、HTMLが最後まで読み終わるまでは、数字表記で表示されます。読み込みが遅い時などは、数字表記が一瞬目につくことがあるかもしれません。スクリプトが無効の場合は、数字表記のままです。

スタイルシートの方法は、before記事要素はIE8以降なので、それ以前の場合は、何も表示されなくなります。また、実際にテキストがあるわけではなく、あくまで擬似なので、テキストとして選択することはできません。

どちらにしても現在のWEB環境では気にするほどでは無いと思いますので、お好みで選択すればいいと思います。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/480-4c511aa7
該当の記事は見つかりませんでした。