チュートリアル アーカイブ
2007年10月17日
背景色を変える
本文の色を変える
本文の色をを変えるには「本文設定」の「もっと細かく設定する」をクリックします。
詳細設定画面が表示されるので、「フォントカラー」を調整します。
■の色が付いている部分をクリックすると、図のようにカラーパレットが表れます。
好きな色の部分をクリックすと、プレビュー画面に反映されます。
なお、カラーパレットの右側にあるスライダーを上下すると、パレットの色合いが変わります。
選択した色でよければ「OK」ボタンを、また元に戻すときは「Cancel」ボタンをクリックしてください。
詳細設定画面が表示されるので、「フォントカラー」を調整します。
■の色が付いている部分をクリックすると、図のようにカラーパレットが表れます。
好きな色の部分をクリックすと、プレビュー画面に反映されます。
なお、カラーパレットの右側にあるスライダーを上下すると、パレットの色合いが変わります。
選択した色でよければ「OK」ボタンを、また元に戻すときは「Cancel」ボタンをクリックしてください。
見出しの色を変える
RSSVIEWの見出しの色を変更するには、「見出し設定」の「もっと細かく設定する」を開きます。
「フォントカラー」と書かれている項目の隣にある■をクリックすると、図のようにカラーパレットが開きます。
好きな色の部分をクリックすと、プレビュー画面に反映されます。
なお、カラーパレットの右側にあるスライダーを上下すると、パレットの色合いが変わります。
選択した色でよければ「OK」ボタンを、また元に戻すときは「Cancel」ボタンをクリックしてください。
「フォントカラー」と書かれている項目の隣にある■をクリックすると、図のようにカラーパレットが開きます。
好きな色の部分をクリックすと、プレビュー画面に反映されます。
なお、カラーパレットの右側にあるスライダーを上下すると、パレットの色合いが変わります。
選択した色でよければ「OK」ボタンを、また元に戻すときは「Cancel」ボタンをクリックしてください。
カスタムCSSの設定方法
FeedWindでは、上級者の方に向けてカスタムCSSが設定できるようになりました。ご自身で作成したCSSを適用して、ブログやウェブサイトのデザインに統一感を持たせることが可能です。
◎カスタムCSSの設定方法
【1】CSSを作成する
まず、テキストエディタや専用ソフトなどで、CSSファイルを作成してください。なお、FeedWindは以下のようなhtmlで構成されています。
*htmlファイルの構成は予告なく変更する場合がございます。
**marginとpaddingはpx単位で行ってください。
【2】CSSをサーバにアップする
作成したCSSファイルをサーバにアップしてください。FeedWindでは、外部サーバからCSSを直接読み込みます。ご自身で使用しているレンタルサーバなどに、あらかじめアップをお願いします。
【3】CSSのURLを入力する
CSSのURLを指定します。「フレーム設定」の「もっと細かく設定する」をクリックして、カスタムCSSのURL入力欄に記入してください。プレビュー画面にデザインが反映されます。
＜注意事項＞
カスタムCSSのURLを入力すると、設定画面の一部がグレイアウトされて、設定ができなくなります。これは、FeedWindのデフォルトの設定と、カスタムCSSの設定が競合しないようにするためです。カスタムCSSを利用した場合は、そちらの設定が有効になります。
なお、FeedWindでは見出しと本文の最大文字数を設定する欄があります。設定された数値に合わせて、表示する記事数を自動的に調整する仕様になっています。そのため、line-heightなどCSSの設定によっては枠からはみ出してしまうことがあります。
その場合は、ご自身でCSSを調整していただくようお願いします。
◎カスタムCSSの設定方法
【1】CSSを作成する
まず、テキストエディタや専用ソフトなどで、CSSファイルを作成してください。なお、FeedWindは以下のようなhtmlで構成されています。
*htmlファイルの構成は予告なく変更する場合がございます。
**marginとpaddingはpx単位で行ってください。
【2】CSSをサーバにアップする
作成したCSSファイルをサーバにアップしてください。FeedWindでは、外部サーバからCSSを直接読み込みます。ご自身で使用しているレンタルサーバなどに、あらかじめアップをお願いします。
【3】CSSのURLを入力する
CSSのURLを指定します。「フレーム設定」の「もっと細かく設定する」をクリックして、カスタムCSSのURL入力欄に記入してください。プレビュー画面にデザインが反映されます。
＜注意事項＞
カスタムCSSのURLを入力すると、設定画面の一部がグレイアウトされて、設定ができなくなります。これは、FeedWindのデフォルトの設定と、カスタムCSSの設定が競合しないようにするためです。カスタムCSSを利用した場合は、そちらの設定が有効になります。
なお、FeedWindでは見出しと本文の最大文字数を設定する欄があります。設定された数値に合わせて、表示する記事数を自動的に調整する仕様になっています。そのため、line-heightなどCSSの設定によっては枠からはみ出してしまうことがあります。
その場合は、ご自身でCSSを調整していただくようお願いします。
読者のブログに自分のフィードを貼ってもらう
あなたのブログの読者に、フィードの掲載を呼びかけてみませんか？
あなたのブログの読者が、自分のブログにブログパーツとして貼り付けてくれることで、あなたのブログの読者やネットワークが広がります。
【設置方法】
設置は簡単です。
まず、あなたのブログに「ブログに貼る」ボタン（テキストリンクでもOK）を設置（実用例※左サイドバーの最下部を参照）します。
リンク先は以下のように設定してください。
ここにアクセスすると、専用のRSS貼り付けページが自動的に作成されます。
画面右下にjavascriptのタグが発行されます。読者がこのタグを貼り付けるだけで、あなたのブログの新着情報が配信されます。
【サンプルリンク】
【サンプルボタン】
ご自由にお使いいただけるサンプルボタンを用意いたしました。
以下のコードに、あなたのブログのURLを入れてそのままお使いになれます。
*FeedWindを利用するユーザーの方々には、FeedWindの利用規約をお守りいただきます。
あなたのブログの読者が、自分のブログにブログパーツとして貼り付けてくれることで、あなたのブログの読者やネットワークが広がります。
【設置方法】
設置は簡単です。
まず、あなたのブログに「ブログに貼る」ボタン（テキストリンクでもOK）を設置（実用例※左サイドバーの最下部を参照）します。
リンク先は以下のように設定してください。
http://feed.mikle.com/feeds/setting/あなたのブログのURL
ここにアクセスすると、専用のRSS貼り付けページが自動的に作成されます。
画面右下にjavascriptのタグが発行されます。読者がこのタグを貼り付けるだけで、あなたのブログの新着情報が配信されます。
【サンプルリンク】
<a href="http://feed.mikle.com/feeds/setting/あなたのブログのURL" target="_blank">ブログに貼る</a>※リンクの文言は自由に設定してみてください
【サンプルボタン】
ご自由にお使いいただけるサンプルボタンを用意いたしました。
以下のコードに、あなたのブログのURLを入れてそのままお使いになれます。
<a href="http://feed.mikle.com/feeds/setting/あなたのブログのURL" target="_blank"><img src="http://static.feed.mikle.com/images/btn_feedbutton.gif" border="0" /></a>
*FeedWindを利用するユーザーの方々には、FeedWindの利用規約をお守りいただきます。
2007年10月18日
サンプルからデザインを選ぶ
FeedWindではカスタムCSSが使えます。
CSSを使うと、自分のブログのデザインにふさわしいインターフェイスに仕上げることが可能です。
ただ、カスタムCSSを利用するには専門の知識が必要です。
そこで、CSSが分からなくても色々なデザインをお試しいただけるように、いくつかのサンプルCSSを用意しました。
5種類（10月19日現在）のデザインの中からお選びいただけます。
【１】「フレーム設定」の「もっと細かく設定する」をクリック。最下部の「サンプルから選ぶ」をクリックすると、別ウインドウが起動します。
【２】好きなデザインを選び、画像をクリック。そのままウインドウを閉じて、再び設定画面に移動します。
【３】デザインが適用されています。サンプルのデザインは横幅160ピクセル、縦幅500ピクセルで固定になっています。
CSSを使うと、自分のブログのデザインにふさわしいインターフェイスに仕上げることが可能です。
ただ、カスタムCSSを利用するには専門の知識が必要です。
そこで、CSSが分からなくても色々なデザインをお試しいただけるように、いくつかのサンプルCSSを用意しました。
5種類（10月19日現在）のデザインの中からお選びいただけます。
【１】「フレーム設定」の「もっと細かく設定する」をクリック。最下部の「サンプルから選ぶ」をクリックすると、別ウインドウが起動します。
【２】好きなデザインを選び、画像をクリック。そのままウインドウを閉じて、再び設定画面に移動します。
【３】デザインが適用されています。サンプルのデザインは横幅160ピクセル、縦幅500ピクセルで固定になっています。
2007年10月26日
フォントサイズを変更する
FeedWindではフォントサイズを変更することができます。
ブログやウェブサイトのフォントサイズに合わせて、自由に設定することが可能です。
（1）「フレーム設定」の「もっと細かく設定する」をクリックします。
（2）「フォントサイズ」の隣の数字を変更します。数字が大きいほど文字は大きくなり、小さいほど文字は小さくなります。
ブログやウェブサイトのフォントサイズに合わせて、自由に設定することが可能です。
（1）「フレーム設定」の「もっと細かく設定する」をクリックします。
（2）「フォントサイズ」の隣の数字を変更します。数字が大きいほど文字は大きくなり、小さいほど文字は小さくなります。
2007年10月29日
YouTubeのプレーヤーを表示する
FeedWindではYouTubeのプレーヤーをブログに貼ることができます。
好きなアーティストの作品やお気に入りの映画、偶然見つけた面白動画などを、ブログの読者と映像を共有してみたいことがあるのではないでしょうか？ YouTubeの動画再生機能がついているので、あなたのブログ上でそのまま閲覧できます。
【設定手順】今回はYouTubeのタグに特定のキーワードを含んだ動画を表示する仕組みをご紹介します。
（1）表示したいタグをセットする
「RSS（ATOM）のURL」に以下のようなURLを挿入します。これはタグに「大塚愛」を含む動画を表示する場合の例です。ここに好きなキーワードを入れてください。
「大塚愛」と「さくらんぼ」という二つの言葉を含む動画を表示させたい場合にはhttp://www.youtube.com/rss/tag/大塚愛+さくらんぼ.rssと入力すればOKです。
※「+」は必ず半角文字にします。うっかり全角にしてしまうと表示されないので注意！
（2）プレーヤーを表示する
「見出し設定」の「もっと細かく設定する」をクリックします。「Podcast/YouTubeの場合」で「プレーヤーを表示」にチェックを入れます。
（3）出力されたタグをコピー＆ペースト
FeedWindのタグが表示されるので、これをコピーして、あなたのブログやHPで動画を表示したい場所に貼り付け（ペースト）します。
（4）動画を再生する
プレーヤーが表示されたら画面上の三角形をクリックします。音も一緒に出るので注意しましょう。
好きなアーティストの作品やお気に入りの映画、偶然見つけた面白動画などを、ブログの読者と映像を共有してみたいことがあるのではないでしょうか？ YouTubeの動画再生機能がついているので、あなたのブログ上でそのまま閲覧できます。
【設定手順】今回はYouTubeのタグに特定のキーワードを含んだ動画を表示する仕組みをご紹介します。
（1）表示したいタグをセットする
「RSS（ATOM）のURL」に以下のようなURLを挿入します。これはタグに「大塚愛」を含む動画を表示する場合の例です。ここに好きなキーワードを入れてください。
http://www.youtube.com/rss/tag/大塚愛.rss
「大塚愛」と「さくらんぼ」という二つの言葉を含む動画を表示させたい場合にはhttp://www.youtube.com/rss/tag/大塚愛+さくらんぼ.rssと入力すればOKです。
※「+」は必ず半角文字にします。うっかり全角にしてしまうと表示されないので注意！
（2）プレーヤーを表示する
「見出し設定」の「もっと細かく設定する」をクリックします。「Podcast/YouTubeの場合」で「プレーヤーを表示」にチェックを入れます。
（3）出力されたタグをコピー＆ペースト
FeedWindのタグが表示されるので、これをコピーして、あなたのブログやHPで動画を表示したい場所に貼り付け（ペースト）します。
（4）動画を再生する
プレーヤーが表示されたら画面上の三角形をクリックします。音も一緒に出るので注意しましょう。
2007年10月30日
ポッドキャスティングをブログで再生する
自分でポッドキャスティングを配信していたり、お気に入りのポッドキャスティングを他の人と共有したいときに便利な機能が備わっています。
ポッドキャスティングのURLを入力すると、ブログ上で再生できるプレーヤーを表示することができます。ここでは、【サンプル】と【設置方法】を説明します。
【サンプル】
【設定方法】
（1）ポッドキャスティングのURLを入力
ブログに表示したいポッドキャスティングのURLを「RSS（ATOM）のURL」に入力します。
ポッドキャスティングを探すには番組を紹介しているポータルサイトが便利です。
■Podcasting Juice: http://www.podcastjuice.jp/
■Yahoo!ポッドキャスト: http://podcast.yahoo.co.jp/
Podcasting Juiceでは下のボタンをクリックして表示されたページのURLを貼り付けます。
（2）プレーヤーを表示する
見出し設定」の「もっと細かく設定する」をクリックします。詳細設定画面が表示されるので、「Podcast/YouTubeの場合」の「プレーヤーを表示」をチェックします。
初期設定では
アイコンが表示されていますが、この状態で「右クリック」→「対象をファイルに保存」（Windowsの場合）で自分のPCに保存することができます。
（3）タグを自分のブログに貼る
FeedWindのタグが発行されます。このタグをコピーして、自分のブログやウェブサイトの好きな部分に貼り付けます。
プレーヤーが無事に表示されたら、再生ボタンをクリックして、ポッドキャスティングの番組を再生してみてください。
ポッドキャスティングのURLを入力すると、ブログ上で再生できるプレーヤーを表示することができます。ここでは、【サンプル】と【設置方法】を説明します。
【サンプル】
【設定方法】
（1）ポッドキャスティングのURLを入力
ブログに表示したいポッドキャスティングのURLを「RSS（ATOM）のURL」に入力します。
ポッドキャスティングを探すには番組を紹介しているポータルサイトが便利です。
■Podcasting Juice: http://www.podcastjuice.jp/
■Yahoo!ポッドキャスト: http://podcast.yahoo.co.jp/
Podcasting Juiceでは下のボタンをクリックして表示されたページのURLを貼り付けます。
（2）プレーヤーを表示する
見出し設定」の「もっと細かく設定する」をクリックします。詳細設定画面が表示されるので、「Podcast/YouTubeの場合」の「プレーヤーを表示」をチェックします。
初期設定では
アイコンが表示されていますが、この状態で「右クリック」→「対象をファイルに保存」（Windowsの場合）で自分のPCに保存することができます。（3）タグを自分のブログに貼る
FeedWindのタグが発行されます。このタグをコピーして、自分のブログやウェブサイトの好きな部分に貼り付けます。
プレーヤーが無事に表示されたら、再生ボタンをクリックして、ポッドキャスティングの番組を再生してみてください。
2007年11月12日
記事数を設定する
FeedWindでは横幅・高さを設定すると、それにあわせて表示する記事の数を自動的に調整します。大きさを指定するだけで、あとは何もせずにきれいに表示されるようになっています。
ただ、「最近記事を必ず5つ表示したい」という場合もあるかもしれません。ここではちょっとした“裏技”を紹介します。少しだけ設定が複雑になりますが「見出し設定」と「本文設定」の「最大文字数」をうまく調整すると実現可能です。
ただし、この方法ではフィードの中身によって4つになったり、5つになったりする場合もあります。その辺はフィードを配信している側の設定の問題になりますので、FeedWindでは調整のしようがありません。
今回はCNETの記事を3つ表示する例をご紹介します。皆さんも表示したいフィードに合わせて、この方法で応用してみてください。
（1）記事のタイトルを1行に収める
初期設定では「見出し設定」の「最大文字数」が20文字になっています。ただし、これでは図のように記事のタイトルが折り返してしまいます。
折り返さないようにするために、これを13に設定してみます。
（2）本文を2行に収める
初期設定では「本文設定」の「最大文字数」が40文字になっています。これでは本文が3行になってしまい、記事が2つしか表示されません。そこで、必ず2行で収まるように、最大文字数を27文字に設定します。
「本文設定」の「もっと細かく設定する」をクリックすると設定フォームが表示されるので、「最大文字数」を27に設定します。
すると、以下の図のように見出し1行、本文2行に収まり、記事が3件表示されるようになります。みなさんも、この方法で表示数やレイアウトを調整してみてください。
ただ、「最近記事を必ず5つ表示したい」という場合もあるかもしれません。ここではちょっとした“裏技”を紹介します。少しだけ設定が複雑になりますが「見出し設定」と「本文設定」の「最大文字数」をうまく調整すると実現可能です。
ただし、この方法ではフィードの中身によって4つになったり、5つになったりする場合もあります。その辺はフィードを配信している側の設定の問題になりますので、FeedWindでは調整のしようがありません。
今回はCNETの記事を3つ表示する例をご紹介します。皆さんも表示したいフィードに合わせて、この方法で応用してみてください。
（1）記事のタイトルを1行に収める
初期設定では「見出し設定」の「最大文字数」が20文字になっています。ただし、これでは図のように記事のタイトルが折り返してしまいます。
折り返さないようにするために、これを13に設定してみます。
（2）本文を2行に収める
初期設定では「本文設定」の「最大文字数」が40文字になっています。これでは本文が3行になってしまい、記事が2つしか表示されません。そこで、必ず2行で収まるように、最大文字数を27文字に設定します。
「本文設定」の「もっと細かく設定する」をクリックすると設定フォームが表示されるので、「最大文字数」を27に設定します。
すると、以下の図のように見出し1行、本文2行に収まり、記事が3件表示されるようになります。みなさんも、この方法で表示数やレイアウトを調整してみてください。
2008年01月24日
アメブロでFeedWindを表示させる
アメーバブログ（以下「アメブロ」）でFeedWindを表示させる方法をご紹介します。
アメブロでFeedWindを利用するには「フリープラグイン」という機能を利用します。
～アメブロでのFeedWind設定手順～
（1）まず、FeedWindのトップページでタグを発行して、コピー&ペーストします。
（2）次にアメブロの管理画面に移動し、「サイドバーの基本設定」をクリックします。
（3）画面を下までスクロールして、フリープラグインの「設定」ボタンをクリック
（4）コピーしたFeedWindのタグをテキストエリアに貼り付けます。最後に「設定」ボタンをクリック。
（5）最後に「サイドバーの配置」をクリックして別の画面に移動します。
そこで「フリープラグイン」をサイドバーの好きな位置に配置します。
以下の図では青色で示したところに配置しました。
最後に「保存」ボタンを押して終了です。
これでブログにアクセスするとFeedWindがアメブロに表示されています。
アメブロでFeedWindを利用するには「フリープラグイン」という機能を利用します。
～アメブロでのFeedWind設定手順～
（1）まず、FeedWindのトップページでタグを発行して、コピー&ペーストします。
（2）次にアメブロの管理画面に移動し、「サイドバーの基本設定」をクリックします。
（3）画面を下までスクロールして、フリープラグインの「設定」ボタンをクリック
（4）コピーしたFeedWindのタグをテキストエリアに貼り付けます。最後に「設定」ボタンをクリック。
（5）最後に「サイドバーの配置」をクリックして別の画面に移動します。
そこで「フリープラグイン」をサイドバーの好きな位置に配置します。
以下の図では青色で示したところに配置しました。
最後に「保存」ボタンを押して終了です。
これでブログにアクセスするとFeedWindがアメブロに表示されています。
2008年01月30日
設定を保存する
FeedWindの設定内容を保存し、次回訪問時に呼び出す方法をご説明します。
（1）設定を保存する
まずフィードを好きなように変更します。
設定をしたら「＞設定を保存」をクリックします。
→
変更前 変更後に「＞設定を保存」をクリック
もし以前に保存している設定がある場合、クリックをすると上書きされてしまうので注意してください。
保存できる設定は1つです。
（2）設定を呼び出す（次回訪問時）
次回訪問した際には初期設定状態になっているので、
「＞前回保存した設定を呼び出す」をクリックすると前回の設定が呼び出されます。
なお、Internet Explorer6をお使いの場合は、「前回保存した設定を呼び出す」をクリックした後、
ブラウザの「更新」ボタンをクリックしてください。
→
「＞前回保存した設定を呼び出す」をクリック 保存した内容が呼び出されます
注意
・この機能はcookieが使用できない環境ではご利用になれません。ご利用の際はcookieを有効にしてください。
（1）設定を保存する
まずフィードを好きなように変更します。
設定をしたら「＞設定を保存」をクリックします。
→変更前 変更後に「＞設定を保存」をクリック
もし以前に保存している設定がある場合、クリックをすると上書きされてしまうので注意してください。
保存できる設定は1つです。
（2）設定を呼び出す（次回訪問時）
次回訪問した際には初期設定状態になっているので、
「＞前回保存した設定を呼び出す」をクリックすると前回の設定が呼び出されます。
なお、Internet Explorer6をお使いの場合は、「前回保存した設定を呼び出す」をクリックした後、
ブラウザの「更新」ボタンをクリックしてください。
→「＞前回保存した設定を呼び出す」をクリック 保存した内容が呼び出されます
注意
・この機能はcookieが使用できない環境ではご利用になれません。ご利用の際はcookieを有効にしてください。