【SWELL実録】ヘッダーを画像化して印象アップ！設定手順も紹介

今回は すぐに実践できる軽めのカスタマイズです。

これまで ヘッダーには「とりあえずテキストデータで」サイト名を表示していました。
ただ、長いサイト名の場合 スマホで見ると２行になってしまうことも…

変なところで改行…
残念な感じ 

そこで ヘッダー部分をカスタマイズ。
作業自体はわりと簡単です。

今回の作業結果
 よろしければ見比べてみてください 

Canvaでヘッダー画像を作成

今回もCanvaでサクッと作成。
サイズは 1,600px × 600px で、白背景・太字フォントをベースにしました。

当サイトはトップページに動画を入れているので ごちゃごちゃしすぎないよう、シンプルな感じにしました。

ダウンロード時はPNG形式で背景透過にて。
┗ Canvaで背景透過にするには有料版である必要があります。
┗ 無料版の場合は、WEBで検索すれば「無料の背景削除ツール」がたくさん出てきます。それで代用できます。

SWELLの設定手順（外観→カスタマイズ→ヘッダー）

外観 → カスタマイズ

ヘッダー
(今回は下部でスマホビューにすると良いかと）

青色で囲った部分に作った画像を当てていきます。

画像を選択、アップロードしてください。

画像サイズがデフォルトのままでは微妙だったので、調整しました。
試しながら調整したところ、私の場合は次のサイズに。

SP：60px／PC追従ヘッダー：32pc／PC：55px
※ご自身の環境で実際に表示させながら調整してみてください

ついでに、ヘッダーメニューの表示位置なども簡単に変更できるので、お好みでどうぞ。

実際に変更してみた結果（再掲）

スマホで見たときの野暮ったさが減ったかなと思います。

まとめ

SWELLは標準でも綺麗に整っていますが、
（特にサイト名が長い場合は）
ヘッダー部分を画像化するだけで見た目の完成度が一段アップ。

Canvaの使い方に慣れれば 10分ほどあれば作れるので、ぜひ気軽に試してみてください。

今回は以上です。
次回はファビコン（ブラウザのタブやスマホのホーム画面などに表示される「サイトの小さなアイコン」）を作って、設定していきます。

最後までご覧いただきありがとうございました。