MENU

【初心者向き】WordPressのヘッダー画像の入れ方を解説していきます

目次

WordPressのヘッダー画像の入れ方を解説していきます

かっこいいヘッダー画像にしたい

和田
和田

ヘッダー画像はブログやホームページの顔になる。

かっこいい写真や、画像を入れてみよう。

この記事に書いてあること
  • ヘッダー画像のアップロード方法
  • SWELLでのメインビジュアルの設定例
  • cocoonでのアピールエリアの設定例

WordPressのヘッダー画像は写真にするか画像で作るか?

和田
和田

ブログとかホームページの顔になるヘッダー画像を写真にするか画像にするかを選択しなければならない。

写真にする場合は?

  1. 自分で撮影した画像を使う
  2. 写真を購入する
  3. 無料の写真を探す オーダンなど

画像を作る場合は?

  1. Canvaで作る
  2. ファイヤーアルパカで作る
 和田
和田

これ以外にも色々方法はあると思うけど初心者はCanvaがおすすめ

用意した画像をアップロード

  1. ダッシュボード
  2. メディア
  3. 新規追加
  4. ファイルをアップロード

画像のリサイズも簡単にできる

  • 切り抜き
  • 回転
  • 反転
  • 縮尺変更

簡単な画像の編集はWordPressでできます。

ヘッダー画像を設定していきます

 和田
和田

ヘッダー画像を入れていきます。

ヘッダー画像はテーマごとに呼び方が違ったりするので、ちょっとわからなくなりますね。

cocoonでは『アピールエリア』

SWELLでは『メインビジュアル』

SWELLでメインビジュアルを設定する

  1. 外観
  2. カスタマイズ
  3. トップページ
  4. メインビジュアル

SWELLのメインビジュアル設定で設定したこと

  • 周りに余白をつけるにチェック
  • Scrollボタンを表示するにチェック
  • フィルター処理で『ブラシ』追加
  • メインテキストとサブテキスト挿入
 和田
和田

SEWLLでは簡単に上のようなカスタマイズ設定ができる

スライドもできるのですが今回は画像1枚のみのシンプルな設定に

完成したメインビジュアル

cocoonでアピールエリアを設定する

  1. cocoon設定
  2. アピールエリア

Cocoonのアピールエリア設定で設定したこと

  • アピールエリアの表示を『フロントページのみ』にしました。
  • 高さを500pxにしました。
  • テキストエリアは非表示のままにしました(雰囲気が合わなかったので)

cocoonでアピールエリアにテキストを入れたらこうなります

 和田
和田

悪くないですが、ちょっとcocoonぽさ出るのでやめました。

画像に文字を入れた方が良さそうなので、入れる場合はCanvaで入れるといいかもですね。

まとめ

まとめ猫
まとめ猫

ロゴ、ヘッダー画像、メニューを入れたらホームページっぽくなってきました。

やはり有料のSWELLの方が初心者でも簡単にカスタマイズできますね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次