livedoor 相互RSSのデザインをCSSでカスタマイズする

livedoor 相互RSSは、カスタマイズを行うことでデザインを変えることができます。

今回は、相互RSSの様々なデザイン方法について書いていきます。

最初に

今回行うカスタマイズでは、ご自身のサイトのスタイルシート(CSS)を編集する必要があります

WordPressの場合

「外観」→「テーマの編集」をクリックします。

画面右側「スタイルシート(style.css)」をクリックします。

この部分にスタイルを記述していきます。それでは見ていきいましょう。

スクロールバーを付けて外枠を囲む

スタイルシートに以下の記述を追加してください。

.blogroll-channel {
	border: solid 1px #999 !important;
	height: 200px !important;
	overflow-y: scroll;
}

heightの部分で枠の高さを調節します。記述後は、以下のようになります。

横に2つ並べて表示する

スタイルシートに以下の記述を追加してください。

.blogroll-wrapper {
	width: 100%;
	overflow: hidden;
}
.blogroll-innner {
	float: left;
	width: 50%;
}

相互RSSを表示したい箇所に以下のコードを記述します。

<div class="blogroll-wrapper">
 	<div class="blogroll-innner">
 		<!-- 相互RSSのタグその1をここに挿入 -->
 	</div>
 	<div class="blogroll-innner">
 		<!-- 相互RSSのタグその2をここに挿入 -->
 	</div>
</div>

記述後は、以下のようになります。

横に2つ並べて、外枠とスクロールバーを付ける

枠とバーを1つで表示する場合

スタイルシートに以下の記述を追加してください。

.blogroll-wrapper {
	border: solid 1px #999;
	height: 200px;
	width: 100%;
	margin-bottom: 15px;
	overflow-y: scroll;
}
.blogroll-innner {
	width: 50%;
	float: left;
}

相互RSSを表示したい箇所に以下のコードを記述します。

<div class="blogroll-wrapper">
 	<div class="blogroll-innner">
 		<!-- 相互RSSのタグその1をここに挿入 -->
 	</div>
 	<div class="blogroll-innner">
 		<!-- 相互RSSのタグその2をここに挿入 -->
 	</div>
</div>

記述後は、以下のようになります。

枠とバーを2つで表示する場合

スタイルシートに以下の記述を追加してください。

.blogroll-channel {
	border: solid 1px #999 !important;
	height: 200px !important;
	overflow-y: scroll;
}
.blogroll-wrapper {
	width: 100%;
}
.blogroll-innner {
	width: 50%;
	float: left;
}

相互RSSを表示したい箇所に以下のコードを記述します。

<div class="blogroll-wrapper">
 	<div class="blogroll-innner">
 		<!-- 相互RSSのタグその1をここに挿入 -->
 	</div>
 	<div class="blogroll-innner">
 		<!-- 相互RSSのタグその2をここに挿入 -->
 	</div>
</div>

記述後は、以下のようになります。

横に3つ並べて、外枠とスクロールバーを付ける

枠とバーを1つで表示する場合

スタイルシートに以下の記述を追加してください。

.blogroll-wrapper {
	border: solid 1px #999;
	height: 200px;
	width: 100%;
	margin-bottom: 15px;
	overflow-y: scroll;
}
.blogroll-innner {
	width: 33.3%;
	float: left;
}

相互RSSを表示したい箇所に以下のコードを記述します。

<div class="blogroll-wrapper">
 	<div class="blogroll-innner">
 		<!-- 相互RSSのタグその1をここに挿入 -->
 	</div>
 	<div class="blogroll-innner">
 		<!-- 相互RSSのタグその2をここに挿入 -->
 	</div>
 	<div class="blogroll-innner">
 		<!-- 相互RSSのタグその3をここに挿入 -->
 	</div>
</div>

記述後は、以下のようになります。

枠とバーを3つで表示する場合

スタイルシートに以下の記述を追加してください。

.blogroll-channel {
	border: solid 1px #999 !important;
	height: 200px !important;
	overflow-y: scroll;
}
.blogroll-wrapper {
	width: 100%;
}
.blogroll-innner {
	width: 33.3%;
	float: left;
}

相互RSSを表示したい箇所に以下のコードを記述します。

<div class="blogroll-wrapper">
 	<div class="blogroll-innner">
 		<!-- 相互RSSのタグその1をここに挿入 -->
 	</div>
 	<div class="blogroll-innner">
 		<!-- 相互RSSのタグその2をここに挿入 -->
 	</div>
 	<div class="blogroll-innner">
 		<!-- 相互RSSのタグその3をここに挿入 -->
 	</div>
</div>

記述後は、以下のようになります。

今回はサイトを運営するにあたって自分がつまづいたところを記事にしてみました。

次回、livedoor 相互RSSでNGワードの設定を行います。

livedoor 相互RSSでNGワードの設定を行う
livedoor 相互RSSで表示したくない単語を非表示や置き換えする、NGワードの設定方法を紹介します。