Bloggerの日付ヘッダー「date-header」にアイコンサイズの画像を追加する

概要

「MinimaBlack」の日付ヘッダーですが…

デフォルトでは…こんな感じで…

上下にマージンが設定されているだけです…「CSS」は当然ながら…

h2.date-header{margin:1.5em 0 .5em}

…と…やる気の無さ満載ですね…これは…もう…変えましょう…

…っていうか…日付ヘッダーの記事は最近も書きましたが…

 【CSS3】Bloggerの記事タイトルと日付ヘッダーをパステル調の立体的リボンでデザインする


この記事の方が…より…デフォルト寄りでハードルも低いですし…

古びた記事をリンクから外すために…記事のリニューアル中ですので

その一環で…この記事を書いています…　σ(^_^;)

画像を使ってデザインする

画像を使ってデザインする…と言っても…

背景画像を設定して…その上に日付を表示させるのは…

経験上…労力の割にはトホホ感がマックスになる可能性大です…

なので…サンプルとして…こんな感じで…

アイコン程度の大きさの画像を使います…

画像は「CSS Sprites」の「span」タグか…

「base64」の生データを使った「img」タグで用意して下さい…

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】

画像をbase64エンコードするツール / Syncer  


デフォルトの日付ヘッダーは…こんな感じになっていますから…

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

画像タグを追加します…「CSS Sprites」の場合を例にするとこんな感じ…

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'>
    <data:post.dateHeader/>&#12288;<span class='「CSS Sprites」のクラス名' title='Date'/>
  </h2>
</b:if>

サンプル画像の感じで…日付を右寄せにするには「CSS」をこのようにします…

h2.date-header{border:none;margin:0;padding:0 20px 0 0;color:#9a9;text-align:right;text-transform:none;line-height:2.4;font-size:10px;font-weight:bold;font-style:italic}

「Font Awesome」のアイコンでデザインする

画像を…「Font Awesome」のアイコンで置き換えても良いでしょう…

 「Font Awesome」のCDNでアイコンをWebフォント機能を使ってBloggerに表示【CSS3】


こんな感じのアイコンが使えそうですね…

上記…画像タグと「Font Awesome」のタグを置き換えて下さい…

<i class="fa fa-clock-o fa-lg fa-fw"/>
<i class="fa fa-thumb-tack fa-lg fa-fw"/>
<i class="fa fa-check-circle-o fa-lg fa-fw"/>
<i class="fa fa-pencil fa-lg fa-fw"/>

Blogger の「HTML」内で使う場合は…このタグの閉じ方で OKです…

最後までお読みいただきましてありがとうございます…

Tips Universal Header Sidebar Footer Current-Label : Main