Blogger Labo:【Blogger】最新記事を追加する方法【Vaster2】

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

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

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


導入方法


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


SNEEIT(Blogger Random ? Recent ? Specific Label Posts Widget ? All in One Post Feed Widget)

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

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

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



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

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

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

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


Blogger Labo:【Blogger】最新記事を追加する方法【Vaster2】

「ウィジェット追加」をクリックすると、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;」を追加する