プライム会員限定!アマゾンミュージックの無料体験で音楽を聴けば500ポイントゲット!

【Simplicity2カスタマイズ】記事一覧のサムネイルを正方形から横長にする方法

Simplicity2 記事一覧のサムネイルを正方形から横長にする

当ブログのWordpressのテーマをWordpress公式テーマ「TwentyTwelve」から寝ログを運営しているわいひらさんという方が作ったテーマ「Simplicity2」に変更したので、「Simplicity2」のカスタマイズを備忘録がてら記事にしていきます。

この記事は「記事一覧の一つ一つの記事のサムネイルを正方形から横長の長方形にする方法」を解説していこうと思います。

Simplicity2のデフォルトでは正方形でサムネイルが生成されるので、画像が横幅と合わず切り取られてしまうため横長にしていこうと思います。

スポンサーリンク

サムネイルを横長に Before After

カスタマイズする前は、下の画像のようにサムネイルが正方形で生成されてしまうので、画像が切り取られてしまっています。

サムネイル 横長

それをカスタマイズすることによって、サムネイルを横長にして画像がしっかりと表示されるようにしていこうと思います。

カスタマイズ後のサムネイルサイズはこのように横長になります。

サムネイル 横長に

また、PCで表示しても、モバイルで表示しても対応できるようにしていきます。

・記事と記事の間に境界線を入れたいならこちら

・投稿日とカテゴリーを右にずらして背景色を変更したいならこちら

サムネイルを横長に 下準備

まず、今回このサムネイルを横長にするカスタマイズをする前に準備をしていきます。

Simplicity2には、記事一覧の表示方法がいくつかあります。

外観 → カスタマイズ → レイアウト(全体・リスト) → 一覧リストのスタイル

・エントリーカード(デフォルト)
・大きなエントリーカード
・最初だけ大きなエントリーカード
・本文表示
・最初だけ本文表示
・サムネイル大
・タイトル2列
・タイトル3列
・タイトル2列 画像縦横比保存
・タイトル3列 画像縦横比保存

以上、10のスタイルから記事一覧の表示を変更できます。

この記事では「エントリーカード(デフォルト)」に設定していることを前提にカスタマイズしていきます。

他のスタイルでは表示が壊れてしまうことがあるかもしれないので、今回カスタマイズするなら「エントリーカード(デフォルト)」に設定してください。

サムネイルを横長に コード

このカスタマイズをするには3つの手順を踏んでいきます。

1.サムネイルのサイズを生成する

まず初めにサムネイルのサイズを生成していきます。

デフォルトでは、150×150のサイズでサムネイルが生成されるため、横長の画像は横が切れてしまいます。

なので、横長のサイズを生成できるようにコードを書いていきます。

コードを書くのは、「テーマのための関数 (functions.php)」です

外観 → テーマ編集 → Simplicity2 child → テーマのための関数 (functions.php)

テーマのための関数 (functions.php)を編集するなら必ず子テーマのテーマのための関数 (functions.php)を編集してください。

テーマのための関数 (functions.php)にこのようにコードを追加します。中身を解説していく。

「thumb750」は、この画像サイズの名前です。次の手順で使います。

次の「750」は、画像の横の長さです

次の「450」は、  画像の縦の長さです。

「true」は、画像の切り抜きを行うかどうかです。ここでは「true」のままでOK

このコードでは、750×450のthumb750の言う名前の画像サイズを生成しました。

2.生成したサイズをサムネイルに設定する

次に、先ほど新しく作った画像サイズをサムネイルに適用されるように設定していきます。

コードを編集するのは「entry-card.php」です!

外観 → テーマ編集 → Simplicity2 child → entry-card.php

もし子テーマに追加されていなかったら、追加して中身を編集しましょう。

こちらのコードを探してください。

コピーして「Ctrl」+「F」で探すと楽です。

コードの中身の「thumb150」を先ほど生成した画像サイズの名前「thumb750」に変更します。

変更後はこのようになります。

コードを探して、コードの中身の「thumb150」を「thumb750」にするだけなので簡単ですね。

これで、サムネイルを横長に設定できました。

最後にSCCを使って、画像サイズを調整していきます。

3.CSSでサムネイルサイズを変更

最後にこの手順をクリアするとサムネイルを横長で表示することができます。

外観 → テーマ編集 → Simplicity2 child → スタイルシート (style.css) & mobile.css

PCでの表示は「スタイルシート (style.css)」に

モバイルでの表示は「mobile.css」にコードを追加してください。

これでトップページの記事一覧の一つ一つの記事のサムネイルが横長で表示されます。

サイズは、自分のサイト幅に合わせてサイズを調整してください。

「width」が横の長さ

「height」が縦の長さ

PC用とモバイル用の両方にコードを書くことを忘れないでください。モバイル用にコードを書かないと画像が大きくなり表示が崩れてしまいます。

以上で、カスタマイズは終了になります。

サムネイルを横長に まとめ

この記事は、「記事一覧の一つ一つの記事のサムネイルを正方形から横長の長方形にする方法」をご紹介していきました。

横長のサムネイルのほうが見た目が好きなのでこのカスタマイズをしました。

コードの追加・編集があるのでバックアップを取るなりして、すぐに元に戻せるような対策をしておくといいでしょう