RSSを使って新着記事をサムネ付き表示できるツール【忍者画像RSS】

-記事をシェアする-

ブログやWEBサイト等を運営していると、「今週の人気ランキング」や「新着記事一覧」などの表示は定番であり、ほかのサイトでもよく見かけるかと思います。

ブログサイトの標準サービスでもそのような表示は可能ですが、細かく設定できるシステムはあまりありません。今回は当ブログでも使用しているより詳細な設定が可能な、どの形式のWEBサイトにも対応したRSS読み込みサービス「忍者画像RSS」を紹介しようと思います。

スポンサーリンク

忍者画像RSSの使い方

初回RSS登録と設置

20160811-141356.jpg

まず、忍者ツールズの会員登録を済ませ、忍者画像RSSをクリックすると、以下の様な登録画面に移行します。ご自身のHPのURLを入力しましょう。RSSフィードが分かる人はそちらでもいいです。

大抵のブログサイトは自動でRSSフィードURLを自動認識してくれるので、HPのトップページURLを入力するだけでOKです。RSSフィードの取得が始まります。※初回は少し時間がかかります。

取得が終わったら、「このURLで作る」をクリックしてください。

20160811-142147.jpg

基本的にはこれだけで、既にサムネ付きの新着記事一覧を表示するJavaScriptが自動生成されます。上記は筆者のサイトを入力した例ですが、何も触らなくてもこのような感じでレイアウトが自動設定されます。

※基本的にはレスポンシブで、どのブログサイトにも自動でサイズを変化させてくれます。調査委な調整等は次の項で解説します。

20160811-142719.jpg

あとは同じページに表示されている。JavaScriptタグを任意の所にそのまま貼り付ければ、先ほどのサムネ付き記事一覧が表示されるようになります。このタグは固定なので、後からレイアウトを変更しても記述を変える必要はありません。

レイアウト調整等

20160811-143249.jpg

チャンネル→デザイン設定から先ほどのデザインを変えることが可能です。文字の色や形、幅の固定、改行の指定、取得記事の数指定など細かに設定することが可能です。上記画像は説明文を追加で下に表示させた例です。

他にもカルーセル(スライドして動くサムネ)や縦並び、横並び、下から出現するポップアップなど、個性的な記事表示方法を指定することが可能です。

20160811-143829.jpg

上記はスマホやサイドバー用に表示させるために一行表示にしたレイアウト例です。このように縦に向かって下げるようなスタイルにすることも可能なので、様々な場面で活用することが可能です。

個人的に面白いと思ったのはカルーセルですかね。横に自動でスライドするので、表示自体に動きがあります。よって閲覧者の目に止まりやすいように感じました。

また、詳細設定から記事の並び順も自由に変更可能です。新着記事順、人気記事順、ランダム表示など、自由に変更できますので、設定したい場所に合った並び順に変更しましょう。

忍者画像RSS 応用編

設定しておくべき項目

20160811-144419.jpg

設置してそのままの設定だと、クリックされた際に変なアンテナサイトに飛ばされてしまいます。チャンネル設定→基本設定から、「アンテナサイト設定」のチェックを外しましょう。これで直接リンクに飛ぶようになります。

別にアンテナサイトからもうワンクリックでリンク先に飛べるので不具合がないといえばないのですが、閲覧者側から見れば非常に不快に感じると思うので、切っておいたほうがいいです。

20160811-145026.jpg

また、デザイン設定→詳細設定から、「別ウィンドウ」のチェックも外しておきましょう。外さないとクリックするたびに新しいタブで表示されます。同じサイト内のリンクなのに別ウィンドウなのも変でしょう。

逆に、複数のRSSを指定して、別サイトのおすすめ記事を紹介するような場合はこのままの設定のほうが良い場合もあります。状況に応じて適切な設定をしましょう。

デザインやカラーを大幅に変更する

20160811-151127.jpg

デザイン設定→レイアウト→テーマの項目を変更すると、デザインやカラーバランスを大幅に変更することが可能です。上記は「グルメ」というテーマに設定した例ですが、黄色ベースに強調されたデザインになっていることがわかるかと思います。

他にもパステルやホワイト・ブラック、ブロガーなど多くのカラーテーマを設定可能なので、好みの一色を見つけてみては如何でしょうか。

より詳細なレイアウト設定

20160811-145806.jpg

デザイン設定→レイアウトから「HTML」を選択すると、直接レイアウトをタグで自由に編集することが可能です。変数一覧を参考にして形を自分好みに設定してみましょう。

ヘッダー、本文、フッターと3つの場所のレイアウトを変更可能であり、自由度はとても高いです。ヘッダにタイトルをつけてもいいですし、固定の記事を一個付けてもいいです。フッターに別ブログのリンクを貼ったりすることも可能です。

サイトに合わせて全体的なカラーを個別で変更してもいいでしょう。ピンクやブルーにするとまた違った印象になります。

スポンサーリンク

-記事をシェアする-

SNSフォローボタン

-ブログをフォローする-

関連する記事

関連する記事