AFFINGER5でサムネイルが見切れてしまう問題を解決！

どうもこんにちは。[マサポコ]です。

私はブログを更新した際、Twitterに告知させてもらうのですが、Twitterでの見栄えを考えてアイキャッチ画像を横長にしたところ、ブログのサムネイル画像の見栄えが悪くなる問題が発生しました。

Affinger5のサムネイルが標準で正方形に設定されているためなのですが、どうにかならないかと色々試して解決しましたので、共有します。

同じような問題を抱えている方の解決に繋がれば幸いです。

 

Affinger 5のサムネイル画像の仕様

ブログの更新をした際はTwitterで告知させてもらっていまして、その際の様子はこんな感じです。

綺麗に表示されていて満足していたのですが、問題はブログの方です。

Affinger 5のサムネイルは、正方形が標準設定となっています。

具体的に見て頂くと以下のような感じです。

 

画像の左右が切れてしまっていることで、サムネイルに書いてある文字が読めなくなってしまっています。

これを解決するには、サムネイル画像の設定を変えなければなりません。具体的な手順としては、以下の通りです。

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#ccc” bgcolor=”#ffffff” borderwidth=”2″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

[/st-mybox]

以上の通りとなります。

一つずつ順番にやっていきましょう。

 

Affinger 5でサムネイル画像が見きれる問題解決法

1．WordPressの設定でサムネイル画像のサイズを変更する

ダッシュボードから、「設定」→「メディア」を開いて下さい。

 

メディア設定画面では、サムネイルのサイズの項目を「幅300　高さ150」にして下さい。（ここはご自分の希望するサイズで良いです。私はTwitterカードで1200×600の画像を使っていたので、その比率で設定しました。）

 

2．AFFINGER5管理でサムネイル表示設定を変更する

左サイドメニューから、「AFFINGER5管理」→「AFFINGER5管理」を開いて下さい。

 

AFFINGER5管理では、「デザイン」を開きましょう。

 

「サムネイル画像設定」項目では、一番上の設定項目を「メディア設定にする」にしましょう。

 

これで保存します。

ただ、これだけだとサムネイル表示が結構小さいです。

 

オススメは「サムネイル画像を大きくする」の設定にもチェックを入れておくことです。保存した後に、「スマホでもサムネイル画像を大きくする」にチェックを入れておくのもオススメです。

 

3．プラグインでサムネイル画像の再生成を行う

プラグインの新規追加画面で「Regenerate Thumbnails」と検索して下さい。

こちらをインストールしましょう。

 

有効化したら、メディアライブラリに移ります。

 

ライブラリ内のサムネイルに使っていた画像を開くと以下のような画面になりますので、「サムネイル再生成」ボタンを押して下さい。

 

 

以上で終了です。

 

綺麗に表示されるようになりました！