Welcome to my blog

パソコン・インターネット

FC2ブログに更新日を表示してアイコンを付ける

FC2のブログテンプレートには、投稿日の表示はありますが、更新日の表示が無い物もあります。

今回は、更新日の表示と共に、WebアイコンフォントのFontAwesome5を使って、 や  を、下画像のオレンジで囲んだ部分のように、表示させてみる事にしましたので、参考にしてみてください。

更新日の表示

update.jpg


まずは、この部分の表記に当たるHTMLの記述を見つけなければなりません。

</time>と記載されている場所を見つけます。


探していくと・・・

テンプレートにもよりますが、当ブログのように、トップページと個別ページの表示が違う場合、トップページ部分と、個別ページ部分の、それぞれ2か所に存在することが分かります。

その場合は、2か所とも追記していきます。


<time class="grid-datetime" datetime=
"<%topentry_year>
-<%topentry_month>
-<%topentry_day>
T<%topentry_hour>
:<%topentry_minute>
:<%topentry_second>+09:00">
<%topentry_month:short>
&nbsp;<%topentry_day>
,&nbsp;<%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>	最終更新曜日(書式:月/火/水…)を表示

最終更新月(書式:Jan/Feb/Mar…)+最終更新日+最終更新年 の順で表示したいので・・・ 
それぞれを選んで、適宜半角スペースを入れ、dayとyearの間にカンマを入れれば・・・ 
下記のような記述になります。

因みに&nbsp;は半角スペースなので、スぺースを開けたい場所に記述します。
   
&nbsp;<%topentry_modified_month:short>
&nbsp;<%topentry_modified_day>,
&nbsp;<%topentry_modified_year>


この記述を、そのままコピーして</time>手前にコピペすると、最初の画像のオレンジで囲んだ部分(アイコンの無い状態)になります。


投稿日と更新日にアイコンフォントを表示する

ここからWebアイコンフォントの、FontAwesome5を使って、投稿日・更新日それぞれの前に、アイコンを表示させていきます。


ここでは、アイコンをダウンロードやアップロードせずに簡単に表示できる、”CDN(FontAwesome5専用サーバー上にある画像やフォントなどのデータ)”を使って表示してみます。

作業1:下記コードをコピーします


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


作業2:ブログの</head>タグ手前に貼り付け


上記のコードを、FC2ブログの場合は、[設定]⇒[テンプレートの設定]⇒[◯◯のHTML編集]で、HTMLの<head>〜</head>内に貼り付けます。


このコードを貼り付けることで、FontAwesome5サーバーから、直接アイコンが表示されるようになります。

赤字はバージョンです。

今回のアイコンは、このバージョンで表示されます。


作業3:アイコンフォントHTMLコードの貼り付け


それぞれ投稿日時前・更新日時前に、下記コードを貼り付けます。

<i class="fas fa-pen-fancy"></i> 万年筆アイコンのコード


<i class="fas fa-sync-alt"></i>  サークルアイコンのコード


これで、アイコンの表示が完了です。


ただ、下記のように、それぞれの変数を間に挟んでも、同じように表示できます。

(テンプレートによっては有効な場面があります)


参考に、最初の画像と同じ表示になるコードを、下記に貼り付けておきます。

最初の投稿日の、赤部分で示したコードの</time>手前を消して、下記コードをコピペして、代わりに貼り付ければ、アイコン付きの表示になります。

<i class="fas fa-pen-fancy">
&nbsp;<%topentry_month:short>
&nbsp;<%topentry_day>,
&nbsp;<%topentry_year></i>
&emsp;<i class="fas fa-sync-alt">
&nbsp;<%topentry_modified_month:short>
&nbsp;<%topentry_modified_day>,
&nbsp;<%topentry_modified_year></i>

最後に

HTMLコードは上書きされると元には戻りません。

必ず、バックアップしながら作業してください。

関連記事
FontAwesome5Webアイコンフォント更新日表示FC2ブログ