静的サイトに複数の外部ブログの最新記事リンクを表示させる（ブログパーツFeedWind）

投稿者: ねこやま猫道Web関連
image

ブログはTumblrで、ウェブサイトはスタティックなサイトにしていますが、ウェブサイトの更新頻度が今のところ年に3回程度（コミックマーケット出展、写真展参加など）になっています。動きの少ないサイトに見えるので、ブログの最新記事リンクをウェブサイトに表示してみました。

FeedWind

試行錯誤の結果、FeedWindというブログパーツを使用することにしました。複数ブログのフィードをソートして最新順に表示可能（古い順、ランダムも指定可能）と機能的に十分なものでした。また、FeedWindのトップページに備わっている設定を任意に指定して、作成されたコードをウェブページの表示させたい箇所に貼り付ければ完了です。

ただ、ウェブサイトを現状に合わせて、貼り付けたコードの以下の箇所を変更しました。その状態が、上の画像です。

レスポンシブ対応にしたい

  • rssmikle_frame_width: “100%”
  • responsive: “on”
  • <div style=“font-size:10px; text-align:center; width:100%;”>

4記事を表示し、表示部分の高さは記事個数分としたい

  • rssmikle_frame_height: “”
  • frame_height_by_article: “4”
  • article_num: “4”

FeedWindは無料で使用できますが、サイトに表示したフィードの下に、FeedWindサイトへのリンクが表示されます。小さな表示なので、そんなに気になりません（ちなみに、上記、レスポンシブ対応の設定の最後のものが、FeedWindサイトリンクのためのものです）。

カスタムCSS

これでOKと思ったのですが、FeedWindのフォントの色が自分のサイトと違う、フォントウェイトもサイトよりも太い、行間もサイトよりも狭い、左右のマージンもサイトの現状と異なる、などあり、カスタムCSSを作ることにしました。

FeedWindのHTMLはこちらのヘルプページにあるので、ここに記されたID、クラスにスタイルを設定したCSSファイルを作り、自分のサイトにおいておき、FeedWindのコードの以下を書き換えます。

  • rssmikle_css_url: “http://(ドメイン)/(任意のフォルダ)/(ファイル名).css”

その準備として、上記の画像の状態のフィード部分のスタイルがどうなっているのかをブラウザのデベロッパーツールで調べておき、各クラスごとにコピペして、それを修正していきました。

font-family、margin、line-height、font-weightなどをサイトの現状と合わせた結果、以下のようになりました。

image

PCだとよいのですが、スマートフォンで見た場合に、ブログのフィードが2画面分くらいの分量になってしまいました。
また、新着情報と、その他の内容がテキストのみで2〜3行という状態に比べると、ブログの内容が多すぎるため、ブログのフィードはタイトル、日付、ブログURLの3行にすることにしました。

最終的な形は以下です。タブの字数を少なくしないとiPhone5縦サイズの場合に一行に収まらなかったため、名称がちょっと変です（汗。
ここは、タブを以下の2つにして
・ブログ
・お知らせ
お知らせの中で4個以上だったら「もっと見る」表示をクリック、
とした方がよいかもしれませんね。また今度トライします。
（追記：2016.2.19 タブを2つにしてトグルで旧情報の表示を行うようにしました。 ）

image