STEP5-1.ヘッダー画像の上に文字やボタンリンクを載せてみよう
こんにちは。アミです。
今回は、WordPressテーマ「ELEPHANT3」でヘッダー画像上に文字やボタンリンクを載せる方法を説明します。
ヘッダー画像の上に文字やボタンを載せる方法
↓ こんな感じで、ヘッダー画像の上に文字やボタンが載せられます。
1.まずは、「外観」⇒「ウィジェット」に行きます。
2.ウィジェットの設定画面で、左側にある「ビジュアルエディター」というパーツを「7.ヘッダー画像上のコンテンツ(PC)」という部分に入れます。
3.入れた「ビジュアルエディター」を開いて、その中に好きな文字やリンクを入れて「保存」をクリック。
すると、こんな風に「あああああああああ」という文字がヘッダー画像の上に載りました。
応用編:あとはビジュアルエディターで何でもできる!
これができれば、あとはボタンを載せたりなんてすぐにできます。
例えば、以下のようなコードを、先ほどのビジュアルエディターに入れてみましょう。
ここにボタンリンク(←文字部分に必ずリンクを張る)
するとこんな風にボタン型のリンクが載りました。
スマホ・タブレットのヘッダー画像は別に設定する必要があります
上で紹介した方法では、スマホ・タブレットから見たときのヘッダー画像には文字やボタンなどが表示されません。
スマホ・タブレットから見たときのヘッダー画像上に文字などを置きたい場合、
外観⇒ウィジェットで『8.ヘッダー画像上のコンテンツ(SP&タブレット)』
の中に、ビジュアルエディターというパーツを入れて内容を入力する必要があります。
ヘッダー画像上コンテンツのサンプル
1.文字+ボタンを中央に配置
↓ビジュアルエディタへの書き方例
ここに大きめのキャッチコピー(←フォントを大きくします) ~サブキャッチコピー~ボタンリンク(←文字にリンク張ってね)ボタンリンク(←文字にリンク張ってね)
2.文字+ボタンを左に寄せて配置
↓ビジュアルエディタへの書き方例
ここに大きめのキャッチコピー(←フォントを大きくする) ~サブキャッチコピー~ボタンリンク(←文字にリンク張ってね)ボタンリンク(←文字にリンク張ってね)
3.文字+ボタンを右に寄せて配置
↓ビジュアルエディタへの書き方例
ここに大きめのキャッチコピー(←フォントを大きくする) ~サブキャッチコピー~ボタンリンク(←文字にリンク張ってね)ボタンリンク(←文字にリンク張ってね)
4.左側に文字、右側にボタン
ここに大きめのキャッチコピー ~サブキャッチコピー~ボタンリンクボタンリンク
このような記述方法で、ヘッダー画像上に文字やボタンを配置することができます。
ここまで見てもなかなか分からない方は、動画解説も用意していますので参考にしてみてください。
【動画解説】ヘッダー画像上に文字やボタンを載せる方法
パソコンから見たときの設定方法
スマホ・タブレットから見たときの設定方法
>次は「ELEPHANT3の便利なショートコードを使おう」です