Webサイトにアメーバブログの更新を表示する

2015年11月8日

こんにちは、Yuuichi(@WestHillWorker)です。

ホームページ制作をしているとTwitterやアメーバブログのタイムラインを表示したい場合が出てくると思います。

先日ホームページに実装しましたので、簡単に設置方法をご説明します。

html/cssが書けるよ!!ってかたでしたら、1hもかからずに設置できてしまうと思います。

設置イメージ↓↓デザインは、cssでカスタマイズできるのでご自分の好きなスタイルに変更してみてみましょう。
ameba-blog-sample

スポンサーリンク

アメーブログに登録

すでに登録すみの方は、スキップしていただいて、新規で始める方は、登録が必要なので、アメーバブログ公式サイトから登録してください。

サイトに設置

まずは、jQuery Pluginsが必要なので、下記サイトから取得します。

RSS Feeds Reader Plugin for jQuery

ページ少し下の「Download」の「Latest version 1.2.0 – Click here to download」からプラグインをダウンロードできます。

「Getting Started」にも記載されている通り、ヘッダーで読み込ませる。

html編集部分

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zrssfeed.min.js" type="text/javascript"></script>

jqueryをすでに読み込みすみの方は、不要です。

htmlで表示したい箇所に記載

<div id="test"></div>

idは仮ですので、ameblo等好きな名前に変更ください。

js編集部分

<script type="text/javascript">
 $(document).ready(function () {
   $('#test').rssfeed('http://test', {
     limit: 5
   });
 });
 </script>

html or js拡張子を作って、rssfeedで読み込みます。
※rssfeed内にご自分のアメーバブログのRSSを取得した文字列を入れてください。

ご自分のアメーバブログのサイドバーの下部の方にRSSボタンがあるので、そちらをクリックするとURLが確認できますので、その文字列を入れるイメージとなります。

#testはidを変えていたら、合わせてscriptも変更ください。

実装はここまでです。
知識のない方でも、手順通りで表示できると思います。

実装はここまでですが、そのままだとかなり簡素な装飾のため、レイアウト調整した方がいいかと思います。

レイアウト調整

公式にclass等のアウトラインが載っております。
下記は公式から抜粋。

<div id="test" class="rssFeed">←掲載全体のフレーム
   <div class="rssHeader">←ヘッダー表示(タイトル)
     <a>... (heading) ...</a>
   </div>
   <div class="rssBody"></div>←ブログ中身
     <ul>
       <li class="rssRow odd">
         <h4><a>... (title) ...</a></h4>
         <div>... (date) ...</div>
         <p>... (description) ...</p>
         <div class="rssMedia">
           <div>Media files</div>
           <ul>
             <li><a>... (media link) ...</a></li>
           </ul>
         </div>
       </li>
       <li class="rssRow even">...</li>
       ...
     </ul>
   </div>
 </div>

構造はこんな感じですので、cssに記述していきましょう。

GoogleChrome等で、表示対象を右クリックして「要素検証」すると該当のhtmlが確認できるので、ブラウザ上で変更して、cssに適応しましょう。
※あくまで一例です。

google-chrome-edit
対象クラスにタグを追加したりして、調整する。

ブラウザで整えたら、スタイルをコピーしてcssへ。
スタイル編集サンプル
以上で、完了となります。

まとめ

RSSのを変えれば、おそらく他のブログ等も取得できると思われます。

ブログを複数やっている方やブログと自信のサイトを連携したいときに活用できると思います。


スポンサーリンク
PAGE TOP