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

simplicityサムネイル変更
スポンサーリンク

こんにちは。ブログの見やすさ改善中の浜屋はまやん(@hamayan8080)です。

「simplicity」便利ですね。初心者でも無料ブログのように簡単にワードプレスが使えるテーマです。機能もかなり充実しています。

今回、simplicityの記事一覧をカスタマイズに挑戦しました。

もともと正方形だったサムネイル画像を「大きく横長」に変更です。

当記事のカスタマイズ方法
  • 子テーマのみのカスタマイズで完了できる
  • サムネイル画像のサイズは自分の好きなサイズに変更できる
  • スマホ表示も見やすくできる

わたしにはphpの知識はありません。こんな初心者でもカスタマイズできる方法です。

カスタマイズ後のサムネイル画像

PC表示のサムネイル画像

カスタマイズ前

サムネイルサイズ変更 (9)

カスタマイズ後

サムネイルサイズ変更 (8)

サムネイルが横長になります。アイキャッチを横長にしても画像の左右が切れることがありません。

スマホ表示のサムネイル画像

カスタマイズ前

サムネイルサイズ変更 (2)

カスタマイズ後

サムネイルサイズ変更 (1)

一目瞭然で変更前より変更後の方が見やすくなりますよ。サムネイル画像⇒タイトル⇒記事を読むと目線の移動が縦だけになるのでスッと入ってくるようになります。

変更ポイント

当記事では(300px × 200px)のサムネイルサイズに変更しています。

サムネイルサイズ変更 (7)
サムネイルサイズ変更 (1)

300とか200とかの数字をいじるとあなたの好きなサムネイルサイズに変更できます。

サムネイル画像の変更手順

準備と設定

①子テーマを有効化

子テーマをダウンロードして有効化します。

子テーマはsimplicityの公式サイトにてダウンロードできます。インストールの方法も公式サイトに書かれているので参考にしてください。

②設定

当記事で紹介するカスタマイズ方法は記事一覧の「エントリーカード」のレイアウトを変更しています。そのために下記のような設定にして下さい。

サムネイルサイズ変更 (5)

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

  • 完全レスポンシブデザインにする ⇒ チェックなし
  • 一覧(インデックス)ページの表示スタイル設定 ⇒ 「エントリーカード(デフォルト)」

準備は完了です。

 

ここからサムネイルサイズを変更していきます。simplicityの公式サイトを参考にしております。

サムネイルのサイズ指定

サムネイルのサイズ指定を指定します。外観 → テーマの編集にて子テーマ(Simplicity child)のテーマのための関数 (functions.php)に移動します。

テーマのための関数 (functions.php)に、下記をコピペ。

add_image_size('thumb250',300,200,true);
↓こんな感じにコピペ↓

サムネイルサイズ変更 (6)

【意味】
thumb250:サムネイルの名前
300,200,:サムネイルのサイズを幅300px、高さ200pxにする

サムネイルカード変更

次に、Simplicity(親テーマ)からentry-card.phpをコピーしてきて、子テーマフォルダ内にペーストします。(FTP内で行います)

外観 → テーマの編集のentry-card.php内にある「thumb150」を「thumb250」に変更します。

thumb150 → thumb250 に変更(1か所)

↓こんな感じに変更↓

サムネイルサイズ変更 (2)

スタイルシートの設定

Simplicity child: スタイルシート (style.css)を開きます。下記のふたつをコピペします。

/* サムネイルサイズ指定 */
.entry-thumb img {
    width: 300px;
    height: 200px;
    margin-bottom: 40px;
}

/* 記事タイトルなどの位置 */
.entry-card-content {
    margin-left: 320px !important;
}
↓こんな感じにコピペ↓

サムネイルサイズ変更 (3)

スマホ表示の設定

次にスマホ表示の設定です。こちらも先ほど同様外観 → テーマの編集のSimplicity childのスタイルシート (style.css)にコピペします。

/* スマホの設定 */
@media screen and (max-width: 480px) {

/* サムネイル回り込み */
.entry-thumb {
  float: none !important;
  margin: 6px 4px 3px 0px !important;	
}

/* サムネイルサイズ変更 */
.entry-thumb img{
    width: 300px !important;
    height: 200px !important;
}

/* 記事タイトルなどの位置 */
.entry-card-content {
    margin-left: 0px !important;
}

.entry-snippet {
  font-size: 100% !important;
}

.entry-read a {
  font-size: 100% !important;
}
}
サムネイルサイズ変更 (4)

 

ココまででカスタマイズ完了です。

サムネイルがつぶれてみえるけど?

レイアウトを変更したあとの記事一覧を見てみると、サムネイルが潰れたような画像になってしまっています。

サムネイルを再出力すると縦横比が変わらないサムネイル画像になるそうです。simplicity公式サイトに方法が記載されております。

プラグインを使った方法なんですが、すべての画像を再出力することになり、時間がかかるのでわたしはそのまま放置しております。

はまやんのまとめ

メリット
  • 見やすくなった
  • 大きなサムネイルを使っているサイトはあまりないので差別化できる(といいなぁ)
デメリット
  • 新着記事や関連記事はサムネイルが正方形なので、全部長方形に直したくなってきた

最近はsimplicityのテーマを使う方が増えてきたのでちょっとでも差別化できたらいいなぁと思っております。

スポンサーリンク
simplicityサムネイル変更

1 個のコメント

  • […] 【simplicity】記事一覧をカスタマイズ。サムネイル画像を「大きく横長」に…ワードプレスの無料テーマ「simplicity」をカスタマイズ。初心者でもできるサムネイル画像の変更方法tankyu-note.com 現在は、有料テーマ「ハミングバード」に変更されているようですが「simplicity」カスタマイズの記事も分かりやすく書かれています。今回のカスタマイズは、サムネイルサイズこそ変更しましたが、ほぼコピベで完結します。 […]