YARPPで、画像左、文字右のリスト形式のテンプレートを作成するカスタマイズ方法

2014年11月17日

YARPPのテンプレートのカスタマイズですが、よく画像の下にタイトルが並んでいるテンプレートを見ます。うちも昔はそれでした。(^^;　けれど、画像の下にタイトルは、タイトルが長くなると、なんだか見にくいため、次のように改善しました。

エックスサーバーのお友達紹介プログラム!

Contents

1 画像つきリストテンプレート(スマホも対応)
2 PHPのコード
3 CSSのコードと解説
4 レスポンティブデザインのCSSのコードを追加
5 関連記事のサムネイルの割り当てがうまくいかない!?
6 YARPP PROって！？

画像つきリストテンプレート(スマホも対応)

今回、実装すること

画像を左、タイトルを右、
PCの場合、2分割する(横に2つの関連記事を並べる)
スマホ(iPhoneやAndroid)やタブレット(iPadなど)の場合、縦に1列にリストのように並べる。

PHPのコード

PHPは画像の下にタイトルのものと変えていませんので、以前の記事を見てください。できるだけシンプルにしています。

Yarppのカスタマイズ　サムネイルの歪みをなおし、レスポンティブデザインにも対応-

CSSのコードと解説

いじったのはCSSのみで、ソースはこれです。いろいろなやり方があると思いますが、うちのポイントも解説します。

/*　YARPPのカスタマイズ　*/
.related-post{
	overflow:hidden;
	margin-top:10px;
}

.related-entry {
	vertical-align: top;
	float: left;
	width:300px;
	font-size: 16px;
	min-height: 160px; /*横に並べるときより、高さがいらないため値が小さくなる*/
	margin: 0;
	padding-right: 20px;
}

.related-entry img{
	float: left;
	padding:2px;
	border: #ccc 1px solid;
	width:120px; /*　YARPPは150*150のサムネイルを使うことが多いが、ここで画像サイズの調整をしてあげる　*/
}

まず、widthの値を増やしました。以前のものからテンプレート300px;ぐらいに。もちろん、50%でやる方法もあるでしょう。

そして、ここでのポイントは、 .related-entry imgのfloat: left; です。

画像を左、リンクを右に配置して、回り込みをする場合、よく2行目以降の文字が、下に落ちてしまいます。 align=”left”でなんとかならないのか、vertical-align: top;で上揃えにならないのか、などを試しても無駄です。 float: left;にします。

ただ、float: left;を使い、、なおかつ%指定をすると、すべて左によります。たとえば、width:300px;の箇所をwidth:50%;に変えてあげると、すべて左によってしまうということです。だから、width:300px;を使っているわけです。

しかし、これだと、width:300px;で固定されてしまうため、ブラウザを縮めた場合やタブレットなどでレイアウトを確認した場合、余白が気になる瞬間があります。 widthの値が長くなったため、余計に気になります。あまり美しくありません。(^^;

そこで、Wordpressのテンプレートによりますが、スタイルシートをみて、レイアウトを1行にするタイミングを自分で決めた方がよいでしょう。

レスポンティブデザインのCSSのコードを追加

次のコードを追加します。PCのコードから記述する場合、PC、スマホの順番のようですね。一行のためwidth:100%;です。

@media screen and (max-width: 979px) {

.related-entry {
		vertical-align: top;
		float: left;
		width:100%;
		font-size: 16px;
		min-height: 160px;
		margin: 0;
		padding-right: 20px;
	}
}

以上で出来上がりです。