WEBコンテンツ・プランナーの中島です。今回、自分の備忘録としてのメモも含め、サイト制作に便利な機能を紹介していくシリーズ展開していきたいと思います。今回は、ブログ等を展開している人が、自分のホームページにブログサイトなどのRSSを取り込んで画像も一緒に表示させるフィード機能についてご案内します。全てがパッケージ化されているものなので自由なデザインにすることが出来ません。(誰でも簡単に使用できるようにしているため仕方のないことだと思います)かなり高機能なものがありますが、デザイン的な部分に目をつぶらなければならない場合が多いです。デザインを自分自身で制作しているならデザイン的に自由に使えるRSSフィードを導入したいって思いますよね。自由にデザインを設定できるとなると、やはりHTML,CSSを組める知識は必要になります。自分でコーディングしているオリジナルのサイトでも使用可能な方法を紹介したいと思います。apiのjavascriptを使って、ブログの更新情報を表示させたい画像サイズでサムネイル画像を表示させて、タイトルと本文がリスト表示される。外部へのリンクの場合、新規ウィンドウでリンク先を表示させたい、そして、「続きを読む...」とかの誘導リンクも付ける。こんな贅沢な設定を自分で、コーディングでやってしまおうという内容で進行していきます。以下の記述をメモ帳などのシンプルなテキストエディターにコピペして「rss.js(任意の名称.js)」(.jsの前は任意でネーミングして大丈夫です)という名称で自分のわかり易い場所に一旦「保存」し、閉じずに記述の中身の加工に入ります。記述内容を加工する部分。1.4行目の下線部分を自分が取り込みたいブログのfeedのURLを記述します。(上記記述には当方のブログのfeedのURLが記載されているので変更してください)2.6行目の()の中の数字は、ブログから表示させたい項目数を記入します。((8)と入れれば8項目のブログがダイジェスト表示されます)3.11行目のID名が「feed」になっていますが、任意の名称でも大丈夫です。(htmlの記述にID名を入れるとき同じID名を入れればOK)4.21行目の「width="100"」は表示させたい画像の大きさを任意で記入。(100と記入すれば幅100px)5.記述の中にあるCSS名をメモしておいて後にCSSを記述してデザインを調整。.kiji_bodyは自分で名称を変更してもOK。class名など、すでに設定しているCSSと混同しない、自分で分かりやすい名称で設定しましょう。ホームページに表示させたいブログのRSSフィードを取得(読み取る)サイトに表示させたいブログ(またはRSSフィードが書き出せるサイト)を開く。new」のRSSフィードを取得する場合で進めていきます。new」のページURL(http://creps-inc.weebly.com/whats-new.html)を開きます。※自分のサイトの場合は、必ずご自分で取得したいブログページを開いてください。Feed」のマークがあったので、それをクリックしました。※ブログサイトによってはいろいろ表示の仕方が違う場合があります。RSSのボタン等位置やデザインが違っていたり、アイコンだけの場合もあります。below.」というタイトルのソースコードのようなものが表示されますが、表示されている中身ではなく、サイトのアドレスが表示されている、そのURLをコピーします。当方の場合は「http://creps-inc.weebly.com/2/feed」と表示されていました。このように、最後が「/feed」になっているのがRSSフィードで設定するサイトのURLになります。参考)RSSフィードの書出ボタンがない場合、ブログ形式のデータベースサイトなら、サイトのURLの後ろに「/feed」を入れるだけで機能する場合もあります。「/feed」でデータが取得できない場合、「/rss」で取得できる場合もありました。http://○○【feedのURL】」部分を書き換え、ファイルを「上書き保存」し、ファイルを自分のサーバーにアップします。同じディレクトリ内に「rss.js(任意の名称.js)」ファイルをアップします。「rss.js(任意の名称.js)」が機能するようにブログのダイジェストを表示させたいページの<header>内の</header>のすぐ上に以下のスクリプトを記述します。「保存先のファイル名」部分は利用しているサーバー内のディレクトリ環境に合わせて変更してください。LoaderからAPIのキーを取得して記述しなければなりませんでしたが、どうやらキーの取得をしなくても良くなったようです。RSSフィードを表示させたいページの部分に以下を記述RSSフィードを表示させたい場所に下記のスクリプトを記述します。先ほどの「rss.js」でのfeedの箇所に対応している訳です。id名を変えたい場合は、この2箇所の値を同じ名称にすれば良いわけです。試していますが全く何も表示されない状況が続いております。am↑のソースだと21行目でシンタックスエラーになりますね。width="100">';これで動きました。あ、どこかの「;」も抜けてました。pm「コードのようなものが表示されますが、表示されている中身ではなく、サイトのアドレスが表示されている、そのURLをコピーします。それが聞きたかったんです。肝心のことが書いてないので、アホばっかりと思ってましたが、やっとできて、非常に助かりました。返信あなたのコメントは、承認後に掲載されます。メッセージを残してください。売上アップに結びつく各種セミナー(勉強会)を開催しています。WEBを事業活性化に役立てたいとお考えの方はぜひセミナー(勉強会)にご参加ください。個別相談やレベルに合わせて個人対象の勉強会も1〜2時間で予約いただけます。WEB編集できる社員を育成3~6時間学ぶだけでサイトを編集できる社員を育成する出張セミナー承っています。詳細・お申込みはこちら>>>自社開発製品ページを別途制作しました。Design初めて、当サイトへお越しいただいた方へ。Facebookの「いいね!」を押していただけたら嬉しいです!いろいろな情報をアップした時、ニュースフィードに表示されるようになります。頑張って役立つ情報をアップしています。コモンズにしたがって使用されます。News販売支援サポート・コンサルティング業務WEB関連の仕事TOP。