今回はBloggerのテンプレートQooQに最終更新日、更新アイコン、投稿日の前に鉛筆アイコンを追加するカスタマイズをしましたので手順を共有させていただきます。
いろんな人のブログを見ていると、最終更新日が載っているブログが多くあり「あれ良いな〜」と思っていました。手順などを調べるとき、やはり日付が古そうに見える記事は自分もスルーすることが多いです。少し古いとやり方が違ったりするので、情報は鮮度が命ですよね。
この記事でわかること
- 投稿日の前に鉛筆アイコンを追加する方法
- 最終更新日を追加する方法
- 最終更新日の前に更新アイコンを追加する方法
私の環境
- ブログ：Blogger
- テンプレート：QooQ v1.29
- アイコンフォント：Font Awesome v5.11.0（無料版）
注意事項
最終更新を追加するためにリンクさせていただいたHARUさんのサイトはFont Awesome 4です。一方私はFont Awesome 5を使用しており、Classの名称が異なるためアイコンフォントは5用に置き換えています。
Font Awesome 4を使用する場合は、4用のアイコンを探してください。ちなみに4と5を併用してみたところ、特に問題なく動きました。おすすめはしませんが、よく分からない場合は「両方使う」が最終手段と思われます。
追加手順
バックアップ
テーマに変更を加えるので忘れずにバックアップを取っておきましょう。
ダッシュボードの「テーマ」→「カスタマイズ」横のボタンからバックアップできます。
最終更新日の追加
最終更新日に関してはこちらのサイトを参考にさせていただきました。まずはこちらの手順で最終更新日を表示させるとこまで行きましょう。
【 QooQ カスタマイズ 】 Blogger ブログで最終更新日を表示させたいこの時点で、
投稿日 更新アイコン 最終更新日
になっているはずです。
Font Awesome 5の追加
この記事にある通りFont Awesomeを使うには、いくつか手段がありますが今回はCDNを使用します。
「テーマ」→「HTMLを編集」でコードを表示し、以下のコードを<head> から </head>の間に埋め込みます。
<!-- Font Awesome 5 CDN -->
<link href='//use.fontawesome.com/releases/v5.11.0/css/all.css' rel='stylesheet'/>
Font Awesome 5を使う準備は以上です。とっても簡単ですね。
Font Awesome 5のアイコンに変更
次に更新アイコンをFont Awesome 5対応のものに変更します。そのままだと投稿日と更新アイコンが近く感じるので、ついでにアイコンの位置も微調整したいと思います。
HARUさんのサイトで挿入したはずの、以下のコードを探してください。
<!-- 更新マーク -->
<i aria-hidden='true' class='fa fa-refresh' style='margin-left:0.5em'/>
これをクラスとスタイルの部分を次のコードのように変更するか、丸ごと入れ替えてください。
<!-- 更新マーク -->
<i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:1em'/>classでアイコンを指定しており、styleで位置を指定しています。必要に応じて好みに変更してください。
鉛筆アイコンの挿入
最後に鉛筆アイコンを投稿日の前に挿入していきます。
以下のコードを探してください。先程の更新マークというコメントのすぐ上にあるはずです。
<p id='single-header-date'>
<data:post.dateHeader/>
次の一行を<p id='single-header-date'>と<data:post.dateHeader/>の間に挿入してください。
<i aria-hidden='true' class='fas fa-edit' style='margin-right:0.1em'/>
これで全て完了です。
正しく動作するかプレビューで確認してみてください。全て表示されていれば成功です。最終更新日はHARUさんのサイトにある通り、デフォルトだと異なる日付で更新しないと表示されませんのでお気をつけ下さい。
変更箇所まとめ
今回変更した領域です。該当箇所を丸ごとコピペでもOKです。
<p id='single-header-date'>
<i aria-hidden='true' class='fas fa-edit' style='margin-right:0.1em'/>
<data:post.dateHeader/>
<!-- 更新マーク -->
<i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:1em'/>最後に
いかがでしたか？
ご質問やアドバイスがあればお気軽にコメントからお願いします。
その他のカスタマイズ例はこちらからどうぞ。ソートできるサイトマップを紹介しています。
【Blogger】ソートできるリスト型HTMLサイトマップ【設置編】
0 件のコメント:
コメントを投稿