WPでSEO対策

WordPressを使って、SEO対策初心者でも簡単に検索エンジン上位上位表示できる情報をお届けします。

RSSImport：レイアウト変更例

更新日：

SEO対策プラグイン

RSSを簡単に読み込み・表示させるWordPressの便利なプラグイン“RSSImport”のレイアウトを変更する方法です。表示させる場所やサイトのデザインに合わせてカスタマイズしてみましょう。

 

この記事では、RSSImportをインストールして有効化済みなことが前提です。

RSSImportのインストールや基本設定は、【RSSImport】RSS読込み・表示プラグイン：設定方法・使い方を御覧ください。

基本の表示

使用できるすべてのコードを設定すると以下のように表示されます。

Error: Feed has an error or is not valid.

 
 

ショートコードは下記のようになってます。

[RSSImport display="2" feedurl="http://kanemoukejyouhou.iinedondon.com/feed/" before_desc="<br />“" displaydescriptions="true" after_desc="”" html="true" truncatedescchar="200" truncatedescstring="…" truncatetitlechar="50" truncatetitlestring="…" before_date="<small>" date="true" after_date="</small>" date_format="y/m/d" before_creator="<small>" creator="true" after_creator="</small>" start_items="<ul>" end_items="</ul>" start_item="<li>" end_item="</li>" target="top" rel="follow"]

 
 

因数と値は下記のようになってます。

display 表示する記事の数 2件
feedurl RSSのURL 当サイトのURL
before_desc 説明文の前につける文字列 “（左ダブルクオテーション）
displaydescriptions 説明文の表示 表示する
after_desc 説明文の後ろにつける文字列 ”（右ダブルクオテーション）
html 説明文にHTMLタグを含めるか 含める
truncatedescchar 説明文の文字数 200文字
truncatedescstring 説明文を切り捨てたあとの文字列 …（三点リーダー）
truncatetitlechar タイトルの文字数 50文字
truncatetitlestring タイトルを切り捨てたあとの文字列 …（三点リーダー）
before_date 日付の前につける文字列 <small>
date 日付を表示するか 表示する
after_date 日付の後につける文字列 </small>
date_format 日付のフォーマット y/m/d（年/月/日）
before_creator 投稿者の前につける文字列 <small>
creator 投稿者を表示するか 表示する
after_creator 投稿者の後ろにつける文字列 </small>
start_items リスト全体の前に表示する文字列 <ul>
end_items リスト全体の後ろに表示する文字列 </ul>
start_item リストの前に表示する文字列 <li>
end_item リストの後に表示する文字列 </li>
target リンクのターゲット top
rel rel属性 follow

 

因数または値を記述しなければ、デフォルトの形式で表示され、デフォルトでよければ全部記述する必要はありません。

これを基にレイアウト変更例とソースをご紹介します。

リスト表示のカスタマイズ

CSSを追加して、クラス指定することで簡単にレイアウトをカスタマイズできます。

Googleの検索結果っぽい表示

リストマークを非表示にして、左寄せに表示すれば下記のようになります。

Error: Feed has an error or is not valid.

 
 

CSSに下記のソースを追加します。※クラス名「rssisamp01」は適当に変更してください。

/* RSSImportのリストサンプル01　*/
.rssisamp01 ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0px;
	display: table;
}
.rssisamp01 li {
	list-style: none;
	display: table-row;
}
.rssisamp01 a {
	text-decoration: none;
	font-size: 16px;
}

 

ショートコードは下記のようになってます。

[
RSSImport
display="2" feedurl="http://kanemoukejyouhou.iinedondon.com/feed/"
before_desc=""
displaydescriptions="true"
after_desc=""
html="true"
truncatetitlechar="50"
before_date="<br />"
date="true"
after_date=" - "
creator="false"
start_items="<ul class='rssisamp01'>"
target="top"
rel="follow"
]

 
 

因数と値は下記のようになってます。

display 表示する記事の数 2件
feedurl RSSのURL 当サイトのURL
before_desc 説明文の前につける文字列 なし（何も入力しない）
displaydescriptions 説明文の表示 表示する
after_desc 説明文の後ろにつける文字列 なし（何も入力しない）
html 説明文にHTMLタグを含めるか 含める
truncatetitlechar タイトルの文字数 50文字
before_date 日付の前につける文字列 <br />
date 日付を表示するか 表示する
after_date 日付の後につける文字列 - （ハイフンと前後に半角スペース）
creator 投稿者を表示するか 表示しない
start_items リスト全体の前に表示する文字列 <ul class='rssisamp01'>
target リンクのターゲット top
rel rel属性 follow

 

ポイントは、リスト全体の前に表示する文字列のクラス指定です。

start_items="<ul class='rssisamp01'>"

 

クラス名は、CSSに記述したクラス名を指定してください。※クラス名の前後は「'（シングルクオテーション）」ですのでお間違いのないように。

デフォルトで問題のない因数は削除してます。

リストマークのカスタマイズ

画像を使わずにリストマークをチェックマークに変更する方法です。

Error: Feed has an error or is not valid.

 
 

CSSに下記のソースを追加します。※クラス名「rssisamp02」と「list1」は適当に変更してください。

/* RSSImportのリストサンプル02　*/
.rssisamp02
,.rssisamp02 li{
	padding:0px;
	margin:0px;
}
 
.rssisamp02 li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}
 
.list1 li{
	position:relative;
	padding-left:20px;
}
 
.list1 li:after, .list1 li:before{
	content:''; 
	display:block; 
	position:absolute; 
	top:4px; 
	left:8px; 
	height:11px; 
	width:4px; 
	background:#009500; 
	border-radius:10px;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.list1 li:before{
	top:8px; 
	left:3px;
	height:8px; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}

 

ショートコードは、下記のようになってます。

[RSSImport
display="2" feedurl="http://kanemoukejyouhou.iinedondon.com/feed/"
before_desc=""
displaydescriptions="true"
after_desc=""
html="true"
truncatetitlechar="50"
before_date="<br />"
date="true"
after_date=" - "
creator="false"
start_items="<ul class='rssisamp02 list1'>"
target="top"
rel="follow"]

 
 

ポイントは先と同じ、リスト全体の前に表示する文字列のクラス指定です。

start_items="<ul class='rssisamp02 list1'>"

 

「background」の値を変更すれば、チェックマークの色が変わります。

.list1 li:after, .list1 li:before{
	content:''; 
	display:block; 
	position:absolute; 
	top:4px; 
	left:8px; 
	height:11px; 
	width:4px; 
	background:#009500; 
	border-radius:10px;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}

 
 

自サイトでショートコードではなくソースコードを使えば、アイキャッチ画像入りの表示も可能ですね。

いろいろ試してみてください。

 

また反響が良ければ、別のパターンも追加したいと思います。

 

-SEO対策プラグイン
-, , , , , , , , , , , , , , , , , , , ,

Copyright© WPでSEO対策 , 2024 All Rights Reserved.