「Simplicity2」記事一覧サムネイル画像をカスタマイズしてみた

ウチの嫁は今頃花粉症で鼻水がダァ~状態です。そんな嫁にティッシュを配給している”ももうら”(@28momoura)です。

今頃はイネ科の植物が原因のようですよww

テーマSimplicity2」です

スポンサーリンク

記事一覧サムネイル画像サイズ変更

デフォルトでは正方形ですが、これを長方形にカスタマイズします。

ももうら
下準備です。

  1. 完全レスポンシブデザインにする→「OFF」
  2. 一覧(インデックス)ページの表示スタイル設定 → 「エントリーカード(デフォルト)」
コピベする場合
  1. バックアップは必ず取っておいてください。
  2. 自己責任でお願いします。
  3. 子テーマでの編集をお勧めします。

entry-card.php

親テーマから子テーマへコピーします。
「entry-card.php」の中を開いて「thumb150」→「thumb250」など分かりやすいように変更
※「Ctrl」+「F」で「thumb150」と「entry-card.php」内を検索するとすぐ変更箇所が分かります。

functions.php

下記コードを「functions.php」に追加してください。
注意「functions.php」は閉じ忘れなどあるとサイトが真っ白になってしまいますので気を付けて下さい。

サムネイルサイズはお好みで変更してください。

サムネイル名称を「thumb300」などと変更した場合は「add_image_size(‘thumb300’,336,224,true);」となります

css

「style.css」でデザインを整えます。下記をコピベするとまんまこのサイトと同じになりますので適時お好みでサイズ等変更してください。

あらら?

この時点では、確認するとサムネイルが歪んでいるように見えると思います。そこでプラグインで修正します。

Regenerate Thumbnails

インストール>有効にして下さい。

xm-69
「すべてのサムネイルを再生成する」をクリックします。

xm-68

サイト毎に変換時間は違いますので、しばらく待ちます。
このサイトはボリュームもあまりなく画像数も少なかったのですが、それでも約4分位変換にかかりました。

画像が特に多い場合は、コーヒーでも飲んで気長に待ってね。
参考 Simplicityテーマをインストールして画像のアスペクト比が狂うときにやって欲しいこと

出来上がり

デフォルトxm-72
カスタマイズ後xm-71

デフォルトのサムネイル画像を用意してなかった(戻すのがめんどくさい(汗;)ので寝ログさんの画像を拝借しましたm(・ο・)m

参考にさせて頂いたサイト

参考【simplicity】記事一覧をカスタマイズ。サムネイル画像を「大きく横長」に変更

現在は、有料テーマ「ハミングバード」に変更されているようですが「simplicity」カスタマイズの記事も分かりやすく書かれています。今回のカスタマイズは、サムネイルサイズこそ変更しましたが、ほぼコピベで完結します。

ももうら
ありがとうございました。

初めての方で躓くとしたら、「entry-card.php」を親テーマから子テーマへコピーする所ぐらいでしょうか。

FTPツールなどを使うと簡単だよww

まとめ

画像を多用したり大きくするとサイトが重くなったりする事があるのでその点はご注意を(^^;

テーマ「ハミングバード」って最近使っている方が多いようでよく見かけますね。

ももうら
僕もPVが今の10倍にでもなったら使ってみたい。
寝言は寝てから言いなさいww

花粉をブロックだww

この記事が気に入ったら
いいね!しよう

Twitter で
スポンサーリンク