[blogger]サイズ自由のサムネイル表示で、ランダムに記事を表示可能なブログパーツ！『複眼RSS』

こんばんは！すなふ(@sunafu35)です。

確か全然関係事を検索していたはずなんですが、ふと見つけた「複眼RSS」という、RSSから取得した記事をサムネイル表示して並べる機能が、手軽に使えそうだったので紹介したいと思います。

テンプレートHTMLのバックアップは、お忘れなきようお願いします！

リンク

複眼RSS　－　トラフィックを増やすブログパーツ

このブログパーツは「記事中の画像」を自動的に取得して、サムネイル化するブログパーツです。 RSSフィードを使用するので、自動で更新されます。 ...

RSSからの取得ということで、記事内容やカテゴリに関連がある記事を表示するというようにはいきませんが、帯状に並べたり、タイル状にいっぱい並べたり。
デザインをある程度設定出来るので、サイトデザインに合わせやすいかなぁ・・・と。

今回は、タイトル下(ヘッダー部分)に横並びで表示されるように設置をしてみましたので、その方法を順を追って説明していきます。

設定方法

いつものことなのですが、私が使っているのがbloggerですので、bloggerでの設定方法を基準に書いていきますよ！
説明は、

1.) ヘッダー部分にガジェットを追加出来るようにする
2.) 複眼RSSのサイトで、コードを取得する
3.) ブログにガジェットで追加
4.) CSSで表示を調整する

こういった感じで進んでいく予定です。予定です（・・

1.) ヘッダー部分にガジェットを追加出来るようにする

bloggerの公式テンプレートが、全部そうなのかは分かりませんが、恐らくデフォルトだと、『管理画面＞レイアウト』からの、ガジェット追加は出来ないようになっていると思います。

なので、まずはそれを変更してあげないといけません＞＜

手順は、
●『管理画面＞テンプレート＞HTMLの編集』を開きまして・・・

●ページ内検索で「header1」あたりを検索・・・。
公式テンプレートは、大体は「ブログタイトル」を設定しているウィジェットが「header1」で設定されていましたので、これが一番早いんじゃないかな？と思います。

もし、名前が違っていたら、画像を参考にして探すか、「要素の検証」などで該当する部分を確認してみてください。

●見つかりましたら、その近くに『b:section class="header" id="header" maxwidget=』と続く部分（画像の矢印先）があるはずですので、

『maxwidget="初期設定数値" showaddelement="no"』となっている部分を
『maxwidhet="2" showaddelement="yes"』

と変更して下さい。
『maxwidget』で、ガジェットの最大数。『showaddelement』をyesにするのは、位置変更などを行えるようにするためです。

これで、『管理画面＞レイアウト』から、ガジェットの追加が出来るようになっていると思いますので、確認してください。間違って『タイトル』用のガジェットを削除したりしないようにして下さいね（・・

このように、「ガジェットを追加」が増えていたらおっけぃです。

2.) 複眼RSSのサイトで、コードを取得する

●続いて、複眼RSSのサイトに行って、サイト中央付近にあるリンク【「複眼RSS」　貼付けコード生成】をクリックして、コードの作成を行います。

大きなところでは画像内でテキスト足しておきましたが、大体設定はこんな感じです。
テーブル行数と列数を、希望する表示によって変えるのをお忘れなく（初期状態が１ｘ１になっていたため）。

画像サイズですが、画像1個につきの大きさなので、例えば横並びで5個表示がいい！と思った時には、少なくとも横幅サイズｘ5ですし、「横パディング」を付けていたら横パディングの数値ｘ10になることも頭に入れておくと、希望の表示に近づけ易いと思います(≧∇≦)

実際には、「貼り付けコード生成」ボタンを押すことで、プレビュー画像も出ますので、気の済むまで色々設定を変えるのがいいと思います。もしかしたら、この先ずっと表示することになるかもしれませんしね！

また、「スキン」については、「枠線」の表示を利用してみました。
少し文字があったほうが馴染む感じがしましたので・・・。

3.) ブログにガジェットで追加

設定出来たら、「貼付けコード生成」を力の限りクリックすると

画像のように、コードとプレビュー画面が生成されます。

●プレビューで表示状態を確認して、希望に近かったら、生成されたコードをコピーして、bloggerの『管理画面＞レイアウト』画面で、ヘッダー部分の「ガジェットの追加」をクリックして、『HTML/javascript』ガジェットに、コピーしたコードを貼り付けて下さいね。

貼り付けられたら、その画面のまま、ガジェットをタイトルガジェットの下にドラッグして移動しておきます。

●この時点で、一度ブログを別タブで開いてみて、表示を確認してみて下さい。私が試したときは、後は余白を設定するかなぁ・・・ってくらいだったのですが、どうですか？(・ｗ・)

4.) CSSで表示を調整する

大きく表示に崩れがなければ、CSSを使って最後の調整をしていきます。

●CSSでの調整には、追加したガジェットのクラス名が必要ですので、その確認から進めましょう！
初めに説明して、変更した『HTMLの編集』の、箇所がヘッダー要素の部分なので、ガジェットを追加すれば、そこに増えていることになります。

先程も貼った画像ですが、私の場合だと、オレンジ線の下『HTML7』が、追加されたガジェットのクラス名になります。タイトルのガジェット下に追加されているのが分かりますね（・・

では、追加したガジェットのクラス名が判明したというところで・・・。

●『管理画面＞テンプレート＞カスタマイズ＞CSSの追加』を開いて、

#HTML7{
  margin:-7px 0 -20px 0;
}
#HTML7 .widget-content iframe{
  border-radius:20px;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
}

あくまでも私の設定例ですが、marginで余白を設定して。border-radiusで角丸を作ってみたところ、思ったよりデザインに馴染んだので、採用してみることにしました。

さぁ！完成！

これで、一番冒頭に貼り付けたような、横並びのサムネイル表示が出来ました。

最近の記事か、ランダム記事かという制約はありますが、RSSからの表示というところで、フリッカーのRSSを拾ってきて、画像集を作ったりという使い方も出来るようになっていますし、RSS取得にしては、表示が早いところも魅力になります。

見た目の賑やかしにもいいと思いますし、サイトの回遊性を高めるにもある程度役に立つかもと期待しています(*ェ`*)

ところで、このサイト・・・ちょっとガジェットが増えすぎてきたかな？と思わないでもないので・・・、ちょっと整理する必要がそろそろあるかもしれませんねｗ

それではまた！

サイトの各要素を調べたりするのは、よかったらこちらの記事も参考にしてみてくださいね(ﾟｰﾟ*)