RSSImportの文字サイズや色を変更する

RSSImportで文字サイズとか色を、少々カスタマイズする方法です。

外部や自分のサイトのRSSを読み込んでページ内に表示したいと思い、wordpressのRSSImportプラグインを入れてみました。(WP-RSSImport バージョン 4.4.17)
表示自体はすんなりできたのですが、なんか文字の大きさや色が微妙。

ということで、色々と試してみたのですが、私の足りない頭では理解するのに時間がかかりました・・。

忘れないように備忘録として残しておこうと思います。

---

RSSImportプラグインを入れると、投稿入力画面にRSSImportのボタンが出てくるのですが、それをポチット押すと・・

何か見るのも嫌になるようなものが張り付けられましたね。。
意味する内容的は次の表になります。

RSSImport設定表

display=”●”	記事の件数　例)”5″なら5件表示
feedurl=”●”	表示するRSSのURL　例)”http://(省略)”
before_desc=”●”	内容文の先頭につける文字　例)”<br /><small>” デフォルトでbr/が入っており、入れないと改行しません。
displaydescriptions=”●”	内容文の表示有無　例)”TURE”(表示)、”FALSE”(非表示)
after_desc=”●”	内容文の末尾につける文字　例)”</small>”
html=”●”	内容文にhtmlタグの表示有無　例)”FALSE”
truncatedescchar=”●”	内容文の文字数　例)”200″
truncatedescstring=”●”	内容文が文字数をオーバーしたときの表示　例)”…”
truncatetitlechar=”●”	タイトルの文字数　例)””
truncatetitlestring=”●”	タイトルが文字数をオーバーしたときの表示　例)”…”
before_date=”●”	日付の先頭につける文字　例)”<small>”
after_date=”●”	日付の末尾につける文字　例)”</small>”
date_format=”●”	日付の表示方法　例)””(年月日で表示される)
before_creator=”●”	投稿者の先頭につける文字　例)””
creator=”●”	投稿者の表示有無　例)”FALSE”(非表示)
after_creator=”●”	投稿者の末尾につける文字　例)””
start_items=”●”	リスト全体の先頭につける文字　例)<ul>
emd_items=”●”	リスト全体の末尾につける文字　例)</ul>
start_item=”●”	リストの頭につける文字　例)<li>
end_item=”●”	リストの末につける文字　例)</li>
target=”●”	リンク先のターゲット　例)””
rel=”●”	rel属性(リンク先文書との関連属性)　例)””
desc4title=”●”	title属性(title linkの属性を使用)　例)””
charsetscan=”●”	charset-typeをスキャンし、ゆっくりと読み込む(読込先のコンテンツによっては使用) 例)”FALSE”
debug=”●”	デバッグモードで表示　例)”FALSE”
before_noitems=”●”	アイテムがない時に先頭につける文字　例)<p>
noitems=”●”	アイテムがない時に表示する文章　例)No items, feed is empty.
after_noitems=”●”	アイテムがない時に末尾につける文字　例)<p>
before_error=”●”	エラーの時に先頭につける文字　例)<p>
error=”●”	エラーの時に表示する文章　例)Error: Feed has an error or is not valid
after_error=”●”	エラーの時に末尾につける文字　例)<p>
paging=”●”	改ページの有無　例)”FALSE”
prev_paging_link=”●”	前のページのリンク名　例)”« Previous”
next_paging_link=”●”	次のページのリンク名　例)”Next »”
prev_paging_title=”●”	前のページのタイトル名　例)”more items”
next_paging_title=”●”	次のページのタイトル名　例)”more items”
use_simplepie=”●”	フィード解析にsimplepieを使用　例)”FALSE”

ここで、茶色文字で示した部分を変更すれば見栄えが良くできるでしょう。
その他は無視してもいいと思います。

基本構造として表示する内容に対してbefore、afterがあり、
そこにスタイルを設定することで、表示内容を装飾することが出来ます。

「before」＋「表示内容」＋「after」

例えば、「表示内容」を小文字にしたければ、
beforeに<small>、afterに</small>
と設定すれば、<small>表示内容</small>
となり、小文字で表示されるといった流れです。

まずはデフォルトで自分のサイトのRSS feedを取得して表示させてみましょう。

このタイトルと内容文のサイズが同じなのが私の好みに合いません。

次に、before_desc=”<br /><small>、after_desc=”</small>として表示してみます。

次に、before_desc=”<span style=”font-size:20px;color:red”>”、after_desc=”</span>”として試してみましたが・・・デフォルトと変わらない。

そのまま↓テキストで入力すれば表示はでるんですけど。。
テストです。

cssでフォントサイズや色を設定し、span classで指定しても同じ。
なぜでしょう??

結局の所、悩んだあげくcssに次を追加しました。

before_desc=”<rss-desc>”、after_desc=”</rss-desc>”として試してみました。

・・変わったわ。
なんかすごい苦労しました。

リスト表示の部分<li>のカスタマイズは気が向いたらにしますです。