FC2ブログに更新日を表示してアイコンを付ける
FC2のブログテンプレートには、投稿日の表示はありますが、更新日の表示が無い物もあります。
今回は、更新日の表示と共に、WebアイコンフォントのFontAwesome5を使って、 や を、下画像のオレンジで囲んだ部分のように、表示させてみる事にしましたので、参考にしてみてください。
更新日の表示
まずは、この部分の表記に当たるHTMLの記述を見つけなければなりません。
</time>と記載されている場所を見つけます。
探していくと・・・
テンプレートにもよりますが、当ブログのように、トップページと個別ページの表示が違う場合、トップページ部分と、個別ページ部分の、それぞれ２か所に存在することが分かります。
その場合は、２か所とも追記していきます。
<time class="grid-datetime" datetime= "<%topentry_year> -<%topentry_month> -<%topentry_day> T<%topentry_hour> :<%topentry_minute> :<%topentry_second>+09:00"> <%topentry_month:short> <%topentry_day> , <%topentry_year> </time>
上記の赤文字部分が、上画像のオレンジで囲んだ、左側の投稿日を表示する記述になります。
更新日は、その横に並べて表示したいので、</time>手前に、下のFC2から提供されている変数を選んで、貼り付けていきます。
<%topentry_modified_year> 最終更新年を表示 <%topentry_modified_month> 最終更新月を表示 <%topentry_modified_month:short> 最終更新月(書式：Jan/Feb/Mar…)を表示 <%topentry_modified_day> 最終更新日を表示 <%topentry_modified_hour> 最終更新時を表示 <%topentry_modified_minute> 最終更新分を表示 <%topentry_modified_second> 最終更新秒を表示 <%topentry_modified_youbi> 最終更新曜日（書式：Mon/Tue/Wed…）を表示 <%topentry_modified_wayoubi> 最終更新曜日（書式：月/火/水…）を表示
<%topentry_modified_month:short> <%topentry_modified_day>, <%topentry_modified_year>
この記述を、そのままコピーして</time>手前にコピペすると、最初の画像のオレンジで囲んだ部分（アイコンの無い状態）になります。
投稿日と更新日にアイコンフォントを表示する
ここからWebアイコンフォントの、FontAwesome5を使って、投稿日・更新日それぞれの前に、アイコンを表示させていきます。
ここでは、アイコンをダウンロードやアップロードせずに簡単に表示できる、”CDN（FontAwesome5専用サーバー上にある画像やフォントなどのデータ）”を使って表示してみます。
作業１：下記コードをコピーします
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
作業２：ブログの</head>タグ手前に貼り付け
上記のコードを、FC2ブログの場合は、[設定]⇒[テンプレートの設定]⇒[◯◯のHTML編集]で、HTMLの<head>〜</head>内に貼り付けます。
このコードを貼り付けることで、FontAwesome5サーバーから、直接アイコンが表示されるようになります。
赤字はバージョンです。
今回のアイコンは、このバージョンで表示されます。
作業３：アイコンフォントHTMLコードの貼り付け
それぞれ投稿日時前・更新日時前に、下記コードを貼り付けます。
<i class="fas fa-pen-fancy"></i> 万年筆アイコンのコード
<i class="fas fa-sync-alt"></i> サークルアイコンのコード
これで、アイコンの表示が完了です。
ただ、下記のように、それぞれの変数を間に挟んでも、同じように表示できます。
（テンプレートによっては有効な場面があります）
参考に、最初の画像と同じ表示になるコードを、下記に貼り付けておきます。
最初の投稿日の、赤部分で示したコードの</time>手前を消して、下記コードをコピペして、代わりに貼り付ければ、アイコン付きの表示になります。
<i class="fas fa-pen-fancy"> <%topentry_month:short> <%topentry_day>, <%topentry_year></i>  <i class="fas fa-sync-alt"> <%topentry_modified_month:short> <%topentry_modified_day>, <%topentry_modified_year></i>
最後に
HTMLコードは上書きされると元には戻りません。
必ず、バックアップしながら作業してください。
