AFFINGERの初期設定のコーナー。今回はサムネイル画像の設定について解説します。
サムネイル画像がぼやけたり、見切れたりしていませんか？
AFFINGERではサムネイル画像の表現パターンが数種類 用意されています！参考サムネイルのデザイン一覧。選択肢が多すぎですね。多くの人が適当にサムネイル設定を行なっているのではないでしょうか。そうすると画像がぼやけたり、見切れたりする問題が出てきます。
きれいに表示するにはどうすればいいのか！それをこれから解説します。ぜひ見ていってください。丸ごと真似OK！初心者のためのおすすめ設定も紹介していますよ！
サムネイルとは
サムネイル画像とは"記事一覧"に表示される小さい画像のことです。各記事で設定したアイキャッチ画像が小さくリサイズされて表示されます。
はじめに
アイキャッチの画像サイズは統一しよう
まず、サムネイルの元になる"アイキャッチ画像"について一つだけ注意点があります。
アイキャッチの画像サイズは毎回統一させましょう！これを揃えなかったらサムネイルもガタガタ。不揃いになってしまいます。AFFINGERで推奨されているアイキャッチの画像サイズは"横1200px × 縦630px"です。毎回このサイズに揃えて投稿することをお勧めします。
フリー画像をそのままアップロードしたくなるのもわかりますが、Canvaなどの画像編集サービスを使って毎回サイズを調節しましょう。
＼ 詳しくはこちら ／
WINGマニュアル：アイキャッチの最適サイズについて ※購入者限定ページ
サムネイルを設定する場所
AFFINGERでサムネイルの設定をする場所はこちらです。ここに移動しましょう。
おすすめのサムネイル設定
解説を読むのが面倒！とりあえず先を急ぎたい！という人にはこの設定をおすすめします。まるごと真似してください。
パターン１中サイズのサムネイル
パターン１はこちら、中サイズのサムネイルです。設定項目はこちら→【"フルサイズにする"、"サムネイル画像を大きくする"、"サムネイルの形状・サイズ・角丸設定からブログカードを除外"】
パターン２大サイズのサムネイル
パターン２はパターン１を大きくしたものです。設定項目はこちら→【"フルサイズにする"、"サムネイル画像を大きくする"、"サムネイル画像をさらに大きく"、"サムネイルの形状・サイズ・角丸設定からブログカードを除外"】
遅延モードをオンに
これらの設定はデータが大きくなるので画像の遅延読み込み機能をオンにすることをお勧めします。設定はこちらから↓。
詳しい解説サムネイルを設定しよう
それではここから詳しい解説に入ります。
大きさから選ぼう
サムネイルのサイズは小、中、大の三段階あります。まずは大きさを決めましょう。それぞれの大きさに適したサムネイル形状があるので大きさを決めればおのずと形状が決まります。
- 小サイズに適した形状は正方形か円
- 中サイズに適した形状は長方形
- 大サイズに適した形状も長方形
※小は何も設定していない状態、中は"サムネイル画像を大きくする"にチェックを入れた状態、大は"サムネイルをさらに大きく"にチェックを入れた状態のことです。
各項目の説明
- "サムネイル画像を角丸に変更する"(角丸)：画像の角を丸くします。
- "サムネイル画像を右側に変更する"(右側)：サムネイルとタイトルの位置を逆にします。
- "サムネイル画像をポラロイド風にする"(ポラロイド)：サムネイルにポラロイド写真風の枠を付けます。
- "セロテープを付ける"：ポラロイドの上にテープ風の装飾を付けます。
- "サムネイル画像を大きくする"：サムネイルの大きさを横幅100pxから150pxか200pxにします(形状によって変わる)。
- "スマホ(599px以下)でもサムネイル画像を大きくする"：スマホでもサムネイルの大きさを大きくします。
- "サムネイル画像をさらに大きく"：サムネイルの大きさを横幅200pxからさらに300pxにします。
- "サムネイルの形状・サイズ・角丸設定からブログカードを除外"：ブログカードにデザインを反映させません(通常はチェックを入れる)
- "サムネイル画像を表示しない"：記事一覧のサムネイル画像を消します。
ここから各設定について詳しく見ていきます。
サムネイル画像を表示しない
最初からあれなんですが、サムネイルを表示させないという選択肢もあります。タイトル(&ちょっとした説明)だけでいいという人はこちらで。
設定は"サムネイル画像を表示しない"にチェックを入れて"Save"する！これだけです。
【小サイズ向き】サムネイルを正方形にする
【使用したアイキャッチ１、使用したアイキャッチ２、使用したアイキャッチ３、使用したアイキャッチ４】
正方形のサムネイルです。"横100px × 縦 100px"の正方形で表示されます("大きくする"時：横150px × 縦150px)。こちらは小さいサムネイル向けですね。
アイキャッチ作成時のポイント：端は切り取られて見えなくなるので文字を入れる場合は見切れないように注意しましょう。横630px、縦630pxの補助線を作るとわかりやすいです。
各設定との相性
正方形のサムネイルと掛け合わせていい設定と悪い設定は以下の通りです。大きさは変えないのがおすすめです。
- 未設定：推奨
- 角丸：OK
- 右側：OK
- ポラロイド風(セロテープ)：OK
- 大きくする：非推奨(ぼやけが目立つため)
- さらに大きくする ：NG(ぼやけが目立ちすぎるため)
仕組み
正方形の仕組みこうです。アイキャッチの中心を正方形で切り取り、横150px、縦150pxの画像を生成します。この画像を横100px、縦100pxの枠にはめ込み記事一覧に表示します。横100px、縦100pxのときはいいんですが、"大きくする"時：横150px × 縦150px、"もっと大きくする"時：横300px、縦300pxになってくるだんだん画像がぼやけてきます。きれいに表示させるにはそのままの大きさで表示するのがいいでしょう。
【小サイズ向き】：サムネイルを丸くする
【使用したアイキャッチ１、使用したアイキャッチ２、使用したアイキャッチ３、使用したアイキャッチ４】
丸いサムネイルです。サイズが"横100px × 縦 100px"(半径50px)の円で表示されます。かわいい感じのサイトにもってこいですね。こちらも小さいサムネイル向けです。
アイキャッチ作成時のポイント：上下いっぱいに円を作ってくり抜きます。正方形よりさらに表示される部分が減るので文字を入れる場合は見切れないように注意しましょう。
各設定との相性
丸いサムネイルと掛け合わせていい設定と悪い設定は以下の通りです。正方形と同じく大きさは変えないのがおすすめです。
- そのまま：推奨
- 角丸：NG(角を丸くしてももともと丸なので意味がない)
- 右側：OK
- ポラロイド風(セロテープ)：OK
- 大きくする：非推奨(ぼやけが目立つため)
- さらに大きくする ：NG(ぼやけが目立ちすぎるため)
仕組み
原理はこうです。アイキャッチの中心を正方形で切り取り、横150px、縦150pxの画像を生成します。この画像を横100px、縦100pxの枠にはめ込み記事一覧に表示します。さらにCSSで角を丸くして円に見せています。正方形同様、横100px、縦100pxのときはいいんですが、"大きくする"時：横150px × 縦150px、"もっと大きくする"時：横300px、縦300pxになってくるだんだん画像がぼやけてきます。きれいに表示させるにはそのままの大きさで表示するのがいいでしょう。
【中サイズ、大サイズ向き】サムネイルをフルサイズにする
中サイズの例
大サイズの例
【使用したアイキャッチ１、使用したアイキャッチ２、使用したアイキャッチ３、使用したアイキャッチ４】
こちらは中サイズ〜大サイズ向けの設定です。手軽に大きいサムネイルを表示したい場合はこちら。
フルサイズのサムネイルです。アイキャッチをそのまま縮小して表示します。おすすめで紹介したように初心者向けの設定です。
この手法は手軽という反面、データが大きくなり読み込みに時間がかかるというデメリットもあります。"遅延読込"をオンにして対策するのをお勧めします。
各設定との相性
フルサイズと掛け合わせていい設定と悪い設定は以下の通りです。そのままの大きさだと小さすぎるので大きくするのをお勧めします。
- そのまま：非推奨(データがもったいない)
- 角丸：OK
- 右側：OK
- ポラロイド風(セロテープ)：OK
- 大きくする：推奨
- さらに大きくする：推奨
仕組み
"フルサイズ"の仕組みはこうです。他の手法は一度、小さい画像を生成する過程を挟みますが、この手法は間にサムネイルを生成する過程を挟みません。アイキャッチ画像を丸ごと原寸大のサイズのまま読み込みます。大きい画像をそのまま小さい枠に押し込むかたちになり、多少強引ではあります。しかし、設定は簡単。初心者向きの設定といえます。
【中サイズ〜大サイズ向き】：サムネイルをメディア設定にする(上級者向け)
中サイズの例
大サイズの例
【使用したアイキャッチ１、使用したアイキャッチ２、使用したアイキャッチ３、使用したアイキャッチ４】
上級者向け。サムネイルを鮮明に表示して、しかも最適な容量に抑えたい人はこちら。
正方形や円のサムネイルは画像がぼやけやすい、フルサイズのサムネイルは容量が大きくなりがちという問題がありました。そこで思うのが、画像を鮮明に表示して、なおかつ最適な容量の画像を使いたい。そんなわがままを解決してくれるのがこの"メディア設定"です。ただし、設定がちょっと難しいです。
- "メディア設定"のメリット：鮮明な画像、最適な容量の画像
- "メディア設定"のデメリット：設定に頭を使う、あとから設定を変えづらい、サーバーに画像が溜まる
メディア設定を使ったサムネイルの設定方法
設定方法はこちらです。
サムネイルのサイズを指定する
まずは、サムネイルの大きさを指定します。次の場所へ移動してください。
こちらにサイズを入力します。サイズは表示したい大きさによって異なります。
- 中サイズ("大きくする"場合)のサムネイルを使う場合：幅400px、高さ210px
- 大サイズ("さらに大きくする"場合)のサムネイルを使う場合：横600px、高さ315px
入力したら"変更を保存"ボタンを押しましょう。
サムネイル設定
サムネイル画像設定画面へ行きます。以下のように設定を行います。
大サイズを選ぶ場合は"サムネイル画像をさらに大きく"を追加でチェックしてください。
設定は以上です。
各設定との相性
"メディア設定"と掛け合わせていい設定と悪い設定は以下の通りです。そのままの大きさだと小さすぎるので大きくするのをお勧めします。
- そのまま：非推奨(小さい)
- 角丸：OK
- 右側：OK
- ポラロイド風(セロテープ)：OK
- 大きくする：推奨
- さらに大きくする：推奨
仕組み
"メディア設定"の仕組みはこうです。アイキャッチ画像を元に新しくサムネイル用の小さい画像を生成。ここまでは正方形や円のときと同じです。違うのは、サイズを自由に決めることができること。表示する枠に合わせてサムネイルのサイズを指定すれば解像度も、容量もぴったりな画像を作れます。
以上！AFFINGERのサムネイル解説でした！