WordPressカスタマイズ

他のブログの更新情報を表示させる(FeedWind使用)

FeedWind設定

ホームページとは別に無料ブログサービスを使っている、ホームページの更新は少ないがブログは更新しているというように、複数のサイトを使っている方は多いと思います。
今回はブログが普及した頃からよく使われているやり方ですが、アメブロやFC2ブログなど無料ブログサービスでよく更新している方向けに店舗・自社のホームページにブログの更新情報(記事のタイトルと本文の一部)を表示させる手順を紹介します。

設定前に

ただ闇雲に設置すればいいってものでもありません。

  • 更新しているコンテンツを知ってもらい、そちらを定期的に読んでもらえるように誘導する
  • ホームページの一部分に動きを持たせ、訪れるたびに変化があることを知らせる
  • 固定された案内とリアルタイムまたは定期的な情報発信との住み分け

動きがあることで目を引くぶん、そこに訪問者にとって読みたくなる、役に立つコンテンツがあるかどうかが重要です。

ブログパーツの使用

FeedWindブログを訪問すると、ニュースや占いなどの情報系からミニゲームやメッセージフォームまで様々なものが小さい画面の中に詰まっていることがありますね。
それら一つ一つをブログパーツと呼ばれるものです。
今回はFeedWind(フィードウインド)というRSS表示用ブログパーツ作成サービスを使用します。

FeedWindの設定

ブログURLの決定

0. 事前に更新情報を表示させたいブログのURLをコピーしておく。

1. FeedWindのサイトへアクセス。(リンク先は日本語サイト)

FeedWind設定

2. RSS or サイトのURL欄に、あらかじめコピーしておいたブログのURLを貼り付けし、「RSSを追加」ボタンを押す。

FeedWind設定

3. 入力欄のすぐ下にブログタイトルとブログのURLが表示され、さらに右側にプレビューが表示されることを確認。

FeedWind設定

表示のさせ方をきめる【フレーム設定】

4. フレーム設定で横幅・高さを指定する前に「もっと細かく設定する」をクリック。

FeedWind設定

5. 表示の仕方を決めていく。ここではおすすめ設定のみ説明。

  • リンクを別画面で開く
    現在のサイト外へは分けてみてもらいやすいように「別画面で開く」設定にしておくとよい。

FeedWind設定

  • 自動スクロールは「通常スタイル」を選択
    枠内で表示できるスペースに限りがあるため、書いた記事をひとつでも多く紹介するよう設定する。
    紹介記事の表示順や件数は後で変更箇所あり。

FeedWind設定

  • レスポンシブデザインを「有効にする」
    表示させる場所によって横幅のスペースが一定でないため、自動的に伸縮してくれる「レスポンシブデザイン」を選択。

レスポンシブデザインを有効にする

【タイトル設定】

6. ここでも「もっと細かく設定する」をクリックする。

タイトルの色設定

タイトル設定の非表示

<タイトル設定の補足>

「表示しない」を選択すると、最上部のタイトルを非表示にすることができる。ブログ紹介などをあらかじめテキスト入力しておき、最新記事のみ表示するときに便利。

 

紹介記事について書式設定する【記事設定】

7.  記事設定で記事タイトルと本文の書式を決める。変更するたびにプレビューで確認。

  • 最大文字数:タイトル・本文それぞれ先頭から何文字まで表示させるかを決める。
  • フォントカラー:初期値はグレーになっているので好みの色に変える。
  • 背景色:初期値は白になっているので文字が見えるよう好みの色に。

FeedWind設定

8. さらに「もっと細かく設定する」をクリックして表示順などを決める。

  • 記事の数:初期値は15になっているので必要数を入力。
  • 並び替え:表示される記事の順番を決める。「新しい順」がおすすめ。
  • 日付:記事の投稿日時を表示させるかどうか選ぶ。

FeedWind設定

日付表示とタイムゾーン

<日付表示の補足>

表示する」を選択した場合、時差の調整ができずに日時が表示されてしまうことがある。
その場合は「表示する(タイムゾーン)」を選択し、日本であれば「(GMT+9:00) Tokyo」を選択すると、日本時間での投稿日時に修正される。

 

ホームページ・ブログにコードを貼り付け【サイトに追加】

9. 設定が済んだら、プレビューのすぐ下に表示される「サイトに追加」のテキストボックス内に表示されたコードを選択してコピー。

コードを選択してコピー サイトに追加

10.コピーしたコードをホームページやブログのHTMLタグで貼り付けできる場所に貼り付けて完了。

完成例

納得のいく表示になるまではFeedWindのページを残しておき、設定を変えてコードをコピー→貼り付けを試す。
メモ帳やテキストエディタを使ってコードを貼り付けて保存しておくと、トラブルで表示できなくなった時にも復旧できて便利。

RSS Feed Widget

最初のセクションで述べたとおり、動きのあるコンテンツのひとつとして、また他にも更新しているコンテンツがあるとお知らせする手段として紹介し、「こちらでも私が更新してますから読んでね♪」のような姿勢で見せることが大切です。

投稿者プロフィール

とものすけ
とものすけ
福岡市在住。気になったことはとりあえずネタにする主義。かしわうどんと沖縄そばとを優先的に選んで食べる。Love Perfume !!!

関連記事

  1. ツイッターのウィジェット ツイッターのウィジェットを設置(2012年11月版)
  2. Stinger管理 WordPressテーマをStinger7に更新しました
  3. WordbookerでWordPressの投稿をFacebook…
  4. よかウェブ研究室ホーム画面 WordPressテーマをTCDテーマ「CORE」に変更しました…
  5. WordPressパーマリンク設定変更 【取扱注意】WordPressのパーマリンク設定を変更した時のF…
  6. PS Auto Sitemap PS Auto Sitemapプラグインを使ってサイトマップを作…
  7. WordPressテーマ変更後のアクセス動向
  8. 福岡よかウェブプロジェクト さくらのレンタルサーバからエックスサーバーに乗り換えました

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

CAPTCHA


ピックアップ記事

  1. 太宰府天満宮と梅
  2. よかウェブ研究室ホーム画面
  3. 博多駅イルミネーション2018
  4. 警固公園イルミネーション2018
  5. 読谷山そば
  6. 熊本城
  7. 明治通り側の桜の木
  8. 喜屋武岬

YouTube

カテゴリー

月別アーカイブ

スポンサーリンク

PAGE TOP