Bloggerカスタマイズ講座08:ブログ投稿日時のマーク削除と変更



天宮です。


今回は、ブログ投稿日時のマークの削除
もしくは変更をしてみます。



ブログ投稿日時のマーク削除と変更

この変更はBloggerテーマの
HTML部分を編集することになります。

必ずダウンロードしたテーマの
コピーを作りバックアップしてください。

まずは現状の表示を確認してみましょう。


日時の横に時計のマークがありますね。


テーマをTerapadで開いて下記を検索します

<i aria-hidden='true' class='fa fa-clock-o'/>

                      <div class='article-list-title'>
 <p class='post-timestamp'>
                          <i aria-hidden='true' class='fa fa-clock-o'/>
  <b:if cond='data:post.dateHeader'>
     <script type='text/javascript'>var hiduke = &quot;<data:post.dateHeader/>&quot;</script>
   </b:if>
 <p class='kousin'>
                     <span class='post-timestamp'>
                          <i aria-hidden='true' class='fa fa-clock-o'/>
  <b:if cond='data:post.dateHeader'>
     <script type='text/javascript'>var hiduke = &quot;<data:post.dateHeader/>&quot;</script>
   </b:if>
※トップページ用と記事ページ用の2ヵ所あり


2ヵ所から class='fa fa-clock-o' を削除し
次のように編集すると
時計のマークが削除できます。

<i aria-hidden='true'/>

↑時計のマークが消えました



マークを他のモノに変更したい場合は、
fa-clock-o の部分を編集します。


Font Awesome

好みのアイコンを上記サイトでみつけます。

fa-pencil
ペンシルのデザインに変更してみます。

<i aria-hidden='true' class='fa fa-pencil'/>


イロイロためして好みのデザインにしてみてください




パンクズリストにHomeマーク設定

同じ流れでパンクズリストにも
アイコン設定してみます。

まずは現状の表示を確認してみましょう。

テーマを開き下記を検索

<span itemprop='title'>

4ヵ所ヒットしましたが、そのうち3か所は
<span itemprop='title'>の下に
Homeと書いてあります。

その3か所を下記のように編集します。

        <span itemprop='title'>
                            <i class='fa fa-home'/> Home
        </span>


<i class='fa fa-home'/> Homeに変更して
確認してみるとこのようになりました。


Font Awesome を使い他の部分でも
同じようにアイコンを表示させることも
できますから試してみてください。