// ローディング画面表示
Noww Loading...

まとめサイトの作り方を全力で徹底解説!2020年最新版!

2020年2月12日

スポンサーリンク

STEP5:相互RSS一覧の設置

このSTEPでは、まとめサイトに欠かせない相互RSS一覧の取得方法から設置までを解説していきます。少し難しいところもありますが、基本手順通りにやってもらえば大丈夫です。

主にまとめサイトなどで使用され、サイトの更新情報をお互いに共有し合うこと。更新情報を共有することで、リンクの露出が増加し、アクセスアップにつながる。しかし、まとめサイトの場合は、検索エンジンからの流入は期待できないため、ほとんどがアクセストレードによるアクセスアップである。相互RSSとは?

① livedoor相互RSSへの登録

今回は、まずlivedoor相互RSSに登録します。livedoor相互RSSは、シンプルで使いやすいので初心者にはおすすめできます。他にも高機能なRSS取得サービスがいろいろありますので、紹介しておきます。

相互RSSサービス一覧

livedoor相互RSSを含めた相互RSS取得サービスのリストです。サイト運営に慣れてきたら適宜使用してください。

またそれぞれのRSS取得サービスについて紹介記事を書いていますので、詳しく知りたい方はそちらを御覧ください。

livedoor道後RSSに登録「いますぐ使ってみる」を押下。

livedoor相互RSSの登録「新規登録」を押下。

livedoor相互RSSの登録仏用事項を入力して登録を完了させてください。

② livedoor相互RSSのチャンネル作成

管理画面にログインしたら、まずはチャンネルの作成です。

livedoor道後RSSの登録管理画面トップに「新規チャンネル作成」という項目がありますので、分かりやすい名前で作成してください。ちなみに1つのRSS一覧を1つのチャンネルで管理するので、サイトの複数箇所に設置したい場合は、必要な数チャンネルを作成する必要があります。また、チャンネル名ですが、あとからいつでも変更できます。

※同一のタブコードを同じページに配置することは、仕様上できないようになっています。

③RSSの取得と登録・設定

livedoor道後RSSの登録左メニューの「チャンネル一覧」より、「フィード」タブを選択し、フィードURLの登録を行います。「フィードの追加」項目で、「フィード追加」にチェックを入れ、RSSを取得したいサイトのURLはたは、RSSURLが分かる場合はRSSURLを入力して、「追加する」を押下します。

大抵のまとめサイトの場合、RSSリンクを記載しているので、それを入力するのが確実です。

livedoor道後RSSの登録登録したフィードは、下の「登録されたフィード一覧」より確認できます。そして、配信記事数ですが、返還率の調整を行う関係上、こまめに調整していかなければなりません。調整する場合は、「設定」ボタンより、各フィードごとに変更できます。1つのフィードで取得できる最大値は5までです。

livedoor道後RSSの登録「チャンネル」タブの「チャンネルの設定」より、様々な表示方法の設定をすることができます。渡しの場合見やすくシンプルなデザインにしています。参考にしてみてください。

livedoor相互RSSの登録また「NGワードの設定」タブでは、特定の単語を含む記事をブロックしたり、一部単語を置換して表示させることもできます。ASPなどのポリシーに準拠する必要がある場合は、活用してください。

livedoor道後RSSのレポート画面「レポート」タブでは、本日のクッリク数と月間のクリック数がかくにんできます。

④ サイトにRSS一覧を設置&レイアウト編集

WordPress環境下で任意の位置にRSS一覧を設置する場合、多少コードを編集する必要があります。コードを編集するといっても、下記の手順通りやっていただければ大丈夫です。

今回はヘッターに配置するRSS一覧を下記のように・・・

記事下に配置するRSS一覧を下記のように表示させるようにしたいと思います。

相互RSS一覧

ではまず、WordPress管理画面にログインし、メニューの「Luxeritas」>「子テーマの編集」に進みます。

スタイルシートの編集「style.css」のタブに移動し、画像に記載の手順で下記のコードを追記してください。

.rss_wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
width: 100%;
height: 250px;
overflow-y: scroll;
}

.rss_item {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
height: auto;
padding: 10px;
}

.blogroll-list-wrap {
list-style: none;
font-size: 1em;
}

.blogroll-list-wrap a {
text-decoration: none;
}

.blogroll-list-wrap a:hover {
color: red;
}

@media screen and (max-width: 600px) {
.rss_item {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
}

上記コードをコピーして貼り付けるだけでOKです。

次はヘッターに相互RSSを表示するHTMLコードです。

<div class="rss_wrapper">
<div class="rss_item"><script type="text/javascript">
<!– var blogroll_channel_id = ○○○○○○; // –>
</script>
<script type="text/javascript" charset="utf-8" src="https://blogroll.livedoor.net/js/blogroll.js"></script></div>
<div class="rss_item"><script type="text/javascript">
<!– var blogroll_channel_id = ○○○○○○; // –>
</script>
<script type="text/javascript" charset="utf-8" src="https://blogroll.livedoor.net/js/blogroll.js"></script></div>
</div>

「◯◯◯◯◯◯」の部分は、自分のIDを入力します。「◯◯◯◯◯◯」の部分は2箇所あるので、それぞれ異なるチャンネルIDである必要があります。予め2つのチャンネルを作っておいてください。IDの調べ方は下記の通りです。

※IDの部分は必ず半角数字で入力してください。

idの調べ方各チャンネルの「貼り付けコード」タブにある6桁の数字を入力します。

あとは、ウィジェットエリアの「ヘッター下ウィジェット」にて、「カスタムHTML」ウィジェットを追加して、コードを貼り付けてください。

ウィジェット編集入力が終わったら「保存」して終了です。ヘッターにRSS一覧が表示されているか確認してください。

さて、次は記事下にRSS一覧を表示させる手順です。

まず、livedoor相互RSSにてチャンネルをもう一つ追加で作成しておいてください。ヘッターに2つ、記事下に1つなので合計3つのチャンネルを作成しておく必要があります。

では、準備ができたら下記のコードをコピーして「◯◯◯◯◯◯」の部分を自分のIDに変更してください。

<div class="rss_wrapper"><script type="text/javascript">
<!– var blogroll_channel_id = ○○○○○○; // –>
</script>
<script type="text/javascript" charset="utf-8" src="https://blogroll.livedoor.net/js/blogroll.js"></script></div>
次にコードを先ほどと同じ容量で、ウィジェットに適応します。

記事下にRSS一覧を表示入力したら「保存」して終了です。しっかり表示できているか確認してください。

以上で、このSTEPは終了です。

頻繁ではありませんが、ライブドアの方でコードの仕様変更が行われることがあります。その場合、以前利用していたものが使えなくなることがあります。

その場合の対処方法を書いておこうと思います。
コードの修正それぞれのチャンネルで6桁の番号を確認するときに、こちらで用意しているテンプレートではなく、そのままコードもコピーして自サイトに適用してみてください。

その際、コード下部にある「<link rel="stylesheet" type="text/css" href="…..css" />」と書かれた部分を削除した上で使ってください。

上記の手順で相互RSS一覧が表示されない場合

The following two tabs change content below.
ザキヤマ
始めまして。ZAKIYAMA(ザキヤマ)と申します。現在大学生(情報システム)です。『インドア好き』&『引きこもりがち』&『社会不適合』&『視覚系持病持ち』という、なんともならないような感じです。そんな中ですが、ブログアフィリエイトとプログラミングに取り組み、少しずつ稼ぎを得ています。とりあえず将来は、ノマド生活をすることが目標です。このブログでは、ブログタイトルにもある通り、超効率的に稼ぐための情報を共有していければと思っています。

Google ウェブ検索

通常のGoogle検索エンジンとして利用できます。他に知りたい情報がありましたらお使いください。

スポンサーリンク