まとめサイト

WordPressのまとめサイトでレスポンシブ対応RSSを設置する方法!RSSImportを使って綺麗に表示!

外部RSSを設置するプラグイン

まとめサイトは外部RSSの設置が必須!

wordpressで2chまとめサイトを運営している場合、『RSSImport』という無料プラグインを用いることで、外部RSSの設置が可能になります。

配布サイトにてダウンロードし、wordpressにインストールしましょう。

wordpressでまとめサイトを運営する方法はこちらから
2chまとめサイトの作り方
【2021年版】まとめサイトの作り方を初心者向けに解説!WordPressを使った運営ノウハウを大公開!2chまとめサイトを作りたくて悩んでいる方、このページに書いてあることを読めば全て解決すると思うので必見です!アクセスを稼ぐ方法や、記事の作成方法など、細かくわかりやすく解説!2chまとめサイトで成功するためのノウハウを全て詰め込んでいます!...

RSSImportの使い方

RSSImportは、細かい初期設定などの必要がありません。プラグインを有効化した後、そのまま使用することが可能です。

▲『外観→ウィジェット』を選択し、ウィジェット編集メニューから『テキスト』を選択。

▲使用しているテーマによって違いますが、『トップページ上部』『記事上部』などの枠にドラッグ&ドロップ。

RSSImportは、専用のショートコードを記入することで、外部RSSを収得し配信することが可能になります。下記のコードを先ほど追加したテキスト編集エリアに貼り付けましょう。

基本的な専用コード

[RSSImport display=”表示するRSSの数” feedurl=”RSSのURL“]

▲ショートコードを貼り付けます。

▲無事、外部RSSが表示されたはずです!

まとめサイトを運営するにあたって、使用する可能性の高いコマンドは以下の3つです。好みのカスタマイズを行いましょう。

コマンド 効果 記入例
display 収得するRSSの数 display=”5″
feedurl RSSのURL feedurl=”RSSのURL”
date 日付の表示 表示する場合 date=”true” を追加

CSSで見栄えを良くする

しかし、このままでは見栄えがあまりよろしくないので、CSSを追加し、デザインを綺麗なものにしましょう。以下、筆者のオススメのカスタマイズ設定です。

CSSは『外観→カスタマイズ→追加CSS』から追加することが出来ます。

タグ

<div id=”rss”>
<div class=”rss”>
[RSSImport display=”表示するRSSの数” feedurl=”RSSのURL“]
</div>
</div>

追加するCSS

#rss{
flex-direction: row;
flex-wrap: wrap;
font-weight:bold;
justify-content: space-between;
}

#rss li{
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 5px 0px 5px 0px;
list-style: none;
}

.rss {
font-size: 16px;
}

#rss li:not(:first-child){
border-top: 1px dashed #a9a9a9;
}

  • 『font-weight:bold;』で文字の太さを調整。
  • 『padding: 5px 0px 5px 0px;』で文字間の微調整。
  • 『font-size: 16px;』で文字の大きさを調整。
  • 『border-top: 1px dashed #a9a9a9;』で文字間のラインを調整。

2列にして表示したい場合

2列で表示した場合は以下の設定を行います。

タグ

<div id=”rss”>
<div class=”rss”>
[RSSImport display=”表示するRSSの数” feedurl=”RSSのURL“]
</div>
<div class=”rss”>
[RSSImport display=”表示するRSSの数” feedurl=”RSSのURL“]
</div>
</div>

CSS

.rss {
font-size: 14px;
}

#rss{
display:flex;
flex-direction: row;
flex-wrap: wrap;
font-weight:bold;
justify-content: space-between;
}

#rss .rss{
width: 49%;
margin: 0px 0px 0px 0px;
}

#rss li{
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 5px 0px 5px 0px;
list-style: none;
}

#rss li:not(:first-child){
border-top: 1px dashed #a9a9a9;
}

『display:flex;』『width: 49%;』を追加したことにより、2列で表示されたと思います。

『overflow: hidden;』『white-space: nowrap;』のコマンドにより、長い文章が省略され、文章の最後に『・・・』が追加されるため、それっぽいデザインになったはずです!

パソコンでは2列、スマホでは1列で表示したい場合

パソコンで見た場合は2列、スマホで見た場合は1列、といった設定を行いたい場合は、レスポンシブデザイン用のCSSを追加しましょう。

タグ

<div id=”rss”>
<div class=”rss”>
[RSSImport display=”表示するRSSの数” feedurl=”RSSのURL“]
</div>
<div class=”rss2″>
[RSSImport display=”表示するRSSの数” feedurl=”RSSのURL“]
</div>
</div>

CSS

.rss .rss2{
font-size: 14px;
}

#rss{
display:flex;
flex-direction: row;
flex-wrap: wrap;
font-weight:bold;
justify-content: space-between;
}

#rss .rss{
width: 49%;
margin: 0px 0px 0px 0px;
}

.rss2{
width: 49%;
margin: 0px 0px 0px 0px;
}

#rss li{
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 5px 0px 5px 0px;
list-style: none;
}

#rss li:not(:first-child){
border-top: 1px dashed #a9a9a9;
}

@media only screen and (max-width: 767px) {
#rss .rss{
width: 100%;
border-bottom: 1px dashed #a9a9a9;
}
.rss2{
width: 100%;
}
}

上記のCSSを追加します。

『49%』『49%』で2列で表示していたRSSを『ディスプレイのサイズが767px以下の時』に『100%』の1列で表示し直す設定です。

@media only screen and (max-width: 767px) {
#rss .rss{
この部分に『ディスプレイのサイズが767px以下の時に反映させたい設定』を記入します。
}
}

『<div class=”rss”>』『<div class=”rss2″>』に分けているのは、2列で表示していたRSSをレスポンシブによって1列で表示した際、つなぎ目の部分にボーダー線を追加し、違和感を無くすためです。

右の列をスマホで非表示にしたい場合

@media only screen and (max-width: 767px) {
#rss .rss{
width: 100%;
}
.rss2{
display: none;
}
}

display: none;』を追加することで、パソコンで表示した場合は二列、スマホで表示した場合は『左の列だけを1列にして表示』『右の列は非表示』に設定できます。

display: none;』は、その要素を非表示にする設定です。

上記の場合『<div class=”rss2″>』で囲った部分を767px以下の画面で表示させた際、非表示にさせることが出来ます。

気を付ける点

1列に複数のRSSURLを表示したい場合、ショートコードとショートコードの間にスペースを入れてしまうと、レイアウトが崩れてしまう可能性があります。余白を入れないように追加しましょう。

良い例

<div id=”rss”>
<div class=”rss”>
[RSSImport display=”表示するRSSの数” feedurl=”RSSのURL“][RSSImport display=”表示するRSSの数” feedurl=”RSSのURL“][RSSImport display=”表示するRSSの数” feedurl=”RSSのURL“]
</div>
</div>

悪い例

<div id=”rss”>
<div class=”rss”>
[RSSImport display=”表示するRSSの数” feedurl=”RSSのURL“]

[RSSImport display=”表示するRSSの数” feedurl=”RSSのURL“]

[RSSImport display=”表示するRSSの数” feedurl=”RSSのURL“]
</div>
</div>

まとめサイトのノウハウ

2chまとめサイトを運営するにあたって大事な点は以下の3つです。

  1. とにかく記事を更新する
  2. アンテナサイトに登録してもらう
  3. デザインの良いサイトを作る

下記の記事にて、2chまとめサイトの作り方、意識すべき点を解説しています。良かったら参考にしてみて下さい!

2chまとめサイトの作り方
【2021年版】まとめサイトの作り方を初心者向けに解説!WordPressを使った運営ノウハウを大公開!2chまとめサイトを作りたくて悩んでいる方、このページに書いてあることを読めば全て解決すると思うので必見です!アクセスを稼ぐ方法や、記事の作成方法など、細かくわかりやすく解説!2chまとめサイトで成功するためのノウハウを全て詰め込んでいます!...
最新投稿記事