13．ウェブサイトのトップページ用の画像を用意する(タイトルロゴ)

今回はトップページで使う画像を用意します。

といっても、ヘッダーに設置するタイトルロゴ用の画像と、トップページの画像の2枚だけです。

この部分ですね。

今回はタイトルロゴを用意します。

画像編集ソフトを用意する(「Paint.NET」)

ロゴ作成、投稿記事に使用するサムネイル画像(「22.ウェブサイトのアイキャッチ(サムネイル)画像を作成する」)を作成するツールとして、「Paint.NET」を使用します。

このツールを選んだ理由としては、
・無料
・レイヤー機能あり
・作成する画像サイズ調整が簡単
・作成できる画像の種類が豊富
などなど。

このサイトでは簡単な画像作成・編集くらいしか行いませんが、使いこなせば、かなり複雑な画像も作成できます。

では、「Paint.NET」をインストールします。
まずはサイトからダウンロードを行います。※「Paint.NET　ダウンロード」で検索すると、いくつかダウンロードサイトが出ます。

ダウンロードが完了したら、ファイルを開きます。

インストールファイルを起動(ダブルクリック)します。

[エクスプレス]を選択して【完了】をクリックします。

規約に同意して【次へ】をクリック。

【完了】をクリックすればOKです。

ソフトを起動したところです。
このツールを使って画像を編集していきます。過去の記事の画像も、スクリーンショットをこのツールに読み込んで矢印や文字を入れています。

ロゴを作成する

実際にロゴを作成します。

まず【ファイル】→【新規】をクリックします。

幅を400、高さを100に設定して【OK】をクリック。

サイズが設定されました。

画像全体を塗りつぶしますので、【ペイント缶】アイコンをクリック。次に右側にあるパレットの【赤色】をクリックします。

画像が赤く塗りつぶされました。ここでレイヤーツールの【新しいレイヤーの追加】アイコンをクリックしてレイヤーを追加します。※レイヤーを追加しなくても進められますが、レイヤーを追加した方が後からの編集が楽になりますし、画像にも様々な効果が付与できます。

レイヤーが追加されたら、いろいろと編集していきます。

文字ツールと、図形ツールを使って以下のアイコンを作成しました。

あとはこれを保存するだけです。【ファイル】→【名前を付けて保存】と進みます。

保存したフォルダを開き、[ファイル名]を入れて【保存】をクリックします。

保存は完了しましたが、拡張子が「.pdn」となっており、このままではWordPressに画像をアップロードできません。※「.pdn」はPaint.NETでレイヤー等の編集情報を保持したまま画像を開くための拡張子です。あとから画像を編集する際に使用します。

そこで、Paint.NETファイルを画像ファイル(拡張子が.png)に変換します。

【名前を付けて保存】までは先ほどと同じです。

[ファイルの種類]を「PNG(.png)」にして【保存】をクリックします。

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

【平面化】をクリックすれば保存ができます。

トップページ用のロゴができました。

今回はここまでです。

次回はトップページのメイン画像を作成します。