サイドバーにサムネイル画像入りの新着記事を設置したい!忍者画像RSSが最適だった!

Ninja_GazouRSS_eye

Seesaaブログの新着記事一覧は、最近のバージョンではサムネイル画像の表示に対応していますが、Seesaaブログのサーバにアップロードされた画像からしか表示されません。
ましてや当ブログで使っている旧バージョンのテンプレートでは、サムネイルに対応すらしていません。
以前から何とかできないかと試行錯誤を繰り返していましたが、便利なサービスを見つけました。

忍者画像RSS

忍者ツールズというホームページやブログなどのアクセス解析、カウンターほか、様々なサービスを提供しているサイトです。
結構古くからあるサイトで、私もアカウントだけはかなり昔に取得してアクセス解析など使っていたことがありましたが、当時はイマイチ使い勝手が悪く、いつの間にか使わなくなって放置していました。

忍者ツールズ|ホームページ ブログ アクセス解析 カウンター メールフォーム

サイドバーにサムネイル付きの記事一覧を設置する方法を探していて、過去にSeesaaブログでJQueryを使えるように設定したことがありますが、あれもサムネイル取得できないかと思って試行錯誤していた一環です。

いろいろと調べていくうちに、たどり着いたのがこの忍者ツールズ提供の”忍者画像RSS”でした。

画像付きRSSブログパーツ | 忍者画像RSS (旧:忍者レコメンド)

設定と設置

忍者画像ツールズは、表示方法の設定が細かくできるようになっています。
表示方法から色の指定、サムネイルの大きさや記事領域の指定まで細かく指定できます。

サイトの登録

アカウントを持っていない場合は、忍者ツールズの”新規ユーザー登録”からアカウントを作成します。
N000
アカウントでログインできたら、忍者画像RSSのページヘ進みます。

忍者画像RSSのページトップから
N001
「忍者画像RSSを始める」ボタンを押します。

N002
表示させたいブログのURL、またはRSSフィードURLを入力します。

N003
入力されたサイトの検索が終了すると、サイトタイトルが表示されます。
問題なければ「このURLでつくる」ボタンを押します。

設定方法

サイトの登録が完了して、設定画面に入ります。

N004
実際にサイトに登録するコードとプレヴュー画面が現れます。

N005
設定用のメニューは、帯状の追従表示になっています。
サイドバー用に縦長の設定にして、プレヴューでスクロールを繰り返しても、常にメニューが表示されています。

N007_1
プレヴュー画面の左上のプルダウンメニューで、プレヴュー形式を幾つか選ぶことができます。
設置したい場所に合わせて、プレヴューを確認することができます。

N006
「レイアウト」タブでは、表示形式のテーマがいくつか用意されています。
画像のみであったり、テキストのみと言った表示もできます。

N007
「表示設定」タブでは、表示させる件数、列、サムネイル画像や記事領域のサイズを指定できます。
レスポンシブル表示対応で、縦横比率と最小サイズを指定することができます。

N008
ピクセル単位で固定サイズを指定することもできます。

N009
「色指定」タブでは、文字の色から背景色、枠の色まで細かく指定することができます。
パレットから選択することも、色コードを入力して指定することもできます。

N010
「オプション」タブでは、サムネイル画像の周りに表示させる項目を指定することができます。
フォントの大きさを指定したり、アイコンや日時、共有ボタンや記事本文の表示非表示を指定できます。
表示させる記事もランダム表示か日付順か、いいねの付いた数などで選ぶこともできます。

N011
「詳細表示」タブでは、記事タイトルの表示設定と余白の設定などができます。

設定項目は多岐にわたり、設置したい場所に合わせて、柔軟にデザインを調整することができます。

設置

Seesaaブログへの設置は、「コンテンツ」で行います。

S001
「デザイン」 -> 「PC」 -> 「コンテンツ」へ進み

S002
「自由形式」を設置したい場所へドラッグします。

S003
「自由形式」の変数画面を開き、出来上がったコードを貼り付けます。

コードを貼り付けたあとからでも、忍者画像RSSの管理画面から設定を変更すると、自動的に反映されます。

まとめ

ランダム表示や人気記事の表示をさせるためのものだと思っていたのですが、日付順という表示方法もあり、サムネイル付きの新着記事としても使えるため、探していた表示方法にピシャリとハマりました。

Seesaaブログは、無料ブログとしては自由度が高いことで有名ですが、やはり有料ブログと比べるべきではありませんね。
しかしやりたいことを何とかして実現しようと調べたりすることは、勉強になります。

スポンサーリンク







シェアする

フォローする