*

WordPress Related Posts プラグインで上下にマージンを取る

投稿日:2014/01/09 最終更新日:2014/01/09

最近では関連記事表示が組み込まれたWordPressテーマも多いけど、自力で組み込むことになるなら多くの人が「Yet Another Related Posts Plugin(YARPP)」か「WordPress Related Posts」のどちらかを利用すると思う。

YARPPはもはや鉄板と言っても良い関連記事表示プラグインだけど、今回作りかけのウェブサイトでは、シンプルなもので良かったので「WordPress Related Posts」を導入した。

このプラグインはインストール後に有効化するだけで自動的に関連記事が表示されるのだけど、サムネイル無しのテーマで表示すると、関連記事の上下のスペースが余りに少ないのでCSSに若干の変更を余儀なくされた。
取るに足らない事だけど一応メモしておく。

 

WordPress Related Posts のCSSカスタマイズ

WordPress Related Posts プラグインは有効化すると自動で関連記事が挿入され、デザインに関しては幾つかのテーマから選べるようになっている。

WordPress Related Postsのテーマ選択画面

 

テーマ毎のCSSの場所は以下。
/wp-content/plugins/wordpress-23-related-posts-plugin/static/themes/

この中にある使用中のテーマのCSSを好きにカスタマイズすれば良い。

 

今回のサイトでは Vertical(Medium) を使用していたので、「vertical-m.css」の編集をした。

vertical-m.css をテキストエディタで開くと4行目で margin が設定されている。
 

.wp_rp_wrap .related_post_title {
	clear: both;
	padding: 0 !important;
	margin: 0 !important;
}

 
今回は上に3行分ほど余白が欲しかったので以下のように修正。
 

.wp_rp_wrap .related_post_title {
	clear: both;
	padding: 0 !important;
	margin: 3em 0 0 0 !important;
}

 
これで指定どおりの間隔が開いた。
margin: の後の数字は左から、上,右,下,左 になる。

なので下にも余白を作りたい人は、以下のようになる。
ちなみに 1em は1文字分の長さだ。
 

.wp_rp_wrap .related_post_title {
	clear: both;
	padding: 0 !important;
	margin: 3em 0 3em 0 !important;
}

 
上下だけでなく、デザインそのものを大きく変えたい場合でもこのCSSを触れば良い。
(!important; がつきまくって一体何が important なのか判らないCSSだけど・・・)

 

WordPressとかCSSのオススメ本

  • このエントリーをはてなブックマークに追加
  • Pocket
  • 1 follow us in feedly

関連記事

no image

【WordPress】WP Super Cacheで設定時に500エラーが出るときの対処法

WordPressのページキャッシュ用にWP Super Cacheと...

記事を読む

no image

WordPressでメニューが文字化けする

WordPressでメニューを編集した際、保存を押すと文字化けが起きた...

記事を読む

no image

WordPressのパーマリンク設定で403が出たときの対応

WordPress を新規インストールして諸々の設定を行っていると、パ...

記事を読む

no image

WordPressのお引越し!丸ごと全部移行メモ

JCOM の障害のあおりを受け、このブログも2日ほど世界から消え去って...

記事を読む

no image

mono-labさんのCUBICテーマでどうしても気になった点

2015年2月18日 追記 xhtmlのアウトラインぶち壊しててワロ...

記事を読む

新着記事

no image

【WordPress】WP Super Cacheで設定時に500エラーが出るときの対処法

WordPressのページキャッシュ用にWP Super Cacheと...

記事を読む

【Debian】mysqlのスロークエリログを取得する手順

VPSにWordPressをインストールしていると、キャッシュプラグイ...

記事を読む

no image

MIFES10でUWSCの予約語・キーワードを明示する

最近エディタにはMIFES10を利用しているが、UWSCの利用頻度が上...

記事を読む

no image

WordPressでメニューが文字化けする

WordPressでメニューを編集した際、保存を押すと文字化けが起きた...

記事を読む

no image

WEBサイトキャプチャーツール「CrenaHtml2jpg」が便利

WEBサイトのキャプチャを作成したい事は多々ある。 これまでは He...

記事を読む

コメント/トラックバック

トラックバック用URL:

この投稿のコメント・トラックバックRSS




管理人にのみ公開されます

no image
【WordPress】WP Super Cacheで設定時に500エラーが出るときの対処法

WordPressのページキャッシュ用にWP Super Cacheと...

【Debian】mysqlのスロークエリログを取得する手順

VPSにWordPressをインストールしていると、キャッシュプラグイ...

no image
MIFES10でUWSCの予約語・キーワードを明示する

最近エディタにはMIFES10を利用しているが、UWSCの利用頻度が上...

no image
WordPressでメニューが文字化けする

WordPressでメニューを編集した際、保存を押すと文字化けが起きた...

no image
WEBサイトキャプチャーツール「CrenaHtml2jpg」が便利

WEBサイトのキャプチャを作成したい事は多々ある。 これまでは He...

→もっと見る

PAGE TOP ↑