Quantcast
Channel: FeedWindブログ
Viewing all 25 articles
Browse latest View live

フォントを変更する

$
0
0
フォントを変更するには「フレーム設定」「もっと細かく設定する」をクリックします。


プルダウンから希望のフォントファミリーを選択します。


希望のフォントがない場合は、コードに直接記入してください。記入した内容がそのまま反映されます。表示崩れ等の原因になるため、正確に記入する必要があります。

また、下記の画像のように、日本語を含む場合は必ずシングルクォーテーションで囲ってください。ダブルクォーテーションだと、javascriptが誤動作する恐れがあります。



カスタムCSSを利用する場合は、カスタムCSSの設定が優先されるためフォントの設定は無効になります。フォントを指定するには、カスタムCSSの中でfont-familyを指定してください。

フォントサイズを変更する

$
0
0
FeedWindではフォントサイズを変更することができます。
ブログやウェブサイトのフォントサイズに合わせて、自由に設定することが可能です。


(1)「フレーム設定」の「もっと細かく設定する」をクリックします。
(2)「フォントサイズ」の隣の数字を変更します。数字が大きいほど文字は大きくなり、小さいほど文字は小さくなります。

枠線を消す

$
0
0
初期設定では周囲にグレーの枠線を表示しています。この枠線を消して、サイトのデザインと調和させたい場合は、詳細設定で消すことが可能です。

枠線を消去するには、フレーム設定「もっと細かく設定する」をクリック。
すると、詳細設定項目が下記の図のように表示されます。
次に枠線の「表示しない」にチェックを入れるだけです。


背景色を変える

$
0
0
背景色を変えるには「見出し設定」の「もっと細かく設定する」をクリックします。
設定項目が開くので、「背景色」の横にある■のカラー部分をクリック。
カラーパレットが開くので、好きなカラーを選択します。
選択した色がプレビュー画面に表示されます。

背景を変更することで、ブログやウェブサイトのデザインになじませることができます。
デザインに合わせて、自由にカラーを変更してみてください。


本文の色を変える

$
0
0
本文の色をを変えるには「本文設定」の「もっと細かく設定する」をクリックします。
詳細設定画面が表示されるので、「フォントカラー」を調整します。
■の色が付いている部分をクリックすると、図のようにカラーパレットが表れます。


好きな色の部分をクリックすと、プレビュー画面に反映されます。
なお、カラーパレットの右側にあるスライダーを上下すると、パレットの色合いが変わります。
選択した色でよければ「OK」ボタンを、また元に戻すときは「Cancel」ボタンをクリックしてください。


見出しの色を変える

$
0
0
RSSVIEWの見出しの色を変更するには、「見出し設定」の「もっと細かく設定する」を開きます。
「フォントカラー」と書かれている項目の隣にある■をクリックすると、図のようにカラーパレットが開きます。


 好きな色の部分をクリックすと、プレビュー画面に反映されます。
なお、カラーパレットの右側にあるスライダーを上下すると、パレットの色合いが変わります。
選択した色でよければ「OK」ボタンを、また元に戻すときは「Cancel」ボタンをクリックしてください。


カスタムCSSを設定する

$
0
0

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を調整していただくようお願いします。

サンプルからデザインを選ぶ

$
0
0
FeedWindではカスタムCSSが使えます。

CSSを使うと、自分のブログのデザインにふさわしいインターフェイスに仕上げることが可能です。

ただ、カスタムCSSを利用するには専門の知識が必要です。
そこで、CSSが分からなくても色々なデザインをお試しいただけるように、いくつかのサンプルCSSを用意しました。

5種類(10月19日現在)のデザインの中からお選びいただけます。
【1】「フレーム設定」の「もっと細かく設定する」をクリック。最下部の「サンプルから選ぶ」をクリックすると、別ウインドウが起動します。




【2】好きなデザインを選び、画像をクリック。そのままウインドウを閉じて、再び設定画面に移動します。



【3】デザインが適用されています。サンプルのデザインは横幅160ピクセル、縦幅500ピクセルで固定になっています。


記事数を設定する

$
0
0
FeedWindでは横幅・高さを設定すると、それにあわせて表示する記事の数を自動的に調整します。大きさを指定するだけで、あとは何もせずにきれいに表示されるようになっています。 



ただ、「最近記事を必ず5つ表示したい」という場合もあるかもしれません。ここではちょっとした“裏技”を紹介します。少しだけ設定が複雑になりますが「見出し設定」と「本文設定」の「最大文字数」をうまく調整すると実現可能です。 


ただし、この方法ではフィードの中身によって4つになったり、5つになったりする場合もあります。その辺はフィードを配信している側の設定の問題になりますので、FeedWindでは調整のしようがありません。 


今回はCNETの記事を3つ表示する例をご紹介します。皆さんも表示したいフィードに合わせて、この方法で応用してみてください。 


(1)記事のタイトルを1行に収める
初期設定では「見出し設定」「最大文字数」20文字になっています。ただし、これでは図のように記事のタイトルが折り返してしまいます。 



折り返さないようにするために、これを13に設定してみます。 


(2)本文を2行に収める
初期設定では「本文設定」「最大文字数」40文字になっています。これでは本文が3行になってしまい、記事が2つしか表示されません。そこで、必ず2行で収まるように、最大文字数を27文字に設定します。 


「本文設定」「もっと細かく設定する」をクリックすると設定フォームが表示されるので、「最大文字数」を27に設定します。 


すると、以下の図のように見出し1行、本文2行に収まり、記事が3件表示されるようになります。みなさんも、この方法で表示数やレイアウトを調整してみてください。 

設定を保存する

$
0
0
FeedWindの設定内容を保存し、次回訪問時に呼び出す方法をご説明します。


(1)設定を保存する
まずフィードを好きなように変更します。
設定をしたら「>設定を保存」をクリックします。

変更前→                変更後に「>設定を保存」をクリック

もし以前に保存している設定がある場合、クリックをすると上書きされてしまうので注意してください。
保存できる設定は1つです。


(2)設定を呼び出す(次回訪問時)
次回訪問した際には初期設定状態になっているので、
>前回保存した設定を呼び出す」をクリックすると前回の設定が呼び出されます。
なお、Internet Explorer6をお使いの場合は、「前回保存した設定を呼び出す」をクリックした後、
ブラウザの「更新」ボタンをクリックしてください。
   
「>前回保存した設定を呼び出す」をクリック   保存した内容が呼び出されます


注意
・この機能はcookieが使用できない環境ではご利用になれません。ご利用の際はcookieを有効にしてください。

ポッドキャスティングをブログで再生する

$
0
0
FeeedWindには、自分が配信しているポッドキャスティングや、お気に入りのポッドキャスト番組を共有する便利な機能が備わっています。

ポッドキャスティングのURLを入力すれば、ブログ上で再生できるプレーヤーを表示できます。ここでは、【サンプル】【設置方法】を説明します。なお、ブラウザによってはWindows Media Playerプラグインの実行を求められることがあります。アラートが表示されるので、ご利用の際にはご確認をお願いします。 

【サンプル】


【設定方法】

(1)ポッドキャスティングのURLを入力
ブログに表示したいポッドキャスティングのURLを「RSS(ATOM)のURL」に入力します。

 


(2)プレーヤーを表示する
見出し設定」の「もっと細かく設定する」をクリックします。詳細設定画面が表示されるので、「Podcast/YouTubeの場合」「プレーヤーを表示」をチェックします。

 

初期設定ではPodcastのアイコンが表示されています。アイコンにカーソルを合わせて「右クリック」「対象をファイルに保存」(Windowsの場合)で自分のPCに保存することができます。 

(3)タグを自分のブログに貼る
FeedWindのタグが発行されます。このタグをコピーして、自分のブログやウェブサイトの好きな部分に貼り付けます。プレーヤーが無事に表示されたら、再生ボタンをクリックして、ポッドキャスティングの番組を再生してみてください。

アメブロでFeedWindを表示させる

$
0
0
アメーバブログ(以下「アメブロ」)でFeedWindを表示させる方法をご紹介します。

アメブロでFeedWindを利用するには「フリープラグイン」という機能を利用します。


~アメブロでのFeedWind設定手順~(1)まず、FeedWindのトップページでタグを発行して、コピー&ペーストします。

(2)次にアメブロの管理画面に移動し、「サイドバーの基本設定」をクリックします。



(3)画面を下までスクロールして、フリープラグインの「設定」ボタンをクリック



(4)コピーしたFeedWindのタグをテキストエリアに貼り付けます。最後に「設定」ボタンをクリック。



(5)最後に「サイドバーの配置」をクリックして別の画面に移動します。
そこで「フリープラグイン」をサイドバーの好きな位置に配置します。
以下の図では青色で示したところに配置しました。



最後に「保存」ボタンを押して終了です。
これでブログにアクセスするとFeedWindがアメブロに表示されています。

読者のブログに自分のフィードを貼ってもらう

$
0
0
あなたのブログの読者に、フィードの掲載を呼びかけてみませんか?

あなたのブログの読者が、自分のブログにブログパーツとして貼り付けてくれることで、あなたのブログの読者やネットワークが広がります。


【設置方法】
設置は簡単です。
まず、あなたのブログに「ブログに貼る」ボタン(テキストリンクでも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のプレーヤーを表示する

$
0
0
FeedWindではYouTubeのプレーヤーをブログに貼ることができます。
Youtubeに掲載された、好きなアーティストの作品などをブログの読者と簡単に共有できます。 YouTubeの動画再生機能もついているので、ブログパーツ上でそのまま閲覧できます。

今回は【キーワードを含んだ動画を表示する】方法と、Youtubeの【チャンネルの動画を表示する】方法をご紹介します。 

【キーワードを含んだ動画を表示する】

AKB48など、特定のキーワードを含んだ動画を表示することができます。

【修正 2013年1月7日】
下記のURLをコピーして、AKB48となっている部分を任意の文字列に変更します。

https://gdata.youtube.com/feeds/api/videos?q=AKB48&orderby=relevance


Youtubeでキーワード検索。


 

検索結果のURLをコピー&ペーストします。



FeedWindの設定画面で「見出し設定」「もっと細かく設定する」をクリックして、「プレーヤーを表示」にチェックを入れます。



プレビューにYoutubeのプレーヤーが表示されます。



【チャンネルの動画を表示する】

チャンネルでRSSを配信している場合、FeedWindでチャンネルの最新情報を表示することができます。



AKB48ポニーキャニオンビデオニュースなど、プロモーション用に最新動画を掲載したページへをチャンネルとして作成しています。 

チャンネルのURLをコピーします。

 

FeedWindの設定画面で「見出し設定」の「もっと細かく設定する」をクリックして、「プレーヤーを表示」にチェックを入れます。

DropboxでカスタムCSSを無料で保存・利用する方法

$
0
0
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で角丸を実現する

$
0
0

最近ではボタンや枠組みなどで、角丸のレイアウトが一般的に使われるようになりました。ここ数年でCSSの新しい仕様が策定されて、スマートフォンなどでも利用されるようになっています。

FeedWindでも、カスタムCSSを利用することで角丸を実現できます。
カスタムCSSにborder-radiusを指定することで、サンプルのようなレイアウトにすることが可能です。
(CSSは中上級者向けの機能になりますが、今後、簡単に実装できるサンプルも追加していく予定ですのでお楽しみに!)

今回は「#container」border-radiusを5ピクセルで設定しました。
この値を変更することで丸みの度合いが変わります。

以下のコードをコピペして、CSSをサーバにアップしてご利用ください。サーバをお持ちでない方向けに、Dropboxを擬似Webサーバとして利用する方法もご紹介しています。
1. /*##########Container##########*/
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*/
FeedWindの「フレーム設定」「もっと細かく設定する」をクリックして、「カスタムCSS(URLを入力)」にCSSのURLをペーストするだけです。

ただし、Internet Explorerの古いバージョンでは、角丸が反映されないのでご注意を!Internet Explorer9.0以降、その他Google ChromeやFirefoxで利用が可能です。


ぜひご参考にしてください。

ブログの更新情報をほかのブロガーに貼ってもらうコツ

$
0
0

もっとたくさんの人たちに、サイトやブログのコンテンツを知ってもらいたい!

ウェブサイトを運営されている方の多くがそんな気持ちをお持ちではないでしょうか。
今回はFeedWindを活用したコンテンツのネットワークづくりのアイデアをご紹介します。
更新情報をほかのブロガーに貼ってもらうことで、コンテンツを上手に拡散している実例をピックアップしてみました。

サンプルコードを張る
FeedWindをほかのサイトに貼ってもらえれば、皆さんのサイトorブログへの誘導窓口が一つ増えたことになり、訪問者数の増加につながります。

「このサイトの情報をぜひ貼りたい!」と思ってもらえるような魅力的なコンテンツを提供することは大前提ですが、サイトに貼るための手間をできるだけ軽減してあげることも大切なポイントです。

セイチャット

http://www.saychat.jp/link.html

セイチャットでは、サンプルのコードを用意して1つのページにまとめています。サイトの訪問者がこのページにアクセスをして、あらかじめ用意されたタグをコピペするだけでよいわけです。


edispecialists

http://www.edispecialists.com/rss-edi-jobs-widget.html

海外の事例になりますが、複数のデザインを用意して、訪問者に好きなデザインを選択できるようにしてあげたサイトもあります。こちらは、サイト制作のプロの方が作っていますが、タブで切り替えができるアイデアはとても参考になります。


Spread Your Feeds
ただ、こういうページを用意するのは大変だ…と思われる方もいらっしゃると思います。
そこで、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ページの更新情報をFeedWindで表示する

$
0
0
現在、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ページの存在を通知したり、更新情報をお知らせするツールとしてご活用されてみてはいかがでしょうか?

ツイッターのタイムラインを表示するTweetsWind

$
0
0

ブログやウェブサイトを運営されている方の中には、Twitterで情報発信をしている方も多いのではないでしょうか?

従来、TwitterはRSSを配信していたためFeedWindでも表示できました。ところが、Twitterの方針転換で、残念ながらRSSの配信が停止されてしまいました。

そこで、今回はTweetsWindをご紹介させていただきます。
TweetsWindは、FeedWindの姉妹サイト的な存在で、Twitterのタイムラインの表示に特化した専用のブログパーツです。(もちろん、ブログだけでなく、一般のサイトに表示できます)

TweetsWindの特徴は
  • 自分のつぶやきを表示できる
  • 自分がフォローしている人たちのつぶやきも表示できる(タイムライン表示)
  • 色合いやフォントサイズなど、自分のサイトに合わせてカスタマイズできる
一度、Twitterの認証画面を挟みますが、それ以外はプログラミングの知識などは必要ありません。
FeedWindと同じように、貼り付けコードをサイト内にペーストするだけでOKです。

ぜひ一度お試しください。

今回ご紹介したサイト
TweetsWind
http://www.tweetswind.com/

フィード検索でRSSを簡単入力

$
0
0
FeedWindのご利用に当たっては、ブログのURLやRSSを入力する必要があります。
URLが長かったり、他人のブログの場合の時などは、入力に手間がかかります。

FeedWindでは、検索機能を利用して、簡単にRSSを入力できるフィード検索をご用意しています。







すると小窓が立ち上がりますので、キーワードを入力します。
ここは「Yahooニュース」を検索した例です。Yahooニュースに関連するRSSが表示されるので、いずれかをクリックします。









クリックすると小窓が閉じて、URLが入力された状態になります。
プレビューもそれに合わせて変わります。





このように検索サイトを利用する要領で、簡単にRSSを入力することができます。
ぜひご活用ください。

Viewing all 25 articles
Browse latest View live