Bloggerには最新記事を表示させるガジェットが搭載されていない。

そのため、これを導入するには自分で設定するか、外部から取り入れることになる。

この最新記事を追加する方法にて、便利なサイトを発見したので ここに書き残しておく。

導入方法

ガジェットの提供元サイトにアクセスする

・SNEEIT（Blogger Random ? Recent ? Specific Label Posts Widget ? All in One Post Feed Widget）

まずは上のリンクから、ガジェット提供元サイトにアクセスする。

海外サイトだが、Chromeの自動翻訳機能などを使えば内容は大体理解できると思う。

最新記事ガジェットの設定をする

ページの中間あたりにガジェットの設定をフォームがある。

ここに自分の好みの設定を入力し、フォームの下の方にある「ウィジェット追加」ボタンをクリックする。

※画像は自動翻訳機能で翻訳したもの

Bloggerの要素追加フォームにて、導入するブログを選択する

「ウィジェット追加」をクリックすると、Bloggerのウィジェット追加フォームが現れる。

ここで「導入したいブログ」を選択し、「ウィジェットのタイトル」を入力する。

そして「ウィジェットを追加」ボタンをクリックすると、そのブログに最新記事ガジェットが追加される。

なお、場所はサイドバーの最上部に導入されるので、後は自分で好みの位置に設定する。

カスタマイズ方法

ガジェットの構成について

このガジェットは、Bloggerの「HTML/JavaScriptガジェット」の中で設定が完結している。

ガジェットの中には「CSS」と「JavaScript」が設定されているので、この中をいじってカスタマイズする。

CSSのカスタマイズ

このガジェットのCSSは、<style type="text/css">～</style>の中のものになる。

CSSの内容をいじることで、最新記事ガジェットの装飾をカスタマイズすることができる。

このCSSのセレクタに説明をつけると、以下のようになる。

• .bcd140526_post_feed li.item：リストの外枠
• .bcd140526_post_feed ul：リスト一覧の外枠
• .bcd140526_post_feed li.item.item-0：リストの一番上
• .bcd140526_post_feed li.item h3.title：記事タイトル
• .bcd140526_post_feed li.item div.meta：投稿者・コメント数・投稿日時の外枠
• .bcd140526_post_feed li.item div.meta .meta-item：投稿者・コメント数・投稿日時
• .bcd140526_post_feed li.item p.snippet：要約文（抜粋）
• .bcd140526_post_feed.list a.thumbnail：リスト表示時のサムネイル全体
• .bcd140526_post_feed.list a.thumbnail img：リスト表示時のサムネイル画像
• .bcd140526_post_feed li.item a.cate：ラベル
• div.bcd140526_post_feed.column a.thumbnail：カラム表示時のサムネイル全体
• div.bcd140526_post_feed.column a.thumbnail img：カラム表示時のサムネイル画像

JavaScriptのカスタマイズ

このガジェットのJavaScriptは、<script type="text/javascript">～</script>の中のものになる。

JavaScriptの上部の内容をいじることで、最新記事ガジェットの設定をカスタマイズすることができる。

このJavaScriptのコードに説明をつけると、以下のようになる。

• var bcd140526_show_thumbnail：サムネイルの表示（true/false）
• var bcd140526_show_label：ラベルの表示（true/false）
• var bcd140526_show_comment_numbers：コメント数の表示（true/false）
• var bcd140526_show_date：投稿日の表示（true/false）
• var bcd140526_show_author_name：投稿者名の表示（true/false）
• var bcd140526_show_readmore：Readmore（続きを読む）の表示（true/false）
• var bcd140526_show_snippet：要約文（抜粋）の表示（true/false）
• var bcd140526_hide_copyright：コピーライトの表示（true/false）
• var bcd140526_snippet_length：要約文（抜粋）の表示文字数（数値）
• var bcd140526_post_count：記事の表示数（数値）
• var bcd140526_thumbnail_size：サムネイルのサイズ（数値）
• var bcd140526_sort_by：記事の表示順（latest:最新/random:ランダム）
• var bcd140526_index_label：表示させる特定のラベル名（ラベル名）
• var bcd140526_design_style：表示スタイル（column:カラム/list:リスト）
• var bcd140526_date_format：投稿日時のスタイル（mm/dd/yyyy）
• var lang_readmore：Readmoreの文字列（文字列）
• var HOST：サイトURL（特にいじる必要なし）

トラブルシューティング

CSSで設定しても画像サイズが変わらない

当ガジェットの画像サイズはJavaScriptの設定が優先される。

そのため、JavaScriptの「var bcd140526_thumbnail_size」で設定する。

なお、この数値はサムネイルの範囲の設定にもなる。

画像を左・タイトルを右にしたい

Bloggerの人気の投稿ガジェットのように、画像を左・タイトルを右にしたい場合は以下のようにする。

・「div.bcd140526_post_feed.column a.thumbnail {}」に「float:left;」を追加

サムネイルを正方形にしたい

サムネイルを正方形にしたい場合は、以下のように設定する。

・「div.bcd140526_post_feed.column a.thumbnail img {}」に同サイズの「width:数値px;」「height:数値px;」を設定
・サイズ比を固定したい場合は「object-fit: cover;」を追加する