【AFFINGER6】ヘッダーロゴ画像を無料ツールで作って設定する方法を解説

今回は、このような悩みに答えます。

この記事では無料で使えるツールを使って、僕がロゴ画像を作成してAFFINGERに設定する手順を解説していきます。

みなさんは普段、いろいろなサイトを目にしていると思いますが1番最初に目が向く場所ってヘッダーじゃないですか？

それだけにブログやサイトを作るときにこだわってる人も多いと思います。

僕はデザインのセンスが無いのでシンプルにしていますが、この記事を読んでステキなロゴ画像を作って設定してくださいね。

無料ツールを使ったロゴ画像の作り方

それではロゴ画像を作っていこうと思うのですが、この記事では当サイトのロゴ画像を例として作っていきます。

まずは今回、使用する無料ツールはこちらです。

今回紹介する当サイトのロゴ画像はシンプルですが「Canva」を使えばオシャレなのが自由に作れますよ。

ロゴ画像作成手順①：画像サイズを決める

まずは画像サイズを決めましょう。

実は僕が1番困ったところなんですよね。。。

そんな悩みを解決してくれたのがGoogle拡張ツールのPage Ruler Redux

「Page Ruler Redux」の取り込み方についてはこちらを参考にしてください。

【Word Press】ブログの画像を適切なサイズに編集する方法

それではツールを使って自分の好きなサイズを測りましょう。

僕の場合、だいたい幅が600で高さが150くらいがいいと思ってこのサイズで作ることにしました。

実際は枠いっぱいになっていないので少し小さいですが目安にはなります。

ロゴ画像作成手順②：Canvaでロゴ画像を作る

それではCanvaを使って画像を作っていきましょう。

Canvaのホームページから「カスタムサイズ」をクリックし測ったサイズを入力したら「新しいデザインを作成」をクリックします。

使いたい素材を取り込んで好きなデザインにしていきましょう。

Canvaならいろんな模様やデザインの素材もたくさんあるので、それらを使って作るのも便利です。

さらに上部のメニューから文字を浮いたようにするとか縁取りなんかのデザインもできるので色々試して完成させましょう。

完成したら右上の「ダウンロード」から画像を保存しましょう。

ファイル形式はPNG・JPEGのどちらでもいいです。

ロゴ画像作成手順③：画像の背景を削除する

このまま保存した画像で設定するとこうなってしまいます。

Canvaでも出来るのですが有料プランになってしまうので無料のサイトを使いましょう。

今回使うサイトがremovebg

このremovebgを使って背景を透過させましょう。

先程保存した画像をアップロードかドロップしましょう。

背景に画像を入れたりする編集もできます。

ダウンロードして保存すれば完成です。

それではAFFINGERに設定しましょう。

ロゴ画像をヘッダーに設定して確認しよう

それでは作った画像をヘッダーに設定しましょう。

ロゴ画像をヘッダーに設定する手順

Word Pressのダッシュボードから「外観」の「カスタマイズ」をクリックします。

カスタムメニューの「ロゴ画像/サイトのタイトル」をクリックします。

「ロゴ画像」の「画像を選択」から作った画像をアップロードしましょう。

これで設定は完了です。

必ず「公開」ボタンを忘れないようにクリックしましょう。

それでは最後にヘッダーに色を付けて画像が透過されているかチェックします。

画像が透過されているかチェックします

それでは色を設定して画像が透過されているかチェックしてみましょう。

カスタムメニューから「基本エリア設定」をクリックします。

基本エリアの「ヘッダーエリア」をクリックします。

「背景色」のところで色を付けてみましょう。

画像のように色が入ればすべての設定が完了です。