Bloggerのサイドバーに新着記事を表示する方法

カスタマイズ
スポンサーリンク

どうも、kazuです。
当ブログはBlogger(テンプレートはVaster2)で書いています。
Bloggerでブログを書いている方は知っているかと思いますが、不思議なことにBlogger(Vaster2)は標準機能でサイドバーに「新着記事」が表示できません。
「人気記事」はガジェットの追加で表示できるのにナゼ? って感じです。

そこで今回は、ガジェットを追加してBloggerのサイドバーに新着記事を表示する方法をご紹介します。

スポンサーリンク

Bloggerサイドバー新着記事の表示手順

次のサイトへアクセス ※英語表記です。
https://bloggersorigin.com/recent-posts-widget-for-blogger/

新着記事のテンプレート(全5種類)

1. Sliding Recent Posts Widget
サイズの違うアイキャッチ画像がオシャレな感じ。

2. Recent Post Widget with Thumbnail
左にアイキャッチ画像、右に記事タイトルといたってオーソドックス。

3. Gallery Style Widget
アイキャッチ画像のみ表示されるので、写真メインのブログにオススメ。

4. Multi Colored Widget
カラフルでにぎやかな感じ。自分好みの色に変更可能。

5. Simple Recent Posts Widget
アイキャッチ画像は表示されない為、設定していない方にはシンプルでいいかも。

新着記事ガジェットの追加

1. 上の5つのテンプレートの中から選択し、コードをコピーする
これは完全に個人の好みです。
ちなみに私は「人気記事」のデザインに合わせる為、「2. Recent Post Widget with Thumbnail」を選択しました。デザインの変更については後述します。

2. Blogger管理画面「レイアウト」→「ガジェットの追加」をクリック

3.「HTML/JavaScript」を選択

4. タイトルを入力して、コードを貼り付ける(例:新着記事)

5. 表示する記事数・URLを変更する → 「保存」をクリック
※選択したテンプレートによっては、この作業は不要な場合があります。

6. 好きな位置にガジェットを移動する → 「配置を保存」をクリック

おしまい!お疲れさまでした。

変更後の確認

早速、自分のブログを見てみましょう!

う~ん・・・見た目が何か残念です(-ω-;)
記事の説明文がはみ出していたり、全体的に統一感がなかったり、いかにも「後付け」みたいな。
いろいろと手直しが必要ですね。

気にならない方はもちろん、そのまま使ってもOKですが、私はこういうの気になるタイプなんです。
ってことで続いて、デザインを変更していきましょう!

スポンサーリンク

新着記事のデザインをカスタマイズ

ここからは私が選択したテンプレート「2. Recent Post Widget with Thumbnail」のデザインを変更していきます。
※他のテンプレートを選択した場合、コードが違いますのでご注意下さい。

デザイン変更の前に

ガジェット内でコードを編集しても良いですが、かなり見づらいです。

チョット手間ですが、メモ帳(テキストファイル)やテキストエディタに一旦、コードをコピーして編集後、上書きする方が作業しやすいと思います。
ちなみに私は、「Mery」というテキストエディタを使ってます。

記事の外枠を消す

「.recentposarea{・・・}」内の ” border:1px solid #ddd; ” を削除

サムネール(画像)の外枠を消す

「.recentposarea img{・・・}」内の ” border:1px solid #ddd; ” を削除

ページナビ(Previous・Home・Next)の外枠を消す

「#rpnavigation{・・・}」内の ” border:1px solid #ddd; ” を削除

背景色を変更

「.recentposarea{・・・}」、「.recentposarea img{・・・}」内の ” background:#fff; ”
「.recentposarea:hover{・・・}」、「#rpnavigation:hover{・・・}」内の ” background-color:#fefefe ” を変更

記事の高さの変更

「.recentposarea{・・・}」内の ” height:79px; ” の数値を変更

アイキャッチ画像のサイズ変更

「.recentposarea img{・・・}」内の ” height:70px;width:70px ” の数値を変更

記事説明文(要約)の非表示

「.recentposarea p{・・・}」内の最後に ” ;display:none; ” を追加

設定済みのフォントを適用する

「#loadrecentpost{・・・}」、「#rpnavigation{・・・}」、「#rpnavigation a{・・・}」内の ” font-family:XXXXXX;” を削除

スポンサーリンク

マウスオーバー時の文字色の変更

デフォルトでは、記事のタイトルにマウスカーソルを合わせても、カーソルが矢印から手のアイコンに変わるだけで文字の色は変わりません。

コードを追加することでカーソルを合わせた時に文字の色を変えることができます。
※カラーコード「#008ec2」の部分はお好みで

記事のタイトル

「.recentposarea:hover{・・・}」の下に次のコードを追加

【追加コード】

.recentposarea a:hover{color:#008ec2!important;}

ページナビ(Previous・Home・Next)

「#rpnavigation a{・・・}」の下に次のコードを追加

【追加コード】

#rpnavigation a:hover{color:#008ec2!important;}
スポンサーリンク

新着記事のデザイン変更前と変更後

変更前と変更後を比べてみると、違いは一目瞭然!
イイ感じに仕上がりました。

スポンサーリンク

参考:当ブログの「新着記事」デザイン

当ブログの新着記事のコードを参考までに載せておきます。
上でご紹介したデザイン変更箇所以外に余白を少々いじってます。

スポンサーリンク

さいごに

いかがでしたでしょうか?
「人気記事」はガジェットを追加すれば表示できるのに対し、「新着記事」に関してはガジェットすらありません。

追加したとしても他のガジェットとデザインが大きく違っていたり、全体的に浮いてしまったり、……。

  • サイドバーの「人気記事」のデザインに合わせたい!
  • デザインを変えて全体的に統一感を持たせたい!

そう思っている方のお役に立てましたら嬉しいです。

最後まで読んでいただき、ありがとうございましたm(_ _)m
それではまた~!

コメント