相互RSS一覧

WordPress、Simplicity2、ヘッダーの下にlivedoor 相互RSSを設置する

WordPress、Simplicity2、ヘッダーの下にlivedoor 相互RSSを設置する

設置するだけならば、単純に下記の記事を参考にウィジェットで、livedoor 相互RSSの貼付けコード貼り付ければ完了です。

WordPress、Simplicity2、ヘッダーの下にRSS掲載スペースを作る 子テーマfunctions.phpに、 regist...

 

livedoor 相互RSSの見栄えをよくする

livedoor 相互RSSのcssをダウンロードします。

http://blogroll.livedoor.net/css/default.css

下記のコードをSimplicity2 child: スタイルシート (style.css)に追加します。

自分の好みに合わせて設定を変えてください。

/* ----------------------------------------------- */
/*

BlogRoll css

*/
/* ----------------------------------------------- */

.blogroll-channel,
.blogroll-channel * {
width: auto;
height: auto;
margin: 0;
padding: 0;
border: none;
text-align: left;
}
.blogroll-channel {
margin-bottom: 5px;
padding: 5px;
background: #fff;
}

.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;
}

 

livedoor 相互RSSにスクロールバーと枠を付ける。

下記のコードをSimplicity2 child: スタイルシート (style.css)に追加します。

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

height: 200pxは、枠の高さを調節できます。

 

livedoor 相互RSSを横に2つ並べる

下記のコードをSimplicity2 child: スタイルシート (style.css)に追加します。

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

 

livedoor 相互RSSを表示する場所のウィジェットに追加します。

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

当ブログで現在使用中のlivedoor 相互RSSが、横に2つ並べてある状態になります。
2018.5.26時点


WordPress、Simplicity2、ヘッダーの下にRSS掲載スペースを作る

WordPress、Simplicity2、ヘッダーの下にRSS掲載スペースを作る

子テーマfunctions.phpに、

register_sidebar(array(
     'name' => 'top_left' ,
     'id' => 'top_left' ,
     'before_widget' => '<div class="widget">',
     'after_widget' => '</div>',
     'before_title' => '<h3>',
     'after_title' => '</h3>'
));
register_sidebar(array(
     'name' => 'top_right' ,
     'id' => 'top_right' ,
     'before_widget' => '<div class="widget">',
     'after_widget' => '</div>',
     'before_title' => '<h3>',
     'after_title' => '</h3>'
));

コードを追加します。

子テーマbefore-main.phpに、

<div class="top rss">
    <div class="left"><?php dynamic_sidebar('top_left'); ?></div>
    <div class="right"><?php dynamic_sidebar('top_right'); ?></div>
</div>

コードを追加します。

あとは、ダッシュボード→ウィジェットでRSSウィジェットを追加。

 

動作環境

Simplicity2.5 安定版とSimplicity2の子テーマ(バージョン:20161002)をインストール。


スポンサーリンク
Sponsered Link
Sponsered Link