More Channels
Showcase
- RSS Channel Showcase 7285062
- RSS Channel Showcase 7260635
- RSS Channel Showcase 1718522
- RSS Channel Showcase 9361517
Articles on this Page
- 07/11/12--12:18: _フォントを変更する
- 07/11/12--12:29: _フォントサイズを変更する
- 07/11/12--12:32: _枠線を消す
- 07/11/12--12:33: _背景色を変える
- 07/11/12--12:36: _本文の色を変える
- 07/11/12--12:49: _見出しの色を変える
- 07/11/12--12:53: _カスタムCSSを設定する
- 07/11/12--12:55: _サンプルからデザインを選ぶ
- 07/11/12--13:00: _記事数を設定する
- 07/11/12--13:03: _設定を保存する
- 11/05/12--17:34: _ポッドキャスティングをブログで再生する
- 11/05/12--17:36: _アメブロでFeedWindを表示させる
- 11/05/12--17:50: _読者のブログに自分のフィードを貼ってもらう
- 11/05/12--17:56: _YouTubeのプレーヤーを表示する
- 02/03/13--20:13: _DropboxでカスタムCSSを無料で...
- 02/11/13--19:27: _カスタムCSSを使ってFeedWind...
- 02/21/13--15:00: _ブログの更新情報をほかのブロガーに貼っ...
- 03/09/13--17:24: _Facebookページの更新情報をFe...
- 03/21/13--21:44: _ツイッターのタイムラインを表示するTw...
- 04/25/13--01:46: _フィード検索でRSSを簡単入力
- 04/29/13--11:40: _更新通知をメールで配信してくれる『Ma...
- 05/20/13--22:52: _FeedWindで画像や写真を表示する方法
- 06/23/13--22:59: _FeedWindの新デザインを試験公開...
- 07/01/13--00:36: _お知らせ:スクロールバーをスマートフォ...
- 10/03/13--18:30: _デザインも新たに、次なるステージへのス...
Channel Description:
- 自分のつぶやきを表示できる
- 自分がフォローしている人たちのつぶやきも表示できる(タイムライン表示)
- 色合いやフォントサイズなど、自分のサイトに合わせてカスタマイズできる
フォントを変更するには「フレーム設定」の「もっと細かく設定する」をクリックします。
プルダウンから希望のフォントファミリーを選択します。
希望のフォントがない場合は、コードに直接記入してください。記入した内容がそのまま反映されます。表示崩れ等の原因になるため、正確に記入する必要があります。
また、下記の画像のように、日本語を含む場合は必ずシングルクォーテーションで囲ってください。ダブルクォーテーションだと、javascriptが誤動作する恐れがあります。
カスタムCSSを利用する場合は、カスタムCSSの設定が優先されるためフォントの設定は無効になります。フォントを指定するには、カスタムCSSの中でfont-familyを指定してください。
FeedWindではフォントサイズを変更することができます。
ブログやウェブサイトのフォントサイズに合わせて、自由に設定することが可能です。
(1)「フレーム設定」の「もっと細かく設定する」をクリックします。
(2)「フォントサイズ」の隣の数字を変更します。数字が大きいほど文字は大きくなり、小さいほど文字は小さくなります。
初期設定では周囲にグレーの枠線を表示しています。この枠線を消して、サイトのデザインと調和させたい場合は、詳細設定で消すことが可能です。
枠線を消去するには、フレーム設定「もっと細かく設定する」をクリック。
すると、詳細設定項目が下記の図のように表示されます。
次に枠線の「表示しない」にチェックを入れるだけです。
背景色を変えるには「見出し設定」の「もっと細かく設定する」をクリックします。
設定項目が開くので、「背景色」の横にある■のカラー部分をクリック。
カラーパレットが開くので、好きなカラーを選択します。
選択した色がプレビュー画面に表示されます。
背景を変更することで、ブログやウェブサイトのデザインになじませることができます。
デザインに合わせて、自由にカラーを変更してみてください。
本文の色をを変えるには「本文設定」の「もっと細かく設定する」をクリックします。
詳細設定画面が表示されるので、「フォントカラー」を調整します。
■の色が付いている部分をクリックすると、図のようにカラーパレットが表れます。
好きな色の部分をクリックすと、プレビュー画面に反映されます。
なお、カラーパレットの右側にあるスライダーを上下すると、パレットの色合いが変わります。
選択した色でよければ「OK」ボタンを、また元に戻すときは「Cancel」ボタンをクリックしてください。
RSSVIEWの見出しの色を変更するには、「見出し設定」の「もっと細かく設定する」を開きます。
「フォントカラー」と書かれている項目の隣にある■をクリックすると、図のようにカラーパレットが開きます。
好きな色の部分をクリックすと、プレビュー画面に反映されます。
なお、カラーパレットの右側にあるスライダーを上下すると、パレットの色合いが変わります。
選択した色でよければ「OK」ボタンを、また元に戻すときは「Cancel」ボタンをクリックしてください。
◎カスタム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を利用するには専門の知識が必要です。
そこで、CSSが分からなくても色々なデザインをお試しいただけるように、いくつかのサンプルCSSを用意しました。
5種類(10月19日現在)のデザインの中からお選びいただけます。
【1】「フレーム設定」の「もっと細かく設定する」をクリック。最下部の「サンプルから選ぶ」をクリックすると、別ウインドウが起動します。
【2】好きなデザインを選び、画像をクリック。そのままウインドウを閉じて、再び設定画面に移動します。
【3】デザインが適用されています。サンプルのデザインは横幅160ピクセル、縦幅500ピクセルで固定になっています。
(1)設定を保存する
まずフィードを好きなように変更します。
設定をしたら「>設定を保存」をクリックします。
変更前→ 変更後に「>設定を保存」をクリック
もし以前に保存している設定がある場合、クリックをすると上書きされてしまうので注意してください。
保存できる設定は1つです。
(2)設定を呼び出す(次回訪問時)
次回訪問した際には初期設定状態になっているので、
「>前回保存した設定を呼び出す」をクリックすると前回の設定が呼び出されます。
なお、Internet Explorer6をお使いの場合は、「前回保存した設定を呼び出す」をクリックした後、
ブラウザの「更新」ボタンをクリックしてください。
注意
・この機能はcookieが使用できない環境ではご利用になれません。ご利用の際はcookieを有効にしてください。
ポッドキャスティングのURLを入力すれば、ブログ上で再生できるプレーヤーを表示できます。ここでは、【サンプル】と【設置方法】を説明します。なお、ブラウザによってはWindows Media Playerプラグインの実行を求められることがあります。アラートが表示されるので、ご利用の際にはご確認をお願いします。
【サンプル】
【設定方法】
(1)ポッドキャスティングのURLを入力ブログに表示したいポッドキャスティングのURLを「RSS(ATOM)のURL」に入力します。
(2)プレーヤーを表示する
見出し設定」の「もっと細かく設定する」をクリックします。詳細設定画面が表示されるので、「Podcast/YouTubeの場合」の「プレーヤーを表示」をチェックします。
初期設定ではPodcastのアイコンが表示されています。アイコンにカーソルを合わせて「右クリック」→「対象をファイルに保存」(Windowsの場合)で自分のPCに保存することができます。
(3)タグを自分のブログに貼る
FeedWindのタグが発行されます。このタグをコピーして、自分のブログやウェブサイトの好きな部分に貼り付けます。プレーヤーが無事に表示されたら、再生ボタンをクリックして、ポッドキャスティングの番組を再生してみてください。
アメブロでFeedWindを利用するには「フリープラグイン」という機能を利用します。
~アメブロでのFeedWind設定手順~(1)まず、FeedWindのトップページでタグを発行して、コピー&ペーストします。
(2)次にアメブロの管理画面に移動し、「サイドバーの基本設定」をクリックします。
(3)画面を下までスクロールして、フリープラグインの「設定」ボタンをクリック
(4)コピーしたFeedWindのタグをテキストエリアに貼り付けます。最後に「設定」ボタンをクリック。
(5)最後に「サイドバーの配置」をクリックして別の画面に移動します。
そこで「フリープラグイン」をサイドバーの好きな位置に配置します。
以下の図では青色で示したところに配置しました。
最後に「保存」ボタンを押して終了です。
これでブログにアクセスすると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://feed.mikle.com/images/btn_feedbutton.gif" border="0" /></a>
*FeedWindを利用するユーザーの方々には、FeedWindの利用規約をお守りいただきます。
今回は【キーワードを含んだ動画を表示する】方法と、Youtubeの【チャンネルの動画を表示する】方法をご紹介します。
【キーワードを含んだ動画を表示する】
AKB48など、特定のキーワードを含んだ動画を表示することができます。【修正 2013年1月7日】
下記のURLをコピーして、AKB48となっている部分を任意の文字列に変更します。
https://gdata.youtube.com/feeds/api/videos?q=AKB48&orderby=relevance
【チャンネルの動画を表示する】
チャンネルでRSSを配信している場合、FeedWindでチャンネルの最新情報を表示することができます。AKB48、ポニーキャニオン、ビデオニュースなど、プロモーション用に最新動画を掲載したページへをチャンネルとして作成しています。
チャンネルのURLをコピーします。
FeedWindでは、デザインをもっとカスタマイズしたい方のために、カスタムCSSを利用できることはご存知でしょうか?
CSSを利用するには、コーディングやウェブデザインについての知識が必要になりますが、デフォルトの設定では物足りないという方はぜひチャレンジしてみてください。
カスタムCSSに関するチュートリアルはこちら
ところが、「さっそくカスタムCSSを使ってみよう」と思っても、アメーバブログなど国内の主要ブログではカスタムCSSが利用できないケースが多いのです。そのため、これまではカスタムCSSの利用には、自分でレンタルサーバを借りる必要があり、設定の手間やコストがかかってしまいました。
しかし、その課題もDropboxを利用することで解決することができます。
レンタルサーバを借りることなく、カスタムCSSを保存・公開することができるのです。
ご存知の方も多いと思いますが、Dropboxとはファイルをクラウドに保存するためのオンラインストレージサービスで、原則2GBまで無料(他のユーザーを紹介すれば無料で利用できる枠が広がります)。デフォルトではプライベート設定になっていますが、保存したファイルを公開すると静的なURLが発行されます。そのURLをFeedWindのカスタムCSSの欄に記述すればOKです。言ってみれば、Dropboxを簡易のWebサーバのように利用するようなイメージです。
(1)Dropboxにファイルをアップロード
↑
公開設定済みのフォルダの中にファイルをアップロードします。
(2)public URLをコピーする
↑
ファイルを右クリックして「公開リンクのコピー」を選択
↑
「クリックボードへコピー」をクリック
(3)FeedWindのカスタムCSS欄にURLを保存する
↑
FeedWindの「フレーム設定」>「もっと細かく設定する」をクリックして、「カスタムCSS(URLを入力)」欄にコピーしたURLを張り付けます。
カスタムCSSを利用するにあたって必要な情報(idやclass名など)は、こちらのチュートリアルにまとめてありますので参考にしてください。
今回紹介したウェブサービス
Dropbox
最近ではボタンや枠組みなどで、角丸のレイアウトが一般的に使われるようになりました。ここ数年でCSSの新しい仕様が策定されて、スマートフォンなどでも利用されるようになっています。
FeedWindでも、カスタムCSSを利用することで角丸を実現できます。
カスタムCSSにborder-radiusを指定することで、サンプルのようなレイアウトにすることが可能です。
(CSSは中上級者向けの機能になりますが、今後、簡単に実装できるサンプルも追加していく予定ですのでお楽しみに!)
この値を変更することで丸みの度合いが変わります。
以下のコードをコピペして、CSSをサーバにアップしてご利用ください。サーバをお持ちでない方向けに、Dropboxを擬似Webサーバとして利用する方法もご紹介しています。
1. /*##########Container##########*/FeedWindの「フレーム設定」の「もっと細かく設定する」をクリックして、「カスタムCSS(URLを入力)」にCSSのURLをペーストするだけです。
2. #container{margin:0;padding:0;width:200px;height:300px;font-size:12px;font-color:#FFFFFF;border-radius:10px 10px 10px 10px;background-color:#9AB1D2;}
1. /*##########Header##########*/
2. #header{width:200px;height:10px;margin:10px 0px 10px 0;padding:10px 5px 10px 5px;font-color:#FFFFFF;}
3. #header.feed_title{margin:10px 0px 50px 0;padding:10px 5px 50px 5px;;font-weight:bold;}
4. #header.feed_title a:link{color:#FFFFFF;text-decoration:none;}
5. #header.feed_title a:visited{color:#FFFFFF;text-decoration:none;}
6. #header.feed_title a:hover{color:#FFFFFF;text-decoration:underline;}
7. #header.feed_title a:active{color:#FFFFFF;text-decoration:none;}
8. /*##########Content##########*/
9. #content{margin:0;padding:5px 5px 10px 10px;}
10. #content.feed_item{margin:10px 0 10px 0px;padding:0 0 0px 0px;}
11. #content.feed_item_title{margin:1px 20px 1px 3px;padding:1px 0 1px 3px;color:#FFFFFF;font-weight:bold;}
12. #content.feed_item_title a:link{color:#FFFFFF;text-decoration:none;}/*feed_item_title:link*/
13. #content.feed_item_title a:visited{color:#FFFFFF;text-decoration:none;}/*feed_item_title:visited*/
14. #content.feed_item_title a:hover{color:#FFFFFF;text-decoration:underline;}/*feed_item_title:hover*/
15. #content.feed_item_title a:active{color:#FFFFFF;text-decoration:none;}/*feed_item_title:active*/
16. #content.feed_item_description{margin:0 0 0 3px;padding:0 0 0 3px;color:#FFFFFF;line-height:135%;}/*feed_item_description:active*/
ただし、Internet Explorerの古いバージョンでは、角丸が反映されないのでご注意を!Internet Explorer9.0以降、その他Google ChromeやFirefoxで利用が可能です。
ぜひご参考にしてください。
もっとたくさんの人たちに、サイトやブログのコンテンツを知ってもらいたい!
ウェブサイトを運営されている方の多くがそんな気持ちをお持ちではないでしょうか。
今回はFeedWindを活用したコンテンツのネットワークづくりのアイデアをご紹介します。
更新情報をほかのブロガーに貼ってもらうことで、コンテンツを上手に拡散している実例をピックアップしてみました。
サンプルコードを張る
FeedWindをほかのサイトに貼ってもらえれば、皆さんのサイトorブログへの誘導窓口が一つ増えたことになり、訪問者数の増加につながります。
「このサイトの情報をぜひ貼りたい!」と思ってもらえるような魅力的なコンテンツを提供することは大前提ですが、サイトに貼るための手間をできるだけ軽減してあげることも大切なポイントです。
セイチャット
http://www.saychat.jp/link.htmlセイチャットでは、サンプルのコードを用意して1つのページにまとめています。サイトの訪問者がこのページにアクセスをして、あらかじめ用意されたタグをコピペするだけでよいわけです。
edispecialists
http://www.edispecialists.com/rss-edi-jobs-widget.html海外の事例になりますが、複数のデザインを用意して、訪問者に好きなデザインを選択できるようにしてあげたサイトもあります。こちらは、サイト制作のプロの方が作っていますが、タブで切り替えができるアイデアはとても参考になります。
ただ、こういうページを用意するのは大変だ…と思われる方もいらっしゃると思います。
そこで、FeedWindではSpread Your Feeds(あなたのコンテンツを広げよう!)という機能を用意しています。
「http://feed.mikle.com/feeds/setting/~」
↑
この~の部分にブログやRSSのURLを記述してください。
以下のようなフォーマットです。
http://feed.mikle.com/feeds/setting/あなたのブログのURL
そうすると、あらかじめFeedWindが表示されたページが自動的に生成されます。
以下の画像は、FeedWind日本語版のチュートリアルのRSSを表示したページです。
みなさんのサイトからそのページヘのリンクを貼ればOKです。
http://feed.mikle.com/feeds/setting/http://blogjp.feed.mikle.com/
実際の使い方は以下のチュートリアルにまとめていますので参考にしてください。
http://blogjp.feed.mikle.com/2012/11/blog-post_6.html
現在、Facebookは国内の利用者が1000万人を超えています。
最近ではFacebookページを運用する企業の担当者やブロガーも増えているようです。
ユーザーとの情報交換やコミュニティの運営、さらにはサービスのプロモーションに至るまで、Facebookページの活用の幅はとても広がっています。
今回は、そのFacebookページのRSSを取得してFeedWindで表示する方法をご紹介します。
Facebookページ用ブログパーツとして活用する方法です。
RSSの取得方法
意外と知られていないのですが、Facebookページでは公式にRSSが配信されています。
以下のフォーマットでRSSが生成されます。
http://ja-jp.facebook.com/feeds/page.php?id=[id]&format=rss20
赤で示した[id]の部分は、表示したいFacebookページによって異なります。
Facebookページには固有のIDが付与されており、それを上記該当部分に入れるだけでOK。
◎IDを確認する
このIDを確認するにはまず、以下のようなURLを叩きます。
http://graph.facebook.com/hiramekizaidan
この赤で示したところは、各FacebookページのURLの固有の部分です。
ページ内に以下の様な文字列が表示されるので、そこからIDを取得します。
◎もっと簡単にRSSを知る
また、ドイツ語ですが簡単にRSSを取得できるサイトがあります。
これがとっても便利!
http://www.lottaleben.biz/rss-feed-url-generator
FacebookページのURLを入力して「los!」をクリックするだけで、RSSのURLが表示されます。
FeedWindに掲載する
こうして生成したURLをFeedWindで設定します。
URLを入力してデザインのカスタマイズをするだけです。
◎文字だけバージョン
◎画像つきHTML有効バージョン
また、画像も表示したい場合には「本文設定」の「もっと細かく設定する」をクリックして表示される「htmlタグ」を「有効にする」を選択します。すると、Facebookページに表示した内容がそのまま表示されます。
もちろん、FeedWindなら横幅や縦幅のサイズのほか、デザインや色合いをカスタマイズできます。
Facebookページの存在を通知したり、更新情報をお知らせするツールとしてご活用されてみてはいかがでしょうか?
ブログやウェブサイトを運営されている方の中には、Twitterで情報発信をしている方も多いのではないでしょうか?
従来、TwitterはRSSを配信していたためFeedWindでも表示できました。ところが、Twitterの方針転換で、残念ながらRSSの配信が停止されてしまいました。
そこで、今回はTweetsWindをご紹介させていただきます。
TweetsWindは、FeedWindの姉妹サイト的な存在で、Twitterのタイムラインの表示に特化した専用のブログパーツです。(もちろん、ブログだけでなく、一般のサイトに表示できます)
TweetsWindの特徴は
FeedWindと同じように、貼り付けコードをサイト内にペーストするだけでOKです。
ぜひ一度お試しください。
今回ご紹介したサイト
TweetsWind
http://www.tweetswind.com/
FeedWindのご利用に当たっては、ブログのURLやRSSを入力する必要があります。
URLが長かったり、他人のブログの場合の時などは、入力に手間がかかります。
FeedWindでは、検索機能を利用して、簡単にRSSを入力できるフィード検索をご用意しています。
すると小窓が立ち上がりますので、キーワードを入力します。
ここは「Yahooニュース」を検索した例です。Yahooニュースに関連するRSSが表示されるので、いずれかをクリックします。
クリックすると小窓が閉じて、URLが入力された状態になります。
プレビューもそれに合わせて変わります。
このように検索サイトを利用する要領で、簡単にRSSを入力することができます。
ぜひご活用ください。
FeedWindを利用している方々を拝見していると、ブログを活用してお知らせや最新情報を配信しているケースが見られます。発信した情報を多くの人たちに、しかも確実に届けたいとお考えの方も多いことでしょう。
FeedWindはブログの更新情報をサイト内に表示できますが、残念ながらメールなどでプッシュする機能は付いていません。
そこで今回は、RSSの新着記事をメールで配信してくれる「MailWind」というサービスをご紹介したいと思います。ブログに関心を持ってくれた人たちに継続的な読者になってもらうために、FeedWindとMailWindを併用する方法をご説明します。
■MailWind(メールウインド)とは?
MailWindはFeedWindの姉妹サイトで、ブログなどの新着記事がアップされた時に、更新通知をメールで配信してくれるサービス(無料)です。MailWind
http://mail-wind.com/
利用にあたっては、特別なプログラムの知識は必要ありません。FeedWindと同じように、発行されたコードをサイト内に貼り付ければOKです。記事が更新されたらメールが配信される仕組みです。登録も不要ですので、お手軽に始めることができます。
まず、MailWindのホームページにアクセスして、貼り付けコードをコピーします。このコードをサイト内に貼り付けるだけです。
ただし、単純に貼るだけだとそのページのRSSが自動的に配信されるだけですが、別のページのRSSを配信したい場合に備えて、以下のようなオプションを用意しています。
mailwind_siteurl="サイトのURL";
mailwind_rssurl="RSSのURL";
貼付けコードの該当箇所に必要な情報を追記してください。
例えば、お店のウェブサイト(http://omise-hp.com/)に店長ブログ(http://omise-blog.com/)の更新情報を掲載したいときは、mailwind_siteurlの欄に店長ブログのURLを記載します。そうすることで、お店のウェブサイト上に、店長ブログの更新通知を受け取る窓口を設置できるというわけです。
■FeedWindとMailWindの併用でリピーターを獲得する
MailWindの応用編として今回ご紹介したいのは、FeedWindとの併用です。併用といっても難しいものではなく、単純にFeedWindのコードの下にMailWindのコードを貼り付けるだけです。
FeedWindとMailWindをこのように活用することで、サイトを見ている人たちに更新通知をメールで受け取るように促すことができます。更新通知をきっかけに、サイトに再訪してくれるきっかけになることと思います。更新通知手段としてTwitterやFacebookを利用される方も増えていますが、MailWindは一度サイトに設置するだけで手軽に利用できますので、ぜひご活用いただければと思います。
参考までに、上の画像のようにする表示するサンプルコードを記述しておきます。
【ここからFeedWindのタグ】
<!-- start feedwind code -->
<script type="text/javascript">
<!--
rssmikle_url="http://ameblo.jp/tsuji-nozomi/";
rssmikle_frame_width="230";
rssmikle_frame_height="280";
rssmikle_target="_blank";
rssmikle_font="";
rssmikle_font_size="12";
rssmikle_border="on";
rssmikle_css_url="";
rssmikle_title="on";
rssmikle_title_bgcolor="#0066FF";
rssmikle_title_color="#FFFFFF";
rssmikle_title_bgimage="";
rssmikle_item_bgcolor="#FFFFFF";
rssmikle_item_bgimage="";
rssmikle_item_title_length="20";
rssmikle_item_title_color="#666666";
rssmikle_item_border_bottom="on";
rssmikle_item_description="on";
rssmikle_item_description_length="40";
rssmikle_item_description_color="#666666";
rssmikle_item_date="off";
rssmikle_item_description_tag="off";
rssmikle_item_podcast="icon";
//-->
</script>
<script type="text/javascript" src="http://feed.mikle.com/js/rssmikle.js"></script>
<!-- end feedwind code -->
【ここからMailWindのタグ】
<!-- start mailwind code -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<script type="text/javascript" charset="utf-8" src="http://www.mail-wind.com/js/rss_regist.js"></script>
<script type="text/javascript">
<!--
mailwind_siteurl="http://ameblo.jp/tsuji-nozomi/";
mailwind_rssurl="";
mailwind_functionurl="";
mailwind_title="";
//-->
</script>
【FeedWindとMailWindのリンクを貼ってください】
<div style="font-size:10px;">
<a href="http://feed.mikle.com/" target="_blank" style="color:#CCCCCC;">FeedWind</a> | <a href="http://mail-wind.com/" target="_blank" style="color:#CCCCCC;">RSS更新通知パーツ</a>
</div>
<!-- end mailwind code -->
ただし、MailWindはまだまだ開発の途上ということもあり、一部のサイトでは表示が見づらくなるケースがございます。例えば、背景色やフォントカラーを変更できないので、背景が黒のサイトでは文字が見えないといった状況です。
今後、そういった点を改良し、みなさんの情報発信を幅広くお手伝い出きればと考えております。メールの配信数が確認できたり、メールからのサイトの誘導数がGoogle Analyticsなどの解析ツールで分析できたり、マーケティング活動のお役に立てるように日々改善・改良を試みて参ります。
FeedWindでは、ブログの更新情報を表示するために「RSS」の情報を取得しています。
ブログのサイドバーなどに、オレンジ色のRSSアイコンをご覧になる機会は多いと思います。
RSSの中には、ブログのタイトル、記事のタイトル、記事の内容、投稿した日時などの情報が記載されています。
RSSの仕様にもよるのですが、最近では記事の内容の中に、投稿した写真や画像の情報も掲載するのが一般的になりました。
FeedWindでは、それらを「本文設定」>「もっと細かく設定する」で「htmlのタグ」>「有効にする」を選択することで、画像や写真などを表示することができるようになります。
「本文設定」の「htmlのタグ」を有効にします。 |
「htmlのタグ」を「有効にする」と、図のようにスクロールバーが表示されるようになります。
スクロールをすることで、すべての記事を見られるようになっています。
画像が表示され、右側にスクロールバーが表示されます。 スクロールすることで、すべての記事が閲覧できます。 |
なお、現在、htmlのタグを有効にした場合、iPhoneやiPadで表示上の不具合がでることが分かっています。こちらは、近日中に改善し、スクロールバーの仕様も変更することになっております。予めご了承ください。
更新情報をよりリッチに表示することができるこの機能をぜひお試しください。
ただし、アメーバブログなど、一部のブログでは画像を適切に取得できないケースが見られます。
これは、ブログサービス側の設定で外部サービスから画像を呼び出せない仕様になっていたりすることが多いです。
(その場合、お手数ですがお使いのブログサービスのサポート窓口にお尋ねください)
この度、試験公開用のプレビュー版として、FeedWindの新デザインを公開しました。
長年、ベータとして運用してきたサービスを正式版に格上げして、さらに使いやすいサービスにすべく変更を加えました。
現在は、これまでのデザインと並行する形での試験公開です。皆様からお寄せいただいたフィードバックをもとに、正式公開までにさらに良いものに仕上げていきたいと考えています。
FeedWindプレビュー(試験公開)版
http://preview.feed.mikle.com/ja/
なお、今後も現在ご利用中のFeedWindはこれまでと変わりなくご利用できます。
引き続き、ご利用の皆様の使いやすさを向上すべくサービスを改善してまいります。皆様からのご意見・ご感想をお待ちしております。
FeedWindでは、HTMLタグを有効にするとRSS内の画像やリンクをそのまま表示することができます(参考:FeedWindで画像や写真を表示する方法)。
その際に表示されるスクロールバーが、この度スマートフォンにも対応いたしました。
先日公開した「プレビュー(試験公開)版」でのみお試しいただくことができます。
この画像のように、FeedWindの右側にスクロールバーが表示されます。フィードの内容を際だたせるため、シンプルなデザイン・色合いを採用しました。
従来のスクロールバーは、iPhoneやiPadでは適切に表示されず、フィードの中身が全て表示されてしまうという課題がありました。
今回リリースした新しいスクロールバーを利用すれば、PC・スマートフォン・タブレットのどの端末でも通常どおりに表示されます。
スマートフォンでウェブを閲覧する機会が増えているということもありますので、この機会にぜひご活用ください。
◆FAQ◆
Q1:HTMLを有効にして、スクロールバーを表示するにはどうすればいいですか?まずは、「プレビュー(試験公開)版」にアクセスをします。
(1)「本文設定」で「もっと細かく設定する」をクリックします。
(2)「HTMLタグ」で「有効にする」にチェックを入れます。
この状態で右側のプレビューに正しく反映されているかご確認ください。
Q2:すでにサイトで利用しているFeedWindを新スクロールバーに対応するにはどうすればいいですか?
現在、すでにご自身のサイトでFeedWindをご利用中の場合、貼り付けてあるFeedWindのタグの一部を変更するだけで結構です。
タグに記載されている「rssmikle_item_description_tag」の値を、on_scrollbarからon_flexcrollに変更してください。
旧バージョン
rssmikle_item_description_tag="on_scrollbar";
新バージョン
rssmikle_item_description_tag="on_flexcroll";
Q3:いままでのスクロールバーは使えなくなるのですか?
Q2のon_scrollbarという状態のままでも、今まで通りお使いになれます。
ただし、iOSの仕様上、iPhoneやiPadで適切に表示がされないこともありますので、新しいスクロールバーへの移行をお勧めいたします。
Q4:プレビュー(試験公開)版が終了したら新スクロールバーはどうなりますか?
プレビュー(試験公開)版が終了した後も、そのまま継続してご利用いただけます。
Q5:レスポンシブ・ウェブデザインに対応していますか?
大変申し訳ございません。現在のバージョンでは対応していません。
ただし、現在、すでに開発を進めておりまして、まもなく公開の予定です。
画面の横幅サイズに合わせて、FeedWindの横幅やフォントサイズを自動調整する機能を新しく導入する予定です。
本日、FeedWindのデザインを大幅にリニューアルしました。
6月よりプレビュー(試験公開)版として公開してきましたが、本日、正式版へと昇格いたしました。
今回のリニューアルでは、より便利で使いやすいRSS表示用ブログパーツを目指し、ナビゲーションの改善を行いました。ご要望の多かった様々な機能を盛り込むべく、現在、さらなる新規開発を進めています。
このリニューアルは、FeedWindが次のステージへステップアップするための基礎という位置づけです。ここをきっかけに、サービスの拡充を行ってまいります。その内容については、近日中にこのブログでもご紹介したいと思います。
FeedWindは2007年10月にBeta版としてスタートしました。
現在では日本だけでなく、海外でも沢山の方々にご利用いただいております。それに対応すべく、FeedWindのスタッフの居住地も日本、韓国、アメリカ、インドなど多岐にわたります。
今回、日本語版トップページのURLが変更になったのもFeedWindのグローバル展開の一環です。新しいURLは以下になります。英語版からも、ページトップの「日本語」というリンクからいつでもアクセスすることができます。
URLは変わりますが、もちろん英語版と日本語版も利用できる機能に違いはないのでご安心ください。(ご不便をおかけする点もあるかと思いますが、何卒よろしくお願いします。)
グローバル展開と言っても、日本特有の細かな要望などは、常に盛り込んでいきたいと考えています。あらゆる地域・国・文化の方々にとって、使いやすく便利だと思っていただけるサービスの提供を常に心がけております。
サービスのスタートから7年目に突入し、この1年でさらなる機能改善を進めていく体制を作っています。皆様には引き続きご意見・ご要望をぜひともお寄せいただければと思います。
今後のFeedWindの発展にぜひご期待ください。