2017.05.03WordPressのテーマ「simplicity」の記事一覧は、通常設定の場合正方形の画像がサムネイルに指定されます。各記事のアイキャッチに設定した画像が、自動的に正方形にリサイズされサムネイルとして表示される仕組みです。画像のサイズを変更したいときは、CSSを使って「width」や「height」を設定するだけで簡単に出来ます。simplicityの場合は自分がアップロードした画像そのものではなく、自動的にリサイズされた150×150の画像が使われるようになっているので、そう簡単にはいきません。そんなわけで今回は、simplicityでサムネイルを自由な縦横比率・サイズで表示する方法を紹介します。PHPを使いますが、ほぼコピペのみで簡単にカスタマイズ出来るので参考にしてみてください。ちなみに実装後の変化は、このサイトのトップページ等で確認できます。Simplicityの記事一覧をまさしくシンプルにカスタマイズしてみたSimplicityの記事一覧のデザインをカスタマイズしてみました。不要な部分を削除して、枠線もシンプルに仕上げました。PHPファイルを一切かまうことなく、CSSのみのカスタマイズ。これでかなりオリジナリティを出すことが出来ると思いますよ。HTMLの要素ごとに分けてカスタマイズしたCSSを見ていきましょう。一覧リストのスタイルまず念のために、simplicityの記事一覧の表示形式の変更方法を紹介しておきます。これは、simplicityにもともと備わっているものです。WordPressダッシュボードの、「外観」→「カスタマイズ」→「レイアウト(全体・リスト)」の「一覧リストのスタイル」で変更できます。下記の種類から選べるので、この中で気に入ったものがあればそれを使うのが一番楽です。試してない人は一度見てみてください。画像縦横比保存(要再生成)ちなみに今回は一番上の「エントリーカード(デフォルト)」を使ってのカスタマイズ方法です。サムネイル画像を横長にカスタマイズ(任意のサイズに変更)それでは、本題に入ります。simplicityの記事一覧サムネイルの画像を任意のサイズにしてみましょう。大まかに分けると全部で3つの手順となります。順番に見ていきましょう。1、任意のサイズのサムネイル画像を生成する先ほどsimplicityには一覧リストの表示形式を変える機能があることを紹介しました。それらに対応するために、自動的にアイキャッチ画像をリサイズしてサムネイル画像を生成する仕組みがあるんです。これは画像を準備するための作業といった感じでしょうか。(functions.php)」の中にこんな感じで記述されています。true);これが、サムネイルに使う画像を生成するコードなんです。このように標準では「100×100」「150×150」「320×180」の3種類が備わっています。サムネイル画像を生成するコードが見つかったので、この記述に則って自分の好きなサイズの画像を生成してみましょう。(functions.php)」に記述しましょうね。(記述位置はどこでもいいです。)add_image_size('thumb750',750,450,true);add_image_size()の引数が4つありますね。1つ目の引数は次の手順で使うんですが、画像サイズの名前だと思っておきましょう。「thumb750」の数字部分を好きなものに変更してください。横幅と同じ数字にしておくと分かりやすいですね。※「thumb100」「thumb150」「thumb350」はすでにあるので、これ以外にしておきましょう。2つ目、3つ目が画像のサイズを表しています。「2つ目が横幅(width)」「3つ目が高さ(height)」です。好きな縦横比を設定できますが、できればアイキャッチに設定した画像の比率に合わせることをお勧めします。することで画像が切り取られません。4つ目の引数は画像の切り抜きをするかしないかですが、「true」のままでOKです。次は、先ほど準備した画像を実際にサムネイル画像として登録する作業です。これは、「entry-card.php」に記述されています。対応しているコードはこの部分です。はじめの方に記述されているので見つけやすいと思います。?></a>それでは、親テーマの「entry-card.php」を子テーマにコピーしてきて、対応箇所を変更します。上記コードの2行目後半にこんなコードがあるので探してください。?>これを、先ほどadd_image_size()の1つ目の引数で設定した名前に変更することで、記事一覧サムネイルの画像が切り替わります。最後にこの作業を忘れてはいけません。上記の2つの手順で、サムネイルに適用される画像は変更されました。CSSはそのままなので、まだ画像は正方形のままです。生成したサムネイル画像に合ったCSSを記述してあげましょう。PCサイト用(style.css)、スマホサイト用(mobile.css)それぞれに合ったスタイルを記述します。こんな感じになります。最後に以上が、記事一覧サムネイル画像をカスタマイズする手順となります。cssだけでサイズ変更出来なかった時は、正直「マジかよ・・・」と思いましたが、PHPの記述が単純なコードで助かりました。今回のカスタマイズなら、PHPの知識がなくても出来るのでぜひ試してみてください。カスタマイズTwitterFacebookはてブPocketLINE今村りょうCooNelNelスポンサーリンクスポンサーリンクスポンサーリンクスポンサーリンクプロフィール今村りょう普段は家でブログ、アフィリエイト、ネットショップをやってます。趣味は料理と家飲みです。きたうなぎを捌いて「蒲焼き」と「白焼き」を作ってみた2020.01.23民芸コンロを使ってちょっと贅沢な家飲みを!卓上七輪としても使えます2020.01.19焼き鳥との相性97%以上の日本酒「純米吟醸94(きゅうじゅうよん)」で家飲み!2020.01.13熊本馬刺しは熊本産じゃない!?「純熊本産馬刺し」は全国流通たったの1%2019.12.18ポテトサラダにクリームチーズを加えて居酒屋風ポテサラを作る!2019.11.29きびなごの刺身の漁師漬けが酒のつまみとして最高な件2019.11.21家でサーモンの藁焼きを作る!倍増した脂と燻した香りがたまらない2019.11.11プロフィール今村りょう料理が好きな家飲みブロガーです。お店ではなく、家でゆったり飲む「家飲み」の情報を発信中。普段は在宅でwebのお仕事してます!包丁に関する知識や、家で魚を捌いて食べる楽しさを発信する「包丁日記」も運営中。CooNelNel.。