アイキャッチ画像(サムネ)を作成する。

  • 勉強ノート

記事を投稿する際に各カテゴリーごとののアイキャッチ画像を作ろうと思います。ベースとなる画像のサイズ、文字の大きさを決めていきます。

画像の大きさは1024×612

マージンを100px取って白アミを70%の透明度で配置する。100pxだと余白が大きすぎる気がしますがPCとスマホで確認したところ、トリミングの比率が微妙に異なるので大きめに取っておきました。

サブタイトルはHelvetica regularで大きさは50px、メインタイトルは凸版文久見出しゴシックエクストラボールドで大きさは90pxです。文字数に応じて変化するかと思いますが、基本はこのサイズで作成します。


HTML&CSS用のアイキャッチ画像
javascript用のアイキャッチ画像
WordPress用のアイキャッチ画像

こんな感じで次回から投稿する内容に応じて使い分けていきたいと思います。これ以外のカテゴリーについては投稿する際に追加で作成したいと思います。今の所はこの3つがメインの投稿になると思います。