触ってみたくなるようなWordPressテーマ

大幅にリニューアルしたSEAL ver.1.5が発売!

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

 
アミ
WRITER
 
この記事を書いている人 - WRITER -
アミ
アミです。ブログマーケッターJUNICHIっていうおっさんにこき使われて、WordPressテーマ『Seal』を作りました。 一生懸命作ったので是非気に入ったら使ってみてね。
詳しいプロフィールはこちら

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

 

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

 

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

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

 

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

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

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

 

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

 

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

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

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

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

 

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

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

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

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

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

 

 

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

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

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

 

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

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

 

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

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

 

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

 

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

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

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

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

 

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

 

 

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

 

 

 

きっとキミも使いたくなる!
『ザ・ブロガー』のアミが作ったWordPressテーマ

screenshot

ブログマーケッターJUNICHIが監修した新しいテーマ。

手で触ってみたくなるマテリアルデザインと、写真好きなキミのためのテーマ。

もちろんブログマーケティングにもピッタリ!

 

この記事を書いている人 - WRITER -
アミ
アミです。ブログマーケッターJUNICHIっていうおっさんにこき使われて、WordPressテーマ『Seal』を作りました。 一生懸命作ったので是非気に入ったら使ってみてね。
詳しいプロフィールはこちら

- Comments -

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

Copyright© Seal , 2017 All Rights Reserved.