目次

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

和田
ヘッダー画像はブログやホームページの顔になる。
かっこいい写真や、画像を入れてみよう。
この記事に書いてあること
- ヘッダー画像のアップロード方法
- SWELLでのメインビジュアルの設定例
- cocoonでのアピールエリアの設定例

和田
ブログとかホームページの顔になるヘッダー画像を写真にするか画像にするかを選択しなければならない。
写真にする場合は?
- 自分で撮影した画像を使う
- 写真を購入する
- 無料の写真を探す オーダンなど
画像を作る場合は?
- Canvaで作る
- ファイヤーアルパカで作る

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

- ダッシュボード
- メディア
- 新規追加
- ファイルをアップロード
画像のリサイズも簡単にできる

- 切り抜き
- 回転
- 反転
- 縮尺変更
簡単な画像の編集はWordPressでできます。

和田
ヘッダー画像を入れていきます。
ヘッダー画像はテーマごとに呼び方が違ったりするので、ちょっとわからなくなりますね。
cocoonでは『アピールエリア』
SWELLでは『メインビジュアル』
SWELLでメインビジュアルを設定する

- 外観
- カスタマイズ
- トップページ
- メインビジュアル
SWELLのメインビジュアル設定で設定したこと
- 周りに余白をつけるにチェック
- Scrollボタンを表示するにチェック
- フィルター処理で『ブラシ』追加
- メインテキストとサブテキスト挿入

和田
SEWLLでは簡単に上のようなカスタマイズ設定ができる
スライドもできるのですが今回は画像1枚のみのシンプルな設定に
完成したメインビジュアル

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

- cocoon設定
- アピールエリア
Cocoonのアピールエリア設定で設定したこと
- アピールエリアの表示を『フロントページのみ』にしました。
- 高さを500pxにしました。
- テキストエリアは非表示のままにしました(雰囲気が合わなかったので)
cocoonでアピールエリアにテキストを入れたらこうなります


和田
悪くないですが、ちょっとcocoonぽさ出るのでやめました。
画像に文字を入れた方が良さそうなので、入れる場合はCanvaで入れるといいかもですね。

まとめ猫
ロゴ、ヘッダー画像、メニューを入れたらホームページっぽくなってきました。
やはり有料のSWELLの方が初心者でも簡単にカスタマイズできますね。