最新記事（新しい記事）ガジェットを変更しました。(Resent Posts Widget)

5月の初旬ごろからでしょうか、いままで使わせてもらっていた5+ Recent Posts Widget for Blogger: Latest and Stylish Widgets - Bloggers Origin の Recent Post Widget with Thumbnail がうまく機能しなくなりました。サムネイル画像を取得できなくなったようです。（2020年5月21日：再びサムネイル画像が表示されるようになったので戻しました。）

現状

• サムネイル画像が表示されない

やりたいこと

• サムネイル画像があるタイプの最新記事（新しい記事）を表示したい。

  • こちらのサイトのコード #5を使用しました。

目次

• 基本設定
• 少しカスタマイズ
• 1.記事タイトルの右側の文字が欠ける場合がある
• 2.フォントを変更したい
• その他設定
• 変更してみて

基本設定

https://bazzhood.blogspot.comの部分を自分のブログのURLに変更

<script src="https://bazzhood.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
↓
例
<script src="https://sutasutashiki.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

少しカスタマイズ

デフォルトで気になった点

1. 記事タイトルの右側の文字が欠ける場合がある
2. フォントを変更したい
3. サマリー（スニペット）が表示されない場合がある

1、2は解決出来ました。3については解決出来ませんでした。

1.記事タイトルの右側の文字が欠ける場合がある

このコードは記事タイトルの右側に数字がつくタイプを変更？しているのが原因のようです。

CSSのul.recent-posts-container li:beforeの部分を削除しました。

削除するコード

ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; right : 0px; font-size: 14px;font-weight: bold;color: #fff;background #000000:;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}

（CSSの部分のみ削除しました。理解が及ばないのでJavaScriptの部分はそのままにしました。）

ちなみにCSSのul.recent-posts-container li:beforeのbackgroundのコロン:の位置を変更すると数字が表示されました

ul.recent-posts-container li:before {
  content: counter(countposts, decimal);
  counter-increment: countposts;
  z-index: 1;
  position: absolute;
  right: 0px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
 /* background #000000: ; */
  background: #000000;
  line-height: 25px;
  height: 25px;
  width: 25px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

2.フォントを変更したい

Google Fontsを使っているようなのでHTMLは削除、CSSは変更しました。

HTML 削除

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

CSS 変更

.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
のfont-family:'Oswald', sans-serif;を削除

↓

.recent-posts-container {font-size:12px;}

必要であれば別途font-familyを指定

その他設定

Read moreとコメントリンクを非表示に

var readmorelink = false;
var showcommentslink = false;

フォントの大きさを調整しました。

変更してみて

シンプルにフィードガジェットを使おうと思いましたが、サムネイル画像を表示したかったので今回調べて設置しました。

機能面はおおむね満足しています。細かいデザイン等は後で調整をしたいと思います。

また元コードにある

<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" </a>

は削除しても問題ないようです。

元コードは圧縮されていたのでツールを使ってもとに戻してから調整しました。