Ad Code

ピックアップ

6/recent/ticker-posts

Bloggerの日付を変更させたい!更新日を表示させる方法

Bloggerの日付を変更させたい!更新日を表示させる方法

Bloggerブログを使う時に、日付の表示方法についての悩みは意外と多いのではないでしょうか?

匿名画像

前に書いた記事が古くなって、他の記事に埋もれているような気がする…

という相談が、Bloggerユーザーから聞こえてきそうです。

ひもくみ画像

特に、新しさを求められるような記事だと日付の更新は必須ですよね!

しかし、Bloggerではそもそも更新日を表示させる機能は付いていません。

それでは、どのようにして記事の日付を変更すれば良いのか?

この記事では、このようなお悩みに関するアンサー記事となっております。

Bloggerの日付ってどこにあるの?

Bloggerの日付はたいていタイトルの下にあります。

大体のBloggerテンプレートは、公開日を表示させる事は出来るのですが、更新日までを表示させる事が出来ません。

ひもくみ画像

更新日を表示させるためには、少しBloggerのHTMLをいじる必要があります!

Bloggerの管理画面にある左メニューの「テーマ」を選びましょう。

すると、こんな画面になるかと思います。

Bloggerのカスタマイズ画面

この画面の「カスタマイズ」と書かれているボタンをクリックしましょう。

すると、いくつかメニューが表示されます。

その中の「HTMLを編集」を選びましょう。

ひもくみ画像

すると、画面にずらーっとプログラミングコードが表示されるかと思います。

そこで、「Ctrl+F」(検索)を押して以下のコードを

  1. 「Ctrl+C」:コピー
  2. 「Ctrl+V」:ペースト

して探してみて下さい。

<!-- Post Timestamp -->

Bloggerに元々あるテンプレートにはないかもしれませんが、Bloggerテンプレートをダウンロード又は購入した方はこのコードが見つかると思います。

おしゃれなBloggerテンプレートに変更する方法については、

こちらの記事も併せてお読み下さい。

もし見つからなければ、

<b:includable id='postTimestamp' var='post'>

こちらも探してみて下さい。

更新日を表示させるためのコード

さて、ここからが本格的に更新日を表示させた日付の変更方法についてです。

Bloggerで記事の公開日/最終更新日を表示してみた

この記事を参考にして、さらに自分なりのコードを付け足しています。

Post Timestamp」というコードの近くに、以下のコードが見つかるでしょうか?

<b:if cond='data:allBylineItems.timestamp'>
 <span class='post-date published' expr:datetime='data:post.date.iso8601'><data:post.date/></span>
</b:if>

全く一緒かどうかは分かりませんが、少なくとも <b:if>~ </b:if>で囲まれているコードです。

そのコードを、以下のコードに置き換えて下さい。

<!-- Post Timestamp -->
<br />
<div align='right'>
<b:if cond='data:post.date != data:post.lastUpdated'>
<span class='fa fa-history'/>
  <time itemprop='data:post.dateModified.iso8601'>
    <b:eval expr='data:post.lastUpdated format &quot;yyyy/MM/dd&quot;'/>
  </time>
</b:if>
<span class='fa fa-calendar'/>
<time expr:datetime='data:post.datePublished.iso8601'>
  <b:eval expr='data:post.date format &quot;yyyy/MM/dd&quot;'/>
</time>
</div> 

投稿日と更新日のデザイン変更

ここからは、あなたなりの投稿日と更新日のデザインを変更出来る点をご紹介して行きます。

<br />

まず、このコードに関してですが「改行」を意味します。

もし改行せずにそのまま投稿日と更新日を表示させたい場合は、このコードを削除して下さい。

<div align='right'>

私は今回、日付を右側に表示させました。

もし中央に持って来たい場合は、「'right'」を「'center'」としましょう。

もし左側に表示させたい場合は、このコード自体を削除して下さい。

ただし、削除する場合は閉じタグである「</div>」も忘れずに削除して下さいね。

&quot;yyyy/MM/dd&quot;

日付の表示方法を変更させるには、スラッシュ部分を編集する必要があります。

例えば、「yyyy年MM月dd日」と書き換えると、「2011年02月15日」と表示されます。

<span class='fa fa-history'/>

日付のアイコンを変更させたい場合は、「fa fa-history」という部分を違うアイコンに置き換えると変更出来ます。

新しいアイコンは「Font Awesome」から探す事が出来ます。

アイコンを探すと、左上にアイコンのコードが表示されています。

<i class="far fa-calendar-alt"></i>

このコードの「far fa-calendar-alt」をコピペしましょう。

もしかしたら、「fa-〇〇〇」という部分だけしか適用しないかもしれません。

ひもくみ画像

これは、BloggerがFont Awesomeの旧バージョンを採用しているからかしら?

と思っていますが、本当のとこは分かっていません。

投稿の公開日を「自動」にする

この更新日を表示させる方法を使っても、Googleで検索される時には更新日が表示されません。

ひもくみ画像

公開日の方が表示されるんですね

その場合、どう頑張ってもGoogleの検索ページであなたの記事は「古い」という烙印を押されてしまうんですよ。

それでは、本当の意味で記事を新しく更新させる方法はないのか?

唯一の方法は、公開日を「自動」にして更新させることです。

Bloggerの公開日を「自動」にする方法

この画像の通りに、公開した記事を「自動」にして更新してみて下さい。

すると、URLを変更することなく記事を更新させる事が出来ます。

実際に、この「Bloggerおしゃれテンプレートに変更させる5つのステップ」の記事は、

https://www.japaneo.co/2015/03/Free-Blogger-Templates.html

2015年3月に公開されたものです。

その記事をリライトして日付を更新したら、Googleでの検索結果も改善されました。

ひもくみ画像

更新前は2ページ目だったけど、更新後は1ページ目に表示されましたよ!

このように、日付の更新はSEOにとっても重要な要素なのです。

これらの方法を知ったあなた!

ぜひ今からでも、日付の更新を試してみて下さいね。

Reactions

コメントを投稿

0 コメント

Ad Code