カテゴリ

カテゴリ:RSSを設置しよう!


カテゴリ:
 次にRSSを設置する方法です。


初心者の方は「RSSって何?」と疑問を持たれると思いますので、まず先にRSSの説明をします。


RSSとは、ブログの更新情報の自動リンクを作成してくれるフォーマットです。当サイトのPCデザインの下の方に設置してあるパーツです。

RSSを設置する理由は、他サイトとアクセスを交換することで、アクセス量を増やす。(アクトレ)

他サイトからの逆アクセス、検索からのアクセスを足した総アクセスが、SEO(検索を上位に表示させる技術)に関係してきます。


広告だらけにするとサイトが重くなりますし、検索サービスからのサイトの評価も下がります。

そして、RSSを設置する最大の理由は、RSSを設置していないと他サイト様とアクセスを交換する事は難しいと言うこと。

ほとんどの2chまとめサイト、アンテナサイトは、RSSを主流としたアクセストレードを行っています。


広告を設置していない場所に、RSSなどのパーツを置くことでサイトに無駄な余白を無くし、アクセスを交換することで総アクセスがアップ!SEO効果がアップするので、検索からの流入が更に増える。

結果、広告表示回数も増えるので、効率のいいサイトを作ることが出来ます。


では、本題のRSSの設置方法を説明していきます。

まず、ライブドアブログ以外のブログサービスで運営している方は、ライブドアブログに登録して、何でもいいのでブログを作成ください。

ライブドアページ→
www.livedoor.com/


ブログを作成したら、ブログ管理画面のマイページの下にある「相互RSS」をクリック。

左上にある自分のIDをクリック。

RSSの管理画面が表示されます。そしたら、新規チャンネルをクリックして、自分が利用するチャンネルを作成します。

名前は、複数サイトで利用する時でも分かりやすい「自分のブログ〇〇」(〇〇は数字の1,2…などすぐに差別化を図れるモノをオススメします。)がいいと思います。

作成したら、チャンネルをクリック、フィードの設定にURLを入力する場所があるので、とりあえず私のサイトのRSSを入れてみましょう。(他サイトのRSSを追加する方はそちらで試してみてください)


URL→http://2ch-ma-to-me.blog.jp/

RSS
http://2ch-ma-to-me.blog.jp/index.rdf

URL、RSSどちらでもRSSフィードを取得出来るので、どちらをコピーして貼り付けても大丈夫です。他サイトでも同等。


これでRSSの登録は完了。後は、HTMLを貼り付けるだけです。


貼り付けコードをクリックして通常版のHTMLをコピー。

自サイトのHTML、サイドバーのフリーエリア(HTML)など、お好きな場所に貼り付けてください。

ちなみに、通常版を丸々コピーした場合はライブドアオリジナルデザインのRSS。スクロールなし。

スクロールありのRSSを設置したい方は、通常版のHTMLの最後にあるコード「default2.css」の2の部分を削除してください。スクロールありのライブドアオリジナルデザインのRSSが設置できます。


後は、チャンネル→NGワード設定で、アダルト用語など表示させたくないワードを設定。グーグルアドセンスを利用する方は必須。

2つ以上RSSを置きたい方は、新たにチャンネルを作成して貼り付けてください。(アドセンス利用の方はチャンネル毎にNGワード設定を忘れずに設定してください。)


お好きなアイコン、配信数などは、各自お好みで設定してみてください。


当サイトのようなデザインのRSSを設置したい方はこちらへ
RSSを設置しよう!(オリジナルデザイン編)


 


カテゴリ:
RSSのオリジナルデザインの作成方法です。

ちなみに参考にしたサイトはこちら、

http://blog.livedoor.jp/kimagure_ryu/archives/1349304.html


CSS

.anpan .blogroll-channel {
width: auto;
height: auto;
margin: 0;
padding: 0;
border: none;
text-align: left;

}
.
anpan .blogroll-channel {
margin-bottom: 0px;
padding: 0px;
background: #fff;
height: 244px;
overflow: auto;
}

.
anpan .blogroll-channel .blogroll-list {
list-style-type: none;
margin-bottom: 3px;
font-size: 15px;
width: auto;
padding: 6px;
border: 3px solid ;
border-color : #e5e5e5 #9e9e9e #9e9e9e #e5e5e5 ;
}

.
anpan .blogroll-channel .blogroll-list:hover {
font-size: 17px;
}

.
anpan .blogroll-channel .blogroll-list a {
color : #000d82;
}

.
anpan .blogroll-channel .blogroll-list a:hover {
color : #00bfff;
}

.
anpan .blogroll-channel .blogroll-new-entry {
margin-left: 5px;
color: red;
}

.
anpanblog {
border: 3px double ;
border-color : #ff003f #ff54ee #ff003f #ff54ee ;
}


HTML

<div class="
anpanblog"><div class="anpan">
ライブドアRSSのHTML
</div></div>

ライブドアRSSのHTMLの最後の言語、
<link rel="stylesheet" type="text/css" href="http://blogroll.livedoor.net/css/default.css" />
を削除してください。


こちらを貼り付けてもらえば、当サイトのRSSと同じデザインになります。(左真ん中のRSS)


サイズを変更したい場合の為に、少しCSSの説明をします。


widthが横幅、heightが縦幅。autoに設定すると、自動で幅や高さを設定してくれます。

幅や高さが気に入らない場合は、pxで調整してください。

font-sizeは文字のサイズ。


.anpan
blog {
border: 3px double ;
border-color : #ff003f #ff54ee #ff003f #ff54ee ;
}

のanpan
blogは枠を設定しているCSSです。

borderは枠。doubleは2本線。

2本線を1本線にしたい場合は、doubleをsolidに変更。

border-colorは枠線の色です。

設定を変更するのはこの辺りだと思います。


アイコン、はてなブックマーク等の表示は、当サイトでは表示させていないので設定してません。

アイコン等を表示させている方は、先ほど参考にしたサイト、

http://blog.livedoor.jp/kimagure_ryu/archives/1349304.html

から必要なCSSを確認して追加してください。

追加する際は、CSSの手前に「.anpan 」を書き込んでください。


個人的には、アイコン、はてブ等は非表示の方がスタイリッシュに見えると思います。



1つ1つデザインの違うRSSの作成方法。


最初に作成したCSSは、消したり、編集せずにそのままで、新たにもう一度同じCSSを追加して.
anpan、.anpanblogの部分に2を付け足す。


.
anpan2anpanblog2

その後、2の方のCSSを編集。

HTMLの方もそのままではなく、2を追加して設置してください。


<div class="
anpanblog"><div class="anpan">

<div class="
anpanblog2"><div class="anpan2">
に変更


~仕組み~

2を付け足す事で、全く別のCSS、HTMLとして処理されます。

この要領で、1,2,3,4といくつもデザインを作成できます。
 
見出し画像
×