22．ウェブサイトのアイキャッチ(サムネイル)画像を作成する

なぜ、アイキャッチ(サムネイル)を設置するのか

アイキャッチ(サムネイル)がなくても記事を投稿することはできますが、カテゴリーごとにアイキャッチを設定することで、一目でその記事がどのカテゴリーに属するかがわかります。

デザイン的にも、ユーザビリティの向上につながりますので、このサイトでもアイキャッチを設置したいと思います。

サイト制作記録の各カテゴリーのアイキャッチは、同一画像に異なる色のグラデーションをかけるというシンプルなものにします。

アイキャッチ画像を作成する

画像を用意したら、「paint.net」で画像を編集します。
【ファイル】→【開く】から画像を開きます。

画像が開いたら、右下のアイコンをクリックしてレイヤーを追加します。

次に、画面左のツールから【ペイント缶】を選択し、右のパレットから色を選択します。
そして画像のどこでもいいので左クリックをして、レイヤー2を塗りつぶします。

レイヤー2の透明度を上げます。
パレットの【拡張＞＞】をクリックします。

パレットの詳細設定が開きます。
しかし一度決定した作業(塗りつぶし)は変更できませんので、左下の[履歴]から「ペイント缶」を選択して(塗りつぶし作業中に戻る)から、透明度を変更します。

完成したら保存します。
【ファイル】→【名前を付けて保存】と進みます。

保存場所とファイルの種類(PNG)を選択します。

名前を入力したら「保存」します。

[構成の保存]画面では特に設置を変更せず【OK】をクリックします。

[保存]画面で【平面化】をクリックすれば完了です。

アイキャッチ画像ができましたので、次回はいよいよ記事と投稿します！