【WPど初心者】超簡単ファビコン・ヘッダー画像自作方法:ワードプレス設定まで解説!

ワードプレス
スポンサーリンク

サイト(ブログ)の顔になる、ファビコンヘッダー画像を手元にあるソフトだけで簡単に自作してみました。

使用するのは、『マイクロソフトペイント(以下MSペイント)』と、フリーの画像編集ソフトの『フォトスケープ(Photoscape)』だけ。

 

ネット上のデザインサイトなどで作成すると、簡単にかっこよく作れる反面、組み合わせなのでどうしても似たり寄ったりになりますが、この方法なら、シンプルな物なら超簡単に完全オリジナルな物が作れて、かつ、絵心がある人ならかなり凝った物も作れるので、プロフ画像なんかも自作可能です!(私は絵心皆無なんで無理ですが…)

 

ということで今回は、

(私のような)ウエブスキル皆無ワードプレス初心者でも超簡単♪『MSペイント』と、フリーの画像編集ソフトの『フォトスケープ』を使用した、ファビコン・ヘッダー画像の自作から、ワードプレス導入方法まであわせて解説します。

 

『MSペイント』はウィンドウズ標準装備ですが、『フォトスケープ(リンク)』はフリーソフトなのですが、画像加工などにもすごく便利なんで、使ったことない人は、この機会にリンク先から導入されてみて下さい。ワードプレスのテンプレはCocoonになりますが、違うテンプレでもあまり差異はないと思うので参考になればと思います。
スポンサーリンク

ファビコン作成

『ファビコン、及び、ヘッダー画像』はどちらから作成してもいいですが、今回は作成したファビコンヘッダー画像にも利用したいので、まず先に、ファビコンから作っていこうと思います。

 

MSペイントで枠を作成

まずはWPでファビコンの適正サイズを確認します。

ワードプレス(Cocoon)の設定画面で、ファビコンに使えるサイズを確認すると512×512PNG画像推奨になってるみたいです。(ファビコンは小さいのでJPGより綺麗なPNGを推奨してるのでしょうか?JPGでも使用することは出来ます

 

サイズを確認したら、MSペイントを使って、下地になる画像を作成します。

 

 

サイズ変更から、『ピクセル』を選択して、水平・垂直を512に指定します。

 

 

真っ白なキャンパスの出来上がり♪

 

このまま絵をかいたり、文字を入れたりできますが、一旦この無地の状態で保存しておけば、後々何度でもファビコンを作り直せるので、このまま一旦「ファビ無地」とでも名前を付けて、保存しておくと便利です。

 

絵も描ける

このまま絵を描いて仕上げる事も可能。(絵心皆無)

 

フォトスケープで仕上げ

下地を作ったら、そのままMSペイントで仕上げてもいいのですが、細かい修正などがやりやすいので、仕上げはフォトスケープで行います。

 

『画像編集』を選ぶ。

 

開いたら、先ほど作成したファビコンの下地を保存先から選ぶか、

保存したファイルから直接、画面中央にドラッグ&ドロップで表示させます。

 

 

左下のタブからオブジェクトを選びます。

今回は、私の絵心が皆無なので、テキストのみで作成したいと思います。

 

 

あとで何度でも修正できるので、大まかにフォントサイズ、文字の色を選び、文章を入れてしまっていいです。

 

テキストだけでも、二重に重ねたりすると立体感出したりできます!多少は個人製作のチープさも緩和されてる(?)

 

ファビコンは小さくしか表示されず、あまり細かい所は見えないのでシンプルなほうがいい!

 

出来たら、右下の『保存』から保存します。

 

 

一番上の保存をしてしまうと、上書き保存になってしまうので、『名前をつけて保存』を選びます。

その際、今回はあまり関係ないですが、今後もExif情報を保持したくなければ、この時についでに『Exif保持』のチェックを外しておくといいです。

 

今回は、作成したファビコンヘッダー画像にも使用したいので、続けてヘッダー画像作成の解説に行きます。

ヘッダー画像作成

作成までの手順は、先ほどのファビコン作成時とほぼ一緒で、MSペイントで下地を作って、フォトスケープで仕上げになります。

 

使用するCocoonのヘッダーレイアウトセンターロゴ(デフォルト)を使用。ヘッダー画像はjpg・jpeg・pngが推奨になってます。

 

私の設定では、” 横1600 x 縦260 ” がちょうどいい感じ。(現在、”1600 x 400”に変更しました)

 

縦幅のサイズは個人次第ですが、私のような鬼ど素人には、トップページと個別ページのヘッダー画像のサイズ変更方法が難しく、ヘッダー画像の縦サイズをあまり大きくすると、個別ページにもデカデカと表示されてしまい、記事が圧迫されるのが嫌だったので、色々試した結果、縦は260に落ち着きました。

 

一旦このサイズで作成して、合わなければ引き延ばしたり縮めたりも出来るので、大体この位のサイズでいいんじゃないかと、適当な事言っておきます・・・

 

 

先ほどと同様MSペイントで下地を作るのですが、今回は縦と横の幅が違うので、『縦横比を維持する』のチェックを外して、1600x260を指定します。

作製したら、ファビコンの時と同様、『ヘッダー下地』などと名前をつけて、一旦保存します。

 

次は、フォトスケープを使って、仕上げます。

先ほどと同様、フォトスケープを起動したら、下地の画像を開いて、テキスト文章入れます。

これだけではサッパリし過ぎなので、先ほど作成したファビコンも取り込んでみます。

 

 

左下の『オブジェクトタブ』から『写真』『Photo』を選択します。

 

 

 

 

先ほど作成したファビコンを選択して開きます。

 

 

開くと、ど真ん中に表示されますが、この後移動できるので、別段いじる所が無ければ、そのまま『OK』を選びます。

 

 

 

好きな場所に移動させて、完成したら保存で終了!

ワードプレスに導入

作成したファビコンとヘッダー画像をワードプレスに導入(設定)していきます。

使用テンプレ「Cocoon」での解説になるので、環境によって多少違うかと思いますが脳内補完でお願いします。。

 

ファビコンを設定

まずは、ファビコンの設定から。

 

  1. 「外観」
  2. 「カスタマイズ」
  3. 「サイト基本情報」
  4. 「画像を変更」

を選びます。

↑には以前使用していたファビコンが見えてますが、初めての場合何も表示されてないと思います。

 

 

作製したファビコンをドラッグ&ドロップして、選択します。

 

 

ファビコンが変わってるのがわかると思います。

後は公開するだけ。

 

ヘッダー画像を設定

続いて、ヘッダー画像の設定を解説します。

「Cocoon設定」を選択し「ヘッダー」タブを選びます。

 

やや下にスクロールしたら、「ヘッダーロゴ」という項目があるので、「選択」を選び、作成したヘッダー画像ドラッグ&ドロップ設定します。

 

「変更をまとめて保存」で完了。

 

反映されているか確認

保存出来たら、変更が反映されてるか、自分のサイトを開いてチェックします。

 

 

キャッシュが残っていると、変更が反映されてないように見えるかもしれません。その場合は、クロームの場合だと「Ctrl+F5」などでブラウザのキャッシュクリア・リロードして、試してみて下さい。

まとめ

この方法だとデザインセンスがかな~り必要ですが、、「MSペイント」はWindows標準装備で「フォトスケープ」もフリーソフトなので、タダで完全オリジナルなものが作成できるので、組み合わせが気に入らない人や、ブログ始めたばかりの”とりあえず一旦”にはいいんじゃないか?と思います!!

 

追記:

上記は初期の時に作成したものになり、色々ダサ・・・シンプルですが、

現在(’22)使用してるコレ↓上記と同じソフトを使用して(横1600x縦400)で作成してます。

 

現在コロナ禍でブログアフィリに興味を持つ人も増えてるようなので、ヘッダー画像作成などの参考になればと思います。

220201_微編集&追記 220209_画像サイズ縮小編集

タイトルとURLをコピーしました