士業事務所のweb担当が学んだこと

税理士事務所に勤めるウェブ担当者が日々の業務で学んだノウハウを公開するブログです。士業事務所の集客に使えるマーケティングやウェブ制作のノウハウを実際に中で働いているからこそ分かる視点を交えてお伝えします。

Stinger5の一覧サムネイルサイズを変更しても、高さがバラバラな時の対処法

f:id:h_kagawa:20151005154018j:plain

10月に入ってから2日間WordPressサイトをいじっていました。9月のアクセス解析結果をまとめて、10月にたてた目標に向けて早速って感じです。まだカスタマイズ中ですが、ちょっとハマったことがあったので、メモっておきます。

Stinger5で記事一覧のサムネイルサイズを変更方法

WordPressはテーマを選ぶのも楽しみのひとつ。

 

WordPressでサイト的なものを作る時は賢威かBizVektorを使うことが多いのですが、先日はてなブログ→ライブドアブログ→WordPressと引っ越しを繰り返したブログは今流行のStinger5を使ってみました。

 

ライブドアブログから移転して回遊率が下がってしまったので、改善するためのカスタマイズを施しています。

 

Stingerはデフォルトでトップページは記事一覧になるようになっています。これは回遊率を上げるために正しいと思いますし、回遊させるために1画面に30~50くらい記事を表示するケースは多いと思います。

 

なんですが、デフォルトだと行の高さが大きくてスマホの時にスクロールがめんどうなんじゃないかと思います。ライブドアブログの時代はもっとコンパクトだったので。

 

サムネイルサイズの変更方法はいくつか解説してくれているサイトが簡単に見つかりました。

junichi-manga.com

 

ご指導のとおりの作業でサイズ自体の変更は楽勝です。

 

やることは、

  1. functions.phpに新しい画像サイズを生成する関数を追加
  2. itiran.phpで上記の関数を呼び出し
  3. CSSでサイズの調整

作業自体は簡単。

 

既に記事がある場合は、もう一手間必要!プラグインで再生成する

 

ですが、これだけでは問題あり!

 

投稿済記事のサムネイルサイズがバラバラなのです。元画像の比率に応じて高さがバラバラ。

 

原因を突き止めるのに時間を食ってしまいましたが、functions.phpで指定したサイズの画像が生成されてないのが原因みたいです。

 

参考:Stinger5でサムネイル画像がリサイズされない時の対処法。 | たかなblog

 

アップロード時に指定したサイズの画像を作れよという意味だったんですね。

 

書いてるコードの意味を理解せずにコピペだけしてると、こういう時に原因がすぐに分からずダメですね。。。

 

カスタマイズ後にアップロードした画像なら意図通りのサイズでひょうじされますが、サムネイルのサイズがバラバラなのは格好が悪い。

 

しかもこれだと、元画像を引っ張ってきていることになり表示速度にも影響がありそうです。

 

ということで、対処法はサムネイルの再生成。プラグインを使うことで対応可能です。

 

wordpress.org

 

またサムネイルサイズの変更は行うこともありそうなので、メモとして残しておきます。