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ワードの設定を行います。

The following two tabs change content below.

にーお

アラサー周辺に会社勤めに疑問を感じ、思い切って退職!それからずっとニートをしています。会社員(約3年間)になる前にもニートをしていた期間があり、ほぼ社会には出てないかも…。今日も人柱精神で色々なことに挑戦していきたいと思います。

この記事が役に立ったらシェアしてくれるとウレシイデス(´人・ω・`)

フォローする

人気ブログランキング
いつも応援ありがとうございます!
いいね!ボタンはこちら!