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

アイキャッチ見切れる問題の解決

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

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

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

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

 

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

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

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″]

  1. WordPressの設定でサムネイル画像のサイズを変更する。
  2. Affinger 5の設定で、サムネイル画像の表示設定を変更する。
  3. プラグインでサムネイル画像を生成し直す

[/st-mybox]

以上の通りとなります。

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

 

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

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

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

ダッシュボード画面

 

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

メディア設定画面

 

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

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

AFFINGER管理

 

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

 

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

AFFINGER管理のデザイン項目

 

これで保存します。

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

 

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

AFFINGER管理

 

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

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

Regenerate Thumbnailsのプラグイン画像

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

 

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

サイドメニューからメディアライブラリへ

 

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

 

サムネイル画像の再生成

 

以上で終了です。

横長になったサムネイル画像

 

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

 

 

 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です