ホームページとは別に無料ブログサービスを使っている、ホームページの更新は少ないがブログは更新しているというように、複数のサイトを使っている方は多いと思います。
今回はブログが普及した頃からよく使われているやり方ですが、アメブロやFC2ブログなど無料ブログサービスでよく更新している方向けに店舗・自社のホームページにブログの更新情報（記事のタイトルと本文の一部）を表示させる手順を紹介します。
設定前に
ただ闇雲に設置すればいいってものでもありません。
- 更新しているコンテンツを知ってもらい、そちらを定期的に読んでもらえるように誘導する
- ホームページの一部分に動きを持たせ、訪れるたびに変化があることを知らせる
- 固定された案内とリアルタイムまたは定期的な情報発信との住み分け
動きがあることで目を引くぶん、そこに訪問者にとって読みたくなる、役に立つコンテンツがあるかどうかが重要です。
ブログパーツの使用
ブログを訪問すると、ニュースや占いなどの情報系からミニゲームやメッセージフォームまで様々なものが小さい画面の中に詰まっていることがありますね。
それら一つ一つをブログパーツと呼ばれるものです。
今回はFeedWind（フィードウインド）というRSS表示用ブログパーツ作成サービスを使用します。
FeedWindの設定
ブログURLの決定
0. 事前に更新情報を表示させたいブログのURLをコピーしておく。
1. FeedWindのサイトへアクセス。（リンク先は日本語サイト）
2. RSS or サイトのURL欄に、あらかじめコピーしておいたブログのURLを貼り付けし、「RSSを追加」ボタンを押す。
3. 入力欄のすぐ下にブログタイトルとブログのURLが表示され、さらに右側にプレビューが表示されることを確認。
表示のさせ方をきめる【フレーム設定】
4. フレーム設定で横幅・高さを指定する前に「もっと細かく設定する」をクリック。
5. 表示の仕方を決めていく。ここではおすすめ設定のみ説明。
- リンクを別画面で開く
現在のサイト外へは分けてみてもらいやすいように「別画面で開く」設定にしておくとよい。
- 自動スクロールは「通常スタイル」を選択
枠内で表示できるスペースに限りがあるため、書いた記事をひとつでも多く紹介するよう設定する。
紹介記事の表示順や件数は後で変更箇所あり。
- レスポンシブデザインを「有効にする」
表示させる場所によって横幅のスペースが一定でないため、自動的に伸縮してくれる「レスポンシブデザイン」を選択。
【タイトル設定】
6. ここでも「もっと細かく設定する」をクリックする。
＜タイトル設定の補足＞
「表示しない」を選択すると、最上部のタイトルを非表示にすることができる。ブログ紹介などをあらかじめテキスト入力しておき、最新記事のみ表示するときに便利。
紹介記事について書式設定する【記事設定】
7. 記事設定で記事タイトルと本文の書式を決める。変更するたびにプレビューで確認。
- 最大文字数：タイトル・本文それぞれ先頭から何文字まで表示させるかを決める。
- フォントカラー：初期値はグレーになっているので好みの色に変える。
- 背景色：初期値は白になっているので文字が見えるよう好みの色に。
8. さらに「もっと細かく設定する」をクリックして表示順などを決める。
- 記事の数：初期値は15になっているので必要数を入力。
- 並び替え：表示される記事の順番を決める。「新しい順」がおすすめ。
- 日付：記事の投稿日時を表示させるかどうか選ぶ。
・
＜日付表示の補足＞
「表示する」を選択した場合、時差の調整ができずに日時が表示されてしまうことがある。
その場合は「表示する（タイムゾーン）」を選択し、日本であれば「(GMT+9:00) Tokyo」を選択すると、日本時間での投稿日時に修正される。
ホームページ・ブログにコードを貼り付け【サイトに追加】
9. 設定が済んだら、プレビューのすぐ下に表示される「サイトに追加」のテキストボックス内に表示されたコードを選択してコピー。
10.コピーしたコードをホームページやブログのHTMLタグで貼り付けできる場所に貼り付けて完了。
完成例
納得のいく表示になるまではFeedWindのページを残しておき、設定を変えてコードをコピー→貼り付けを試す。
メモ帳やテキストエディタを使ってコードを貼り付けて保存しておくと、トラブルで表示できなくなった時にも復旧できて便利。
最初のセクションで述べたとおり、動きのあるコンテンツのひとつとして、また他にも更新しているコンテンツがあるとお知らせする手段として紹介し、「こちらでも私が更新してますから読んでね♪」のような姿勢で見せることが大切です。
コメント