JIMDOサイトを運営する上で、絶対に欠かせない要素となるブログ機能の運用。
あなたは上手く使いこなせているでしょうか？
JIMDOブログには、投稿日やタイトル、サムネイル画像などブログやお知らせ記事を投稿するのに便利な機能が充実していますよね。
既に運用している方の中には10記事、20記事とページ数が増えてきているという人もいると思います。
記事数が増えてくると、管理が結構大変になってきますし、ユーザーも膨大な記事の中から、必要な情報が乗っているページを選ぶのに労力が増えてしまいます。
できることなら新着記事やカテゴリ別の記事をピックアップして、サイトのホームや、全ページ共通エリアであるフッダーやサイドカラムエリアに自動表示したいですよね。
今回は、そんな方のために、記事の新着表示を自動でやってくれる機能RSSフィードについて、機能の詳細や初期設定から、運用までのフローを実際の編集画面と合わせて解説していきたいと思います。
はじめに
この記事は既にJIMDOクリエイターサイトで作成したブログ記事を運用している方向けの内容となっております。
目安としては、3記事以上ブログ記事やお知らせ記事を公開している方なら導入するメリットがありますので、そんなに記事がないよ・・・って方もぜひ一度この機会に設定してみて下さい。
ブログ記事をまだ作成していない、作り方が分からない方はブログ記事の作成方法を解説してますのでこちらの記事を参考にしてみて下さい。
RSSフィードとは
RSS（Rich Site Summary：リッチ・サイト・サマリー）とは、Webサイトの見出しや更新情報・要約を配信するためのフォーマットです。
もう少し分かりやすく書くと、特定のサイトにある記事タイトルや更新日時、URLといった情報をピックアップしてサイト上に表示してくれる機能のこと指します。
JIMDOには標準でRSSフィード機能があり、誰でも無料で使うことができます。
また、JIMDOのブログ機能と連携することで、独自のRSSフィード（ブログフィード）をカスタマイズすることができます。
ブログフィードでできること
JIMDOのブログフィードでは、記事のタイトル、投稿日、コンテンツ、続きを読むボタン（記事URLリンク）の4つの要素を新着順に表示することができます。
| 追加される要素 | |
| 記事タイトル | 記事の大見出し(h1)に設定したタイトルが表示されます。 |
| 投稿日 | 記事を投稿した年・月・日・曜日が表示されます。 |
| コンテンツ | 実際のブログ記事に追加したコンテンツ（テキスト・見出し・写真・動画・リンク等全て）が全て表示されます。 |
| 「続きを読む」ボタン | 記事ページへ遷移するためのボタンリンクが表示されます。 |
ただ「コンテンツ」に関しては、表示するとフィードがとても長くなるため、基本的には非表示にしてしまうことから、実質的には記事タイトル、投稿日、ボタンリンクの3つの要素を表示することになります。
ブログフィードを設置するメリット
ブログフィードを設置するメリットは大きく分けて3つあります。
新着情報がひと目でわかる
Webサイトは世の中に無数にありますよね。
その中からユーザーさんは自分に合ったサイトを閲覧するわけですが、選択するためには様々な情報を見比べる必要があります。
その中でも重要な一つの目安として「更新頻度」が大事になってきます。
- その情報がいつ公開されたのか？
- 新しく増えた情報はどれか？
- 更新が続いているサイトなのか？
更新日と新着記事が見れるフィードがあれば、いち早くサイトの更新頻度を把握できるため、サイトからの離脱率を軽減したり、鮮度の高い情報を順次に受け取ってもらえるようになります。
記事のカテゴリごとに新着記事を出し分けできる
ブログフィードにはブログ機能で作成した全ての記事の新着表示の他に、設定したカテゴリ別の記事を新着表示する機能もあります。
例えば、お知らせ、レポート、ノウハウ、PR等、記事によって情報の性質や種類が異なるコンテンツをブログ機能で投稿している場合、その記事ごとにカテゴリを設定しておくことで、カテゴリ別の記事を出し分けして新着一覧表示することができます。
人によっては、お知らせだけを見たい人、ノウハウだけを見たい人といった風に、目的がはっきりしている場合もあるので、カテゴリ分けができる規模の記事数があるサイトであれば、設定しておくことでより知りたい情報へのアクセスがしやすくなります。
一度設定してしまえば、ブログ記事を投稿するたびに自動更新してくれる
ブログフィードは一度設定すると、後はブログ記事を投稿するたびに自動で記事をフィードに追加してくれます。
自作のメニューなどを手動で追加して更新することもできますが、都度手間がかかってしまい大変なので、フィードを有効活用したほうが、サイト運用にかかる手間が大幅に削減できるのもメリットの一つと言えます。
サイトの更新頻度をユーザーに知ってもらうための指標となる
フィードの投稿日は、更新頻度の大きな目安となります。
定期的に記事を投稿しているサイトであれば、何日おき、曜日ごと等の更新頻度を過去の投稿日と照らし合わせて確認することができるので、次いつサイトを見に来ればいいかを判断しやすくなります。
ブログフィードを設置するデメリット
ブログフィードの設置は、サイト運営を続ける上で大変メリットがありますが、同時にデメリットもあります。
記事が少ないと効果が薄い
冒頭でも書きましたが、ブログフィードを利用する際に、記事が少ない、記事が無い場合は、効果が薄くなります。
その理由として、フィードがコンパクト過ぎてコンテンツとしてのボリューム感が出せないことや、記事運用がされていない場合はあまり必要性が無くなってしまうことが挙げられます。
更新頻度が少ないと目立ってしまう
頻繁に更新されているサイトであれば、問題は無いのですが、逆に更新頻度が少ない場合は悪目立ちしてしまいます。
2～3ヶ月に1記事、半年に1記事、年に1記事程度の更新だと、ユーザーさんから「あまり更新されていないサイトだな」と思われてしまいます。
理想は1日1記事、難しい場合も2～3日で1記事、1週間に1記事、1ヶ月に2～3記事といったペースで情報発信することができるのが好ましいです。
どこに設置するのが効果的？
フィードの設置はホームまたは共通エリアへの設置が効果的です。
ホーム
ユーザーさんが最初に訪問する可能性が高いページで、閲覧頻度がとても高いです。
ファーストビューのすぐ見える位置や分かりやすい位置に追加しておくと訪問してくれた人が見つけやすくなります。
共通エリア
JIMDOクリエイターのサイトには、レイアウトによってサイドカラムやフッターエリアの位置に、全ページ共通で表示できるコンテンツエリアが存在します。
共通エリアに設置しておけば、全てのページから最新記事にアクセスできるようになるので、こちらもオススメです。
さて、ブログフィードについて一通り把握できたと思いますので、前置きはこの辺にして、ここからはブログフィードの導入方法を解説していきます。
STEP1：設置するページを管理画面を開く
アカウントにログインして、編集画面を開いたら、RSSフィード（ブログフィード）を設置するページを開きましょう。
今回の記事では、分かりやすいよう、シンプルなレイアウトテーマ「Rome」のサンプルサイトで「ホーム」ページのメインコンテンツエリアに設置していきます。
メインコンテンツエリアにカーソルを当て、「＋コンテンツを追加」をクリックします。
STEP2：ページにRSSフィードを追加する
コンテンツ一覧が表示されますが、最初の12項目の中にはRSSフィードの項目がないため、下にある「…その他のコンテンツ＆アドオン」をクリックしましょう。
隠れていた要素が31個追加で表示されます。
一番右列の中央付近にある「RSSフィード」をクリックしましょう。
クリック後、画像のようなRSSフィードコンテンツが追加されます。
追加時点ではリンクの入力欄だけがアクティブになっていて、その下の項目はグレーアウトして使えない状態になっています。
ここまで手順通り追加できたら、次はブログリンクを設定していきましょう。
STEP3：ブログのリンクを設定する
RSSフィードを使ってブログ記事を新着表示させるためには、そのブログのURLを設定する必要があります。
JIMDOクリエイターブログの場合は、ブログのURLフォーマットがあらかじめ決まっています。
ブログ記事全体の新着表示と、記事のカテゴリ別の新着表示でそれぞれフォーマットが異なりますが、追加方法はどちらも同じですので一緒に確認していきましょう。
ブログ記事全体を新着表示する場合
ブログ記事全体をフィードで新着表示する場合は、以下のフォーマットでURLを書いて記入欄に入力します。
「{サイトURL}/rss/blog」
| URLの構成要素 | |
| サイトURL | 設置するサイトのURLを入れます。 |
| /rss/blog | ブログ記事を新着順に抽出する呪文のようなものです。 そのままURLの後ろに記述します。 |
解説用のサンプルサイトのリンクを例にするとこうなります。
「https://design-sample-c-005.jimdofree.com/rss/blog」
このように、サイトURLの後ろに、「/rss/blog」を足してそのまま記入すればOKです。
ブログカテゴリ別に記事を新着表示する場合
カテゴリ別に記事を新着表示する場合は以下のURLを追加します。
「{サイトURL}/rss/blog?tag={カテゴリ名}」
| URLの構成要素 | |
| サイトURL | 設置するサイトのURLを入れます。 |
| /rss/blog?tag= | ブログ記事をカテゴリごとに新着順に抽出する呪文のようなものです。 そのままURLの後ろに記述します。 |
| カテゴリ名 | ブログ記事ごとに設定することができる「ブログカテゴリ」というIDを設定します。 「tag=」のあとにそのままIDを記入しましょう。 |
※カテゴリの設定方法は後ほど別の記事で詳しく紹介します。
こちらもサンプルサイトのURLを例にすると以下のようになります。
「https://design-sample-c-005.jimdofree.com/rss/blog?tag=news」
この場合は、「news」というカテゴリの記事を新着表示するURLになります。
記事全体の新着表示と違う点としては、「rss/blog」の後ろに「?tag={カテゴリ名}」が追加で必要となるところです。
新着表示したいURLを記入できたら、「OK」をクリックしましょう。
STEP4：フィードの表示項目を設定する
OKボタンをクリックするとブログフィードが読み込まれます。
最初は全ての要素が表示されるので、画面構成を把握しておきましょう。
| 表示される要素 | |
| ブログフィードの見出し | 一番上にブログフィードの小見出し(h3)が表示されます。 見出しは「{サイトURL BLOG FEED}」という文字が自動で表示されます。 |
| 記事タイトル | ブログ記事のタイトルが表示されます。 |
| 投稿日 | 記事の投稿日が表示されます。 |
| 記事コンテンツ | ブログ記事のコンテンツが全て順に表示されます。 |
各要素が読み込まれたら、コンテンツが表示されたままだとフィードの全体が確認しづらいため、まず最初に「コンテンツ」の左にあるチェックを外して「保存」ボタンをクリックしましょう。
保存が完了すると、ブログフィードの表示項目の設定が完了となります。
デフォルトでは2記事まで表示されていますが、新着表示としてはちょっと数が物足りないので、このまま表示件数を調整していきます。
STEP5：新着記事の表示件数を設定する
ブログフィードの表示できる記事数は、すべての記事を表示するか、任意の記事数を指定することができます。
| 表示できる記事数 | |
| すべての記事 | 文字通り、全ての記事を新着順に上から表示することができます。 |
| 表示制限（任意の記事数） | 表示する記事数を指定して表示させることができます。 最低1記事～最大100記事まで追加することができます。 |
記事数は最大100記事まで表示することができますが、そんなに多いとページスクロールが大変なので、すべての記事表示や10記事以上の指定はあまり現実的ではないです。
推奨記事数としては、運用状況に合わせて以下を参考にするとバランスが良くなると思います。
| 表示する記事数の目安 | |
| 記事数が3～4記事程度 | 3記事表示 |
| 記事数が5～10記事程度、更新頻度が低い場合 | 5記事表示 |
| 記事数が10記事以上、更新頻度が多い場合 | 5～7記事表示 |
| 1日1記事以上投稿する場合 | 7～10記事表示 |
更新頻度や記事数を目安に3～10記事の範囲で表示数を調整すると、ユーザーさんにとって更新頻度を把握しやすくなりますので、運用状況に合わせて調整をしましょう。
参考画像はサンプルとして5記事表示で設定してみます。
下の表示制限という項目の隣で記事数の指定ができますので、数字を入力または上下のボタンで指定して「保存」ボタンをクリックしましょう。
ここまでできたら、コンテンツとしてのフィード構成は完成となります。
ブログフィードは一度設定してしまえば、あとはブログ記事を投稿するだけで自動的に更新されていきますので、更新の手間も少なく便利な機能です。
このままでもブログフィードとしての機能や役割を果たすことはできますが、ちょっと彩りが寂しいので、文字やボタンのスタイルの設定をしておきましょう。
STEP6：デザインスタイルを調整する
JIMDOクリエイターの基本機能でできるデザインスタイルの設定はいくつかありますが、ブログフィードに関してできる設定は全部で3箇所になります。
小見出し(h3)のテキストスタイル設定
ブログフィードの一番上に表示される見出しのスタイルを設定することができます。
変更できる要素としては、フォント、フォントサイズ、太字、斜体、フォントカラー、行間幅、配置、文字設定の8つの項目があります。
ただ、このスタイル設定は通常の小見出しと共通の設定となるのと、後述する非表示設定を行う際は必要がなくなるため、ここでの説明は省略します。
タイトル記事のテキストスタイル設定(spanタグ内テキスト)
記事タイトルのテキストスタイルを設定することができます。
変更できる要素としては、小見出しと同様、フォント、フォントサイズ、太字、斜体、フォントカラー、行間幅、配置、文字設定の8つの項目になります。
ここは独自の設定項目なので、記事タイトルを目立たせたい場合はフォントや配色、サイズを変えるとメリハリのあるコンテンツになるのでオススメです。
投稿日のテキストスタイル設定
投稿日のテキストスタイルを設定することができます。
フォント、フォントサイズ、フォントカラー、行間幅の4つの項目が設定できますが、ここは全ページ共通の通常テキストと同じ設定が適用されているため、フィードの部分で変えてしまうと全てのテキストコンテンツの色やサイズが変わってしまいますので、注意しましょう。
この項目も基本的には設定しなくて良いところなので、これ以上の説明は省略します。
続きを読むボタンのスタイル設定
「>> 続きを読む」ボタンのテキストスタイルを設定することができます。
項目は、フォントサイズ、フォントカラー、フォントカラー（active）、背景色、背景色（active）、枠の色、枠の色（active）、罫線のサイズ、角丸の全9項目になります。
ブログフィードのボタンは、他のコンテンツのボタンとは設定が分けられているので、フィード専用のボタンスタイルを設定することが可能です。
サンプルサイトでは参考例として、小見出しを赤、記事タイトルとボタンをオレンジ色に変えていますが、デフォルトの配色と見比べると目立ちやすさやメリハリが大きく変わっていることが分かると思います。
自分のサイトの訪問者さんやサイト全体のデザインに合わせて調整しながらデザインスタイルの設定をしていきましょう。
補足：いらない要素の調整と日付表示のバグ修正
STEP5の段階でフィードの最低限必要な設定は完了となりますが、ちょっと気になる部分がいくつかありますよね。
- フィードの一番上にある長い見出しがじゃま！
- 一番上の投稿日の日付表記がおかしい！
- ボタンの位置をズラしたい！
パッと見たときに変えたいなと思うこれらの要素ですが、フィードの設定画面からは変更ができません。
気にならないという運営者さんもいるかもしれませんが、ユーザーさんが見たときに「このサイトバグってるな～」と思われてしまうとイメージ悪いので、できることなら変えたいですよね。
上記のブログフィードの投稿日表記バグを含めた3箇所を修正する方法を別の記事で解説してますので、もう少し頑張れそうな方は、是非参考にしてみて下さい。
おわりに
今回はJIMDOクリエイターサイトで作成したブログ記事の新着表示について詳しく解説しました。
ブログフィードは適切な位置に設定することで、サイト内のユーザービリティ改善に大きく貢献できる他、SEO対策にも有効ですので、ブログ記事の運用と合わせて是非設定をしておきましょう。