Bloggerの記事フッター「post-footer」のアイテムを指定通り並べて画像やアイコンでデザインする

概要

「Minima Black」の記事フッターですが…

とてもシンプルですね…まぁ…原因は…

解説のために必要最小限の構成にしているせいなのですが…

それでも…コメント関連のリンクが間に挟まって…

指定通りに並んでいなかったり…改行されていたりと…

満足出来るとは程遠い感じです…なので…当然ながらカスタマイズの対象です…

構造から原因を探り…文字色やリンク色を変更して…

更には…画像やアイコンを付与してデザインしてみましょう…

記事フッター「post-footer」の構造

「投稿者」「投稿時刻」「投稿ラベル」に絞り込むと…

デフォルトでは…該当箇所はこんな感じになっています…

「CSS」

デフォルトの「CSS」

.post-footer{margin:.75em 0;color:$sidebarcolor;text-transform:uppercase;letter-spacing:.1em;font:$postfooterfont;line-height:1.4em;}

英語圏の開発者は「text-transform」「letter-spacing」が大好きですね…

大文字表示や文字間スペースを定義する意義があまり感じられません…

しかも…ご丁寧にフォントに変数定義までしています…

変数定義は…単なるファイルサイズの無駄になっているケースが殆どですし…

Blogger の変数定義は独自仕様で「$」で呼び出されますので非推奨です…

「body{…}」に様々な初期値を記述して…そもそも…変更するのは…カラム毎に…

殆どの場面で…「font-style」「font-size」「font-weight」程度でしょう

「HTML」

デフォルトの「HTML」

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
  <span class='post-author'>
    <b:if cond='data:top.showAuthor'>
      <data:top.authorLabel/> <data:post.author/>
    </b:if>
  </span>

  <span class='post-timestamp'>
    <b:if cond='data:top.showTimestamp'>
      <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
      <a class='timestamp-link' expr:href='data:post.url' title='permanent link'>
      <data:post.timestamp/>
      </a>
    </b:if>
    </b:if>
  </span>

<!-- ここにその他のアイテムの記述 -->

</p>

<p class='post-footer-line post-footer-line-2'>
  <span class='post-labels'>
    <b:if cond='data:post.labels'>
      <data:postLabelsLabel/>
      <b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url' rel='tag'>
        <data:label.name/>
        </a><b:if cond='data:label.isLast != "true"'>,</b:if>
      </b:loop>
    </b:if>
  </span>
</p>

<p class='post-footer-line post-footer-line-3'/>
</div>

「AUTHOR:」部分が…　<data:top.authorLabel/>

「＊POSTED:」部分が…　<data:top.timestampLabel/>

「＊LABEL:」部分が…　<data:postLabelsLabel/>

…の「データタグ」で書き出されています…各文字列は…

「レイアウト」「ブログの投稿」ガジェットの…

「編集」から変更出来ますが…上記…

「text-transform」「letter-spacing」

…のせいで…「0.1em」のスペースが開いた…

大文字表示になっています…しかも…

「投稿時刻」はリンクになっていますし…

表示ラインは…

　post-footer-line-1
　post-footer-line-2
　post-footer-line-3

…と…3行あるにも拘わらず…

2行しか使わていなく…1行目に…

コメント関連などのアイテムも記述されていて…

「アイテムの並べ替え」は見事に無視され…

区切りとして設定している「＊」もラベル部分が無駄になってしまっています…

「CSS」でデザインを構築する

変数定義に関しては…まぁ…お好みですからご自由にどうぞ…

大文字表示や文字間スペースは…気に入らない場合…該当箇所を削除します…

「投稿時刻」がリンクになっていますので…

「a:visited{color:…;}」「a:hover{color:…;}」「a:active{color:…;}」など…

リンク要素に疑似クラスで文字色を指定している場合は…

文字色が変わりますので気持ち悪いですね…

そもそもリンクにする必要性が全くもって感じられないでしょ

「.post-footer{…}」では対応出来ませんので…

「.post-timestamp a{color:…;}」などとして上書きします…

「HTML」でデザインを構築する

「投稿時刻」問題を「HTML」で対応するには…

「12行目」「13行目」「15行目」「16行目」を削除すれば OKです…

デザインのためにレイアウトをリセットする

アイテムの並べ替えが思い通りにならなかったり改行されてしまう問題は…

「post-footer-line-1」「post-footer-line-2」「post-footer-line-3」

…の表示ラインに…適切にアイテムを配置し直す事で解決します…

「<span>」～「</span>」間を丸ごと移動させて下さい…

因みに… 当サイトでは…共有ボタンを別途表示していますし…

 「斜め掛け半透明リボン」をサイトの上部左右に配置してテキストや共有ボタンを組み込む方法


記事にはラベルを…1個しか付与していませんので…

「post-footer-line-1」には…

「投稿者」「投稿時刻」「投稿ラベル」「投稿をメール」「クイック編集」

「post-footer-line-2」には…「コメント関連」…としていますが…通常ならば…

「post-footer-line-3」まで使用してレイアウトするのが良いでしょう…

　<p class='post-footer-line post-footer-line-3'/>

…という形状で…デフォルトでは閉じていますから…

<p class='post-footer-line post-footer-line-3'>
<!-- ここにアイテムの記述 -->
</p>

…という形状にしてから記述して下さい…

アイコンを使ってデザインする

デザインするためにレイアウトをリセットしたら…

やはり…記事フッターらしくするポイントはアイコンです…

自作画像でも勿論構いませんが…此処は…

もうお馴染みの「Font Awesome」です…

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


先ずは…大前提として…上記「構造」「HTML」での…

「データタグ」自体をアイコンに置換するか…

「データタグ」にアイコンを併記する形にするか…を決めて下さい…

当サイトでは…「データタグ」にアイコンを併記する形です…

実装状態は…記事下部でご確認下さい…使用しているアイコンは…

…の…3種類です…実装していませんが…

…も…「投稿をメール」「クイック編集」で代替出来ますね…

<i class="fa fa-user fa-lg fa-fw" title="Author"/>
<i class="fa fa-clock-o fa-lg fa-fw" title="Posted"/>
<i class="fa fa-tag fa-lg fa-fw" title="Labels"/>

「データタグ」自体をアイコンに置換する場合は…

「データタグ」を削除して同じ場所に「Font Awesome」のタグを記述します…

<data:postLabelsLabel/>にアイコンを併記する場合は…

「データタグ」の前に記述し…こんな感じにします…

<i class="fa fa-user fa-lg fa-fw" title="Author"/><data:top.authorLabel/>
<i class="fa fa-clock-o fa-lg fa-fw" title="Posted"/><data:post.timestamp/>
<i class="fa fa-tag fa-lg fa-fw" title="Labels"/><data:postLabelsLabel/>

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

Tips Universal Header Sidebar Footer Current-Label : Main