RSSImportを使って横一列にまとめサイトのようなスクロールバー付RSS表示をする方法

WordPressのRSSImportのプラグインを使ってまとめサイトの上部にあるようなスクロールバー付ボックスタイプのRSS表示を作ってみます。

動作確認した環境とかバージョン

・RSSImportプラグインは先にインストールしておいてください。
・Luxeritasテーマ バージョン: 2.5.3
・子テーマ Child バージョン: 2.00
・テーマの「ヘッダー下ウィジェット」と「汎用サイドバー(タイトルH3タイプ)」に入れて確認

上記のテーマの場合、カラム数に関係なく横幅いっぱいに表示されます。

横4列タイプ(高さ250px)

横3列タイプ(高さ250px)

横2列タイプ(高さ250px)

横1列タイプ(記事数5つまで表示。スクロールなし)

おまけ 横1列タイプをフッター3カラムに1つずつ入れた場合

Luxeritas子テーマの編集 style.css コピペ(共通)

/*rss領域作成*/

ul{
   padding:0px;
}
.post-meta{
   display:none;
}
#body{
   margin:0px;
}
.entry-title{
   margin-top:0px;
}
#main{
   padding-top:0px;
   border:0px;
}
 /*メインタイトル文字、、アンダーライン*/
.rsst {
   border-bottom: double #660000 3px;
   font-size: 1.3em;
   position: relative;
   padding: 0 .5em 0em 1.3em;
   border-bottom: 2px solid #660000;/*タイトル下の仕切り線(あずき色)*/
   margin-top:3px;
}
 /*メインタイトル文字のFontAwesomeアイコン*/
.rsst:after {
    position: absolute;
    top: .0em;
    left: .0em;
    z-index: 2;
    content: '';
    width: 16px;
    height: 16px;
    font-family: "FontAwesome";
    content: "\f2b5";
        color: #434343;
        font-size: 1.0em;
    margin-right: 13px ;
}
/*メインタイトル文字のリンクの色*/
.rsst a:visited{
    color:#434343; /*(うすい黒色)*/ 
}
#breadcrumb{
display:none;
}
ul{
line-height:1.1;
margin-top:5px;
}
date{
line-height:1.3;
font-size:0.8em;
color:#808080;
}
.font1{
line-height: 1em;
font-size:xx-small;
}
#site-description {
    font-size: 0.5em;
    line-height:0.8em;
}
#main .widgets {
    margin-top: 0px;
    margin-bottom: 0px;
}

/*RSS Box枠*/
.flex-container {
  display: flex;
  flex-flow: row;
}
.flex-item {
  flex: 1 1 auto;
  margin: 0 2px;
  padding: 0px;
  width: 250px;
  background-color:  #fff;
}
.box {
  width: 100%;
  height: 250px;
  overflow: auto;    
  background: #fff;     
}

ウィジェットのテキストへコピペ(4列表示の場合)記事20

<div class="rsst"><span class="bold"><a href="https://gameblog.work/" target="_blank" rel="noopener">おすすめサイトの最新記事</a></span></div>
<div class="flex-container">
<div class="flex-item">
<div class="box">
[RSSImport display="20" feedurl="https://gameblog.work/?feed=rss2" target="blank" date="true" date_format="n/j H:i" before_date="<small>" after_date="</small>" start_item="" end_item="<hr />"]
</div>
</div>

<div class="flex-item">
<div class="box">
[RSSImport display="20" feedurl="https://gameblog.work/?feed=rss2" target="blank" date="true" date_format="n/j H:i" before_date="<small>" after_date="</small>" start_item="" end_item="<hr />"]
</div>
</div>

<div class="flex-item">
<div class="box">
[RSSImport display="20" feedurl="https://gameblog.work/?feed=rss2" target="blank" date="true" date_format="n/j H:i" before_date="<small>" after_date="</small>" start_item="" end_item="<hr />"]
</div>
</div>

<div class="flex-item">
<div class="box">
[RSSImport display="20" feedurl="https://gameblog.work/?feed=rss2" target="blank" date="true" date_format="n/j H:i" before_date="<small>" after_date="</small>" start_item="" end_item="<hr />"]
</div>
</div>
</div>

ウィジェットのテキストへコピペ(3列表示の場合)記事10

<div class="rsst"><span class="bold"><a href="https://gameblog.work/" target="_blank" rel="noopener">おすすめサイトの最新記事</a></span></div>

<div class="flex-container">
<div class="flex-item">
<div class="box">

[RSSImport display="10" feedurl="https://gameblog.work/?feed=rss2" target="blank" date="true" date_format="n/j H:i" before_date="<small>" after_date="</small>" start_item="" end_item="<hr />"]
</div>
</div>

<div class="flex-item">
<div class="box">
[RSSImport display="10" feedurl="https://gameblog.work/?feed=rss2" target="blank" date="true" date_format="n/j H:i" before_date="<small>" after_date="</small>" start_item="" end_item="<hr />"]
</div>
</div>

<div class="flex-item">
<div class="box">
[RSSImport display="10" feedurl="https://gameblog.work/?feed=rss2" target="blank" date="true" date_format="n/j H:i" before_date="<small>" after_date="</small>" start_item="" end_item="<hr />"]
</div>
</div>

</div>

ウィジェットのテキストへコピペ(2列表示の場合)記事10

<div class="rsst"><span class="bold"><a href="https://gameblog.work/" target="_blank" rel="noopener">おすすめサイトの最新記事</a></span></div>
<div class="flex-container">
<div class="flex-item">
<div class="box">
[RSSImport display="10" feedurl="https://gameblog.work/?feed=rss2" target="blank" date="true" date_format="n/j H:i" before_date="<small>" after_date="</small>" start_item="" end_item="<hr />"]
</div>
</div>

<div class="flex-item">
<div class="box">
[RSSImport display="10" feedurl="https://gameblog.work/?feed=rss2" target="blank" date="true" date_format="n/j H:i" before_date="<small>" after_date="</small>" start_item="" end_item="<hr />"]
</div>
</div>

</div>

ウィジェットのテキストへコピペ(1列表示の場合)記事5
スクロールバー無し

<div class="rsst"><span class="bold"><a href="https://gameblog.work/" target="_blank" rel="noopener">GameBlogどっと沸くサイト</a></span></div>
[RSSImport display="5" feedurl="https://gameblog.work/?feed=rss2" target="blank" date="true" date_format="n/j H:i" before_date="<small>" after_date="</small>" start_item="" end_item="<hr />"]

 

注意!

・テーマの文字色指定がdefaultのままですとページ全体が上記cssで指定した色になります。どちらかに統一した方が良いでしょう
・marginとかpaddingなどギチギチに詰めています。ページ全体に影響しますので適宜変更してください。

スクロールバーは便利だが3列、4列表記でスマホで表示させるとパチンコスロットのようになるぜ。
Widget LogicのようなプラグインでPCやスマホでウィジェットの表示・非表示を指定するのが無難だ


1列表示の場合、サイドバーに入れた方がいいわね


あとは、自分でwidth・heightで幅高さや色を変えたり好きに調整しな


あらっ ずいぶん上から目線ね

オレも・・わかんねんだよ