基本的にWordPressで相互RSSを使うときは、Multi feed Readerを使ったり、WordPress標準ウィジェットのRSSを使うのが主流かと思います。
関連記事
わざわざライブドアの広告がついているライブドア相互RSSを使うメリットはあまりありませんが、それでも今まで使っていた相互RSSチャンネルをそのまま使う方法を知りたいというお問い合わせがたまに届きます。
なので、今回はその方法を載せておきます。
コードを好きな場所にコピペするだけ
ライブドア相互RSSの管理ページに「貼り付けコード」というものがあります。このコードを任意のウィジェットに貼り付けるだけで完了します。
通常版とiframe版がありますが、通常版がオススメです。iframe版だと読者のスマホによって、見え方にかなり差が出ます。設定によっては画面からはみ出す可能性もあるので、通常版をコピペしましょう。
「外観カスタマイズ」の「ウィジェット」から記事上や記事下にカスタムHTMLウィジェットに貼り付けます。
ちなみにiframe版だと以下の画像のように表示されますが、スマホだと端が切れたりするので注意です。
スタイルシート(CSS)を変更して見た目を変更する方法
ライブドア相互RSSは見た目を変更することができます。
先ほどのコピペしたコードの最下行を削除します。これは必須です。（link relのところです。）
<link rel="stylesheet" type="text/css" href="https://blogroll.livedoor.net/css/default2.css" />
この部分を削除することで、相互RSSの書式が現在のあなたのWordPressの書式になります。
そして、ライブドア相互RSSには、スタイルシート(RSS)が公開されているので、必要な部分を編集して、自分のサイトのスタイルシートに貼り付けるだけです。（下記スタイルシートをすべて自分のサイトのスタイルシートにコピペしたらもとに戻ります。）
/* ----------------------------------------------- */
/*
BlogRoll css 2
*/
/* ----------------------------------------------- */
.blogroll-channel,
.blogroll-channel * {
width: auto;
height: auto;
margin: 0;
padding: 0;
border: none;
text-align: left;
}
.blogroll-channel {
margin-bottom: 15px;
padding: 10px;
}
.blogroll-channel .blogroll-list-wrap {
margin-bottom: 10px;
}
.blogroll-channel .blogroll-list {
list-style-type: none;
margin-bottom: 3px;
font-size: 12px;
line-height: 1.3;
}
.blogroll-channel .blogroll-list img {
vertical-align: middle;
}
.blogroll-channel img.blogroll-icon,
.blogroll-channel img.blogroll-favicon {
margin: 0 5px 0 0;
}
.blogroll-channel img.blogroll-favicon {
width: 16px;
height: 16px;
}
.blogroll-channel a.blogroll-link {
}
.blogroll-channel .blogroll-new-entry {
margin-left: 5px;
color: red;
}
.blogroll-channel .blogroll-clip,
.blogroll-channel .blogroll-hatebu {
margin: 0 0 0 5px;
}
.blogroll-channel .blogroll-link-time {
margin: 0 0 0 3px;
color: #666;
font-size: 10px;
}
.blogroll-channel .blogroll-ad-img {
}
.blogroll-channel .blogroll-ad-text {
display: block;
margin-top: 5px;
color: #666;
font-size: 12px;
}例えば、NEWを赤文字表示にしたいなら
.blogroll-channel .blogroll-new-entry {
margin-left: 5px;
color: red;
}この部分だけをスタイルシートに貼り付けます。
するとNEWが赤文字に変更されます。
緑文字にしたければ、さきほどのスタイルシートで「red」になっているところを「green」に変更します。すると緑色になります。
こんな感じで、スタイルシートの名前から弄る箇所を予想して変更していくような感じです。
ライブドアブログと似せる
ちなみに、ライブドアブログと同じ設定にするには、ライブドアブログのスタイルシートを確認しないといけません。
「ブログ設定」→「ブログパーツ」→「カスタマイズ」から確認できます。
CSSのところで「.blogroll-channel」で検索（Ctrl+F4）します。
例えば、リストに下線を引きたいのであれば、その部分をコピペします。
CSSの名前が違うので設定値だけコピーします。（paddingなどのところだけ）
そして、それをスタイルシートに貼り付けます。
すると、下線が引かれます。
最後に
今回は、WordPressでライブドアブログ相互RSSの使い方とカスタマイズ方法を載せました。
わかりましたか？
ちょっと書いてて説明しにくいところもあり、難しいところがあったかと思います。
わからないところがあればお気軽にお問い合わせよりメッセージください。
コメント