目次
かっこいいヘッダー画像にしたい
和田
ヘッダー画像はブログやホームページの顔になる。
かっこいい写真や、画像を入れてみよう。
この記事に書いてあること
- ヘッダー画像のアップロード方法
- SWELLでのメインビジュアルの設定例
- cocoonでのアピールエリアの設定例
和田
ブログとかホームページの顔になるヘッダー画像を写真にするか画像にするかを選択しなければならない。
写真にする場合は？
- 自分で撮影した画像を使う
- 写真を購入する
- 無料の写真を探す オーダンなど
画像を作る場合は？
- Canvaで作る
- ファイヤーアルパカで作る
和田
これ以外にも色々方法はあると思うけど初心者はCanvaがおすすめ
- ダッシュボード
- メディア
- 新規追加
- ファイルをアップロード
画像のリサイズも簡単にできる
- 切り抜き
- 回転
- 反転
- 縮尺変更
簡単な画像の編集はWordPressでできます。
和田
ヘッダー画像を入れていきます。
ヘッダー画像はテーマごとに呼び方が違ったりするので、ちょっとわからなくなりますね。
cocoonでは『アピールエリア』
SWELLでは『メインビジュアル』
SWELLでメインビジュアルを設定する
- 外観
- カスタマイズ
- トップページ
- メインビジュアル
SWELLのメインビジュアル設定で設定したこと
- 周りに余白をつけるにチェック
- Scrollボタンを表示するにチェック
- フィルター処理で『ブラシ』追加
- メインテキストとサブテキスト挿入
和田
SEWLLでは簡単に上のようなカスタマイズ設定ができる
スライドもできるのですが今回は画像1枚のみのシンプルな設定に
完成したメインビジュアル
cocoonでアピールエリアを設定する
- cocoon設定
- アピールエリア
Cocoonのアピールエリア設定で設定したこと
- アピールエリアの表示を『フロントページのみ』にしました。
- 高さを500pxにしました。
- テキストエリアは非表示のままにしました（雰囲気が合わなかったので）
cocoonでアピールエリアにテキストを入れたらこうなります
和田
悪くないですが、ちょっとcocoonぽさ出るのでやめました。
画像に文字を入れた方が良さそうなので、入れる場合はCanvaで入れるといいかもですね。
まとめ猫
ロゴ、ヘッダー画像、メニューを入れたらホームページっぽくなってきました。
やはり有料のSWELLの方が初心者でも簡単にカスタマイズできますね。
