Google Bloggerのガジェットにサムネイル付きの最新記事を表示する方法

サムネイル付き記事

 これまで無知なクセにブログをいじりすぎて変更箇所をメモしてなかったことが災いし何にも覚えてないんです(T_T)
CSSからいじってしまうとバックアップ/復元しても ちゃんと直らないことがあって昨日も2日間復旧にかかって懲りたので今後は備忘録記事も書いておくようにします。(^^)

Bloggerガジェットには「人気の投稿」はサムネイル付きで表示してくれるものがありますが
「最新の記事」については、その他のガジェット「Recent Posts」というものがあるのですが上手く動作しなくてサムネイルが表示されません。

スポンサーリンク

複眼RSSの設置方法

良い方法はないかと検索して
海外の「LinkWithin」を試しましたが
日本のブログパーツにもっと良いものがあったので設置しました。

複眼RSS - アクセスを増やすブログパーツ

まずは、↑こちらのページから
「複眼RSS」 貼付けコード生成(無料)をクリック。

さっそく設定画面となります。
一番下の「生成」ボタンを押すとプレビューが見られ
後から変更も簡単にできるからご自身のブログにあった数値を色々試してみて下さい。

左がデフォルトの設定で、右が私のブログの設定値です。

複眼RSS 設定1

角丸サイズ サムネイルの角に丸みを入れるサイズです。

画像表示幅 私のブログはテンプレが1番目の画像は正方形で表示される作りのため、最初の画像は正方形に切り抜いてからUPしてるのでサムネイル幅も正方形としました。
ブログによっては長方形で表示されるものもあり、表示される縦横比に合わせた幅を設定した方が綺麗だと思います。

パディング 横と縦の隙間です。

テーブル 行数の数が表示される記事数になり、列数は横並びの数です。

URLからブログの・・・ 自分のブログのURLを入れ「調査」をクリック。

複眼RSS 設定2

スキン 標準のままではサムネイルのみ。
     枠線を選択でサムネイルとタイトルが表示されます。

文字幅 横は設置するサイドバーに合わせる。
     縦はサムネイルの縦幅に合わせると綺麗です。

幅と色が分からない場合は?
テンプレートカスタマイズ「幅を調整」で調べることができます。
しかし、私のように海外のテンプレを利用してる場合は上記項目は開かないため ブログのページを表示した状態で調べたいサイドバー上で
(ブラウザがChromeの場合)
右クリック要素を検証 をクリック。

複眼RSS 設定3

下側に開いた検証画面にて、目的の場所の色が反転する項目を見つけてやれば幅が表示され、右側の覧では色も探せるので 目的の色が見つかればクリックしてコピーしておきます。

複眼RSS 設定4

取得件数
RSSフィードから取得する記事の数です。
行数で設定したサムネイル(記事)の数を入力したのでいいですが、
左画像の「過去記事からランダム表示」したい場合などは過去幾つまでの記事を対象にするかにもよります。
とりあえず「100」と入力。
あとはお好みで、
私は「リンク先を同じウインドウ」にチェックしました。


複眼RSS 設定5

カテゴリー 自分のブログ にあった項目を選択。

リンク先へのアクセス どこからリンクしたかを決めます。
送らない を選択するとリンク元が「fukugan.com」になります。

しかし!
私はアクセス解析を導入してないので「送らない」でよかったのですが、最初に「送る(html版)」を選択して大変なことになりました。
h3タグと背景色のレイアウトが総崩れしてしまい
同時にCSSの編集もした後だったため、何が原因か分からず復旧作業に2日間もかかってしまいました。(^^;)
結局原因は「送る(html版)」を選択したためで
「送らない(iframe版)」にすることで元に戻りました。
あと、「送る(html版)」だと他人のRSSを引っ張ってくることもありました。

NGワード ちょうどこの記事を書いてる途中で追加された機能です。
見出し(タイトル)とNGワードが一致した場合、サムネイルを回避します。

RSSのURLを入力

http://ブログ名.blogspot.com/feeds/posts/default?alt=rss

最後に「貼付けコード生成」をクリック。

一番下にプレビュー画像が出るので変更があれば設定を見直して下さい。

問題なければ(あとからでも簡単に変更できます)コードをコピーして
Blogger「レイアウト」から「ガジェットを追加」
「HTML/JavaScript」を選択
タイトルを、私は「最新の記事」と入力してコードをペースト。
ガジェットの位置は「レイアウト」の画面から自由に移動することも可能です。

配置後に変更する場合は
生成されたコード内の下方に

↑このURLを辿れば 設定した入力画面へ戻ることができるので
変更値を入れ再度「生成」すれば簡単に変更できます。

これで以前はテキストだけで「Recent Posts」と表示してたサイドバーが かなり見やすくなりました♪(^^)v

Google Blogger には無い機能なので絶対に追加をお勧めしたいブログツールです。

別のツールで「新着記事」を表示する方法

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る