よかウェブ研究室

福岡発・気まぐれ更新 | ソーシャルメディア活用 | ブログカスタマイズの情報発信

WordPressカスタマイズ

他のブログの更新情報を表示させる(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のページを残しておき、設定を変えてコードをコピー→貼り付けを試す。
メモ帳やテキストエディタを使ってコードを貼り付けて保存しておくと、トラブルで表示できなくなった時にも復旧できて便利。

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

投稿者プロフィール

とものすけ@よかウェブ九州
とものすけ@よかウェブ九州

福岡市在住。気になったことはとりあえずネタにする主義。パソコンインストラクターを長年務めているがこれからのライフワークはWebライティング。かしわうどんと沖縄そばとを優先的に選んで食べる。Love Perfume !!!


よかウェブおすすめ記事

投稿のシェアをクリック 1

Facebookの近況投稿や写真付き投稿などを紹介したいときに使う「シェア」。 通常は自分の名前で友達などにシェアするかと思いますが、自分が管理しているFacebookページがあればFacebookペ ...

JR小倉駅かしわうどん 2

あけましておめでとうございます。 本年はモデルチェンジした当サイトで福岡のこと、ソーシャルメディアのこと、ホームページ更新に役立つ話題など皆様に楽しんでもらえるようコンテンツを充実させてまいります。よ ...

守礼門 3

沖縄へ行きたい病を13年こじらせていたとものすけです。 一年前から土日を挟んで何泊か沖縄に行けたらと、価格調査を兼ねて航空会社のサイトにらめっこしていたものの、なかなかその機会が訪れることがなく。 な ...

Surface Pro 3 4

※2017年5月31日、第5世代のSurface Pro発表に合わせて一部追記、記事タイトルを編集しました。 2015年6月19日(金)に発売されるマイクロソフトタブレット「Surface 3」の話題 ...

読谷山そば 5

福岡市内の沖縄料理店に入り浸り、いつかは沖縄へ行こう行こうと夢見ること十数年。 ついにその念願叶ったかと思えば、一年のうちに6度も福岡から沖縄へ足を運ぶというジャンキーぶりを発揮。 私とものすけはお酒 ...

-WordPressカスタマイズ
-, , , ,

Copyright© よかウェブ研究室 , 2017 AllRights Reserved.