営業時間:9時~18時【土日祝は10時~13時】

ブログ集客をするためのWordPressテーマ

ELEPHANT3正式発売開始しました!

STEP5-1.ヘッダー画像の上に文字やボタンリンクを載せてみよう

 
この記事を書いている人 - WRITER -
ELEPHANT3作りました。
HTMLコードとかCSSとか分からない初心者さんでも、いろいろシンプルで使いやすくしました。
詳しいプロフィールはこちら

アミ通常会話2
こんにちは。アミです。

 

今回は、WordPressテーマ「ELEPHANT3」でヘッダー画像上に文字やボタンリンクを載せる方法を説明します。

 

ヘッダー画像の上に文字やボタンを載せる方法

↓ こんな感じで、ヘッダー画像の上に文字やボタンが載せられます。

 

1.まずは、「外観」⇒「ウィジェット」に行きます。

2.ウィジェットの設定画面で、左側にある「ビジュアルエディター」というパーツを「7.ヘッダー画像上のコンテンツ(PC)」という部分に入れます。

3.入れた「ビジュアルエディター」を開いて、その中に好きな文字やリンクを入れて「保存」をクリック。

 

すると、こんな風に「あああああああああ」という文字がヘッダー画像の上に載りました。

 

応用編:あとはビジュアルエディターで何でもできる!

これができれば、あとはボタンを載せたりなんてすぐにできます。

例えば、以下のようなコードを、先ほどのビジュアルエディターに入れてみましょう。

ここにボタンリンク(←文字部分に必ずリンクを張る)

するとこんな風にボタン型のリンクが載りました。

 

スマホ・タブレットのヘッダー画像は別に設定する必要があります

上で紹介した方法では、スマホ・タブレットから見たときのヘッダー画像には文字やボタンなどが表示されません。

スマホ・タブレットから見たときのヘッダー画像上に文字などを置きたい場合、

外観⇒ウィジェットで『8.ヘッダー画像上のコンテンツ(SP&タブレット)』

の中に、ビジュアルエディターというパーツを入れて内容を入力する必要があります。

 

 

ヘッダー画像上コンテンツのサンプル

1.文字+ボタンを中央に配置

↓ビジュアルエディタへの書き方例

ここに大きめのキャッチコピー(←フォントを大きくします)

~サブキャッチコピー~

ボタンリンク(←文字にリンク張ってね)
ボタンリンク(←文字にリンク張ってね)

 

2.文字+ボタンを左に寄せて配置

↓ビジュアルエディタへの書き方例

ここに大きめのキャッチコピー(←フォントを大きくする) ~サブキャッチコピー~
ボタンリンク(←文字にリンク張ってね)
ボタンリンク(←文字にリンク張ってね)

 

3.文字+ボタンを右に寄せて配置

↓ビジュアルエディタへの書き方例

ここに大きめのキャッチコピー(←フォントを大きくする) ~サブキャッチコピー~
ボタンリンク(←文字にリンク張ってね)
ボタンリンク(←文字にリンク張ってね)

 

4.左側に文字、右側にボタン

ここに大きめのキャッチコピー ~サブキャッチコピー~
ボタンリンク
ボタンリンク

 

このような記述方法で、ヘッダー画像上に文字やボタンを配置することができます。

ここまで見てもなかなか分からない方は、動画解説も用意していますので参考にしてみてください。

【動画解説】ヘッダー画像上に文字やボタンを載せる方法

パソコンから見たときの設定方法

 

スマホ・タブレットから見たときの設定方法

 

 

>次は「ELEPHANT3の便利なショートコードを使おう」です

 

 

『ブログ集客』で絶対結果を出したいあなたのための
WordPressテーマ

ELEPHANT3

WordPressでブログを使って集客をしたいけれど、WordPressの扱いが難しい…。
簡単に使えるWordPressテーマがあればなぁ…。

抜群に使いやすく、ブログ集客に集中できるWordPressテーマです。

この記事を書いている人 - WRITER -
ELEPHANT3作りました。
HTMLコードとかCSSとか分からない初心者さんでも、いろいろシンプルで使いやすくしました。
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© ELEPHANT3 , 2017 All Rights Reserved.