【SWELL】ヘッダーロゴとピックアップバナー画像の作成・設定方法

こんにちは、SAKURA🌸🍃(@sakura_blog01)です。

ヘッダーロゴと
ピックアップバナーを
変更したいけど
サイズはなんだったっけ…

ヘッダーロゴやピックアップバナーを初めて作るとき、久しぶりに作るとき、画像のサイズって忘れてしまいますよね。

また、いろいろいじってて設置方法を忘れたり。

今回は備忘録がてら書いていきたいと思いますので参考にしてくださいね。

当ブログでは、ワードプレステーマにSWELLを使用しています。

  • 難しい知識は不要
  • もっと快適に、もっと楽しくブログを書こう
  • 他のテーマからの移行もサポート
圧倒的な使い心地を追求するWPテーマ
目次

WP 【SWEEL】ヘッダーロゴとピックアップバナー画像のサイズ

ヘッダーロゴとピックアップバナーの画像のサイズは下記のとおりです。

ワードプレスで
テーマはSWEELを
使用しています。

種類画像サイズ
ヘッダーロゴ画像1600×360px
ピックアップバナー640×360px

無料で利用できる便利な画像加工ツール

これからご紹介していくサイズや画像はすべて下記の画像加工ツールを使って作っています。

無料で使いやすいものばかりですので参考にしてくださいね。

画像の作成、圧縮、透過処理ができる加工ツール一覧

  • 豊富なデザインで、あらゆる画像が作れる⇒Canva
  • 一瞬で自動的に透過する⇒removebg(プレビュー画像は無料)
  • 透過や画像のサイズを変更する⇒バナー工房
  • カンタン操作で画像が圧縮できる⇒TinyPNG

【Canva】作りたいサイズで画像を作るには

Canvaのトップページの【デザインを作成】を選択、一番下のカスタムサイズから好きなサイズを入力して画像を作成できます。

ヘッダーロゴ画像のサイズと設定方法

当ブログのヘッダーロゴ画像は、Canvaを使って【1600×360px】で作成しています。

ヘッダーロゴ画像の設定は、外観からカスタマイズを選択、次にヘッダーを選んで変更していきましょう。

背景の透過設定でロゴを同化させるには

事前にロゴ画像を透過しておくことで、ヘッダーの画像や背景の色とキレイに一体化させることができます。

透過するときのファイル形式は
PNG形式で作成してくださいね。

SWELLの以下のヘッダー設定で、背景を透明にするかどうか選ぶことができます。

\SWELLカスタマイズのヘッダー、下記の画像のところで変更可能/

実際に透明に変更してみました。

透過前

透過後

ヘッダーロゴを透過するときは
見やすい文字の色を選ぶといいですよ。

ピックアップバナーのサイズと設定方法

トップページのピックアップバナーは、【640×360px】で作っています。

Canvaのカスタムサイズからサイズを入力してピックアップバナーを作っていきましょう。

メニューで入力したナビゲーションラベルの文字がピックアップバナーを設置したときも反映されるので文字は入力せず画像の作成だけでOKです。

ピックアップバナー設定方法

一連の流れ

STEP
外観からメニューを選択
STEP
新しいメニューを作成、すでにピックアップバナー用のメニューがある場合はそちらを選択
STEP
メディアへ作った画像を新規追加する
STEP
URLをコピペしてメニューの説明へ貼り付ける
STEP
メニューを保存して完成

これから説明していきますね。

外観からメニューを選択します。

新しいメニューを作るか、すでにピックアップバナー用のメニューがある場合はそちらを選択。

ピックアップバナーは、ひとつの記事だけでなく固定ページやカテゴリーを選ぶこともできます。

メニューの作成が完了、もしくはすでにある場合はピックアップバナーに使う画像を作っていきましょう。

メディアにピックアップバナー用の画像を追加したら下記の画像のようにファイルのURLが表示されますのでそれをコピーします。

コピーしたURLを下記の画像と同じ【説明】へ貼り付け、メニューを保存して完成です。

新しく変更してみました。

変更前/

\変更後/

前回は写真を使ったので今回はイラストにしてみました。

最後に

今回は、【SWELL】ヘッダーロゴとピックアップバナー画像の作成、設定方法について書いてきました。

下記のような画像加工ツールはとても便利なので、いろいろ作ってみてくださいね。

画像圧縮を忘れずに。

無料で画像の作成、圧縮、透過処理ができる画像加工ツールまとめ

  • 豊富なデザインで、あらゆる画像が作れる⇒Canva
  • 一瞬で自動的に透過する⇒removebg(プレビュー画像は無料)
  • 透過や画像のサイズを変更する⇒バナー工房
  • カンタン操作で画像が圧縮できる⇒TinyPNG

それではまた。

SAKURA🌸🍃

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる