WordPress

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

WordPress

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

PR記事:オリジナル自作あり!Twitter予約投稿ツール比較

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

今回、実装すること

  • 画像を左、タイトルを右、
  • 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;
	}
}

以上で出来上がりです。

スポンサーリンク

関連記事のサムネイルの割り当てがうまくいかない!?

ここからは余談です。同じ症状になった人だけみればいいでしょう。普通の人は大丈夫ですが、Wordpressのメディア設定をいじっている場合、関連記事のサムネイルの割り当てがうまくいかない場合があります(^^;サムネイルの更新タイミングは、画像をアップロードするときのため、設定を変えるだけでは、何もかわりません。そこでサムネイルを再作成してあげる必要があります。

function.phpにコードを追加。

add_image_size( 'yarpp-thumbnail' , 150, 150, true);

この場合、PHPもyarpp-thumbnailを読むこむようにします。

regenerate thumbnailsというプラグインを使って再生成すればOKです。すべての画像に再生成を行います。

WordPress › Regenerate Thumbnails « WordPress Plugins

メディア > ライブラリ

から、1枚の画像だけ再生成できるため、テストしてみたらいいでしょう。

スポンサーリンク

YARPP PROって！？

どうでもいい話ですが、新しいバージョンから表示されている、YARPP PROってちょっと気になりますね。登録はしていないのですが、登録しないと、今後、機能が制限されるという、流れになるとちょっと嫌ですね(^^;

ただ、使い慣れているため、とりあえず、このまま行こうと思います。

追記、このサイトは解説だけしていて、関連記事を表示していなかったのですけど(^^;、隙間の時間でちょっと表示してみました。まだまだ手抜きサイトではありますが(^^;、、どうでしょうか。

コメント

タイトルとURLをコピーしました