すたすた式
Blogger Vaster2
5月の初旬ごろからでしょうか、いままで使わせてもらっていた5+ Recent Posts Widget for Blogger: Latest and Stylish Widgets - Bloggers Origin の Recent Post Widget with Thumbnail がうまく機能しなくなりました。サムネイル画像を取得できなくなったようです。（2020年5月21日：再びサムネイル画像が表示されるようになったので戻しました。）
現状
やりたいこと
サムネイル画像があるタイプの最新記事（新しい記事）を表示したい。
https://bazzhood.blogspot.comの部分を自分のブログのURLに変更
https://bazzhood.blogspot.com
<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については解決出来ませんでした。
このコードは記事タイトルの右側に数字がつくタイプを変更？しているのが原因のようです。
CSSのul.recent-posts-container li:beforeの部分を削除しました。
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のコロン:の位置を変更すると数字が表示されました
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%; }
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>
は削除しても問題ないようです。
元コードは圧縮されていたのでツールを使ってもとに戻してから調整しました。
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿