WINGカスタマイズ

AFFINGER5でヘッダー画像エリアにボタンを配置する方法!MCボタンだとどうなる?

ヘッダー コンテンツ

ひよこさん
ヘッダーエリアにボタンを置いて、オシャレにしたい!

と、いうことで、トップページのヘッダーエリアに

ボタンやテキストを入れる方法を紹介します。

 

ちょっと前まで、ちょっと難しいかな…という感じだった

AFFINGER5で作るトップページのヘッダーエリアカスタマイズですが

結構簡単にできちゃいますよ。

 

AFFINGER5のヘッダーエリアの配置とカラー設定

ヘッダーエリア

中央にテキストとボタンがあります。

できあがりのイメージは、こんな感じです。

 

テキストやボタンは、ヘッダー画像エリアに表示するので

まずは、画像を「ヘッダー画像」にするか「headerエリア」にするかお好みで選んでくださいね。

 

画像をヘッダー画像に表示

上から、ヘッダーエリア、メニュー、ヘッダー画像エリアとなっており、

ボタンなどは、ヘッダー画像エリアに設置します。

 

 

変更は、ダッシュボード → 外観 → カスタマイズから。

 

ヘッダーエリア(紫の部分)の色を変更・グラデーションするなら

基本エリア設定 → ヘッダーエリア → 背景色

 

メニュー(青色の部分)の色を変更・グラデーションするなら

メニューのカラー設定 → PCヘッダーメニュー

 

ヘッダー画像(水色の部分)の変更は

ヘッダー画像 → (ヘッダー画像エリア)

 

ヘッダー画像開くとすぐに見える、

× 現在のヘッダー → 新規画像追加 ではなく

○ ヘッダー画像エリア → 新規画像追加 にアップロード。

 

※推奨画像サイズは、幅2000 × 高さ500ピクセルです

 

画像をheaderエリアに表示

こちらは、ヘッダーエリア、メニューにも背景画像が表示されています。

 

ちょっとややこしいんですが、

ブログ名が表示されるのが「ヘッダーエリア」で

メニュー下に表示されるのは「ヘッダー画像」、

ヘッダーエリアもメニューも含めた大きな範囲は「headerエリア」と呼ばれます。

 

設定は、ダッシュボード → 外観 → カスタマイズ

そして、基本エリア → headerエリア

 

この時に注意してほしいのが、

ヘッダーエリアにもメニューも含めてheader画像を表示させるには、

ヘッダーエリアやヘッダーメニューの設定を「空」にする必要があります。

 

ヘッダーエリアで背景色を選んでいたり

ヘッダー画像を追加したりという状態では、うまく表示できません。

 

うまく透過できない場合は、

どこかで設定している部分がないか探して

「空」(デフォルト)状態にするといいですよ。

 

AFFINGER5でヘッダーにボタンやテキストを配置

ヘッダー ボタン

ヘッダーにボタンやテキストなどコンテンツを設置しましょう。

 

ダッシュボード → AFFINGER 管理 → ヘッダー → ヘッダー画像コンテンツ設定

 

ヘッダー画像コンテンツ設定は、記事投稿画面と同じなので

表示したいテキストやボタンを設置してみましょう。

 

ボタンについての詳しい説明は、こちらの記事で紹介しています。

ボタン WING
AFFINGER5(WING)のキラリと光るボタンをカスタマイズして使い倒す!

続きを見る

 

「コンテンツ全体を上下左右を中央寄せ」に

チェックを入れると、ど真ん中に表示できますよ。

 

 

優先順位は、記事スライドショーの方が上なので

記事スライドショーを設定してあると、ヘッダー画像コンテンツは表示できません。

 

表示優先度:記事スライドショー設定 > ヘッダー画像コンテンツ > ヘッダー画像エリアのウィジェット > 画像スライドショー(ヘッダー画像)

 

反対に、優先順位の一番低い「画像スライドショー」を表示させるには

「記事スライドショー」の無効化、

「ヘッダーコンテンツ」に入力が無し、

「ヘッダー画像エリアのウィジェット」が使用されていないことが条件になります。

 

AFFINGER5でヘッダーのボタンをMCボタンにしてみた

完全に、個人の好みでしょうが

普通のボタンを配置してもいいけれど、

 

ヘッダー画像が、ごちゃっとしているときに

MCボタンを使ったらいいかもしれない!?と思いました。

 

MCボタンには、背景色があるので

文字の周りが見やすくなるんじゃないかな?と思って試してみました。

 

MCボタンとは

マイクロコピーボタンのことで、ボタンの周りにテキストやマイクロコピーを入力できるボタンのことです。

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

ひよこさん
ボタンに文字が入るのはもちろん、

ボタンの上に太字のテキスト、下にマイクロコピー、てんこ盛りね!

 

結果は・・・

MCボタン

あらら、ボタンが2列になってしまいました。

PCでもモバイルでも、ボタンは2列になっていました。

 

ならば、後ろのアイコンをとるか、ボタンを長くするといいかも!

ボタンの長さを90から120にしてみました。

 

【width="120"】

完全にやらかしましたね。

背景の枠も大きくなってくれるわけではないみたい。

 

【fontsize="90"】

ボタンの幅は、90に戻して

フォントサイズを120から90にしたら、中に入りました。

 

MCボタンの背景色も変更することができますが

枠の大きさはそのままで、小さいボタンにしかならないようです。残念。

 

MCボタンだけでできるかと思いましたが、

普通にテキストとボタンを別々に配置した方が良さそうです。

 

MCボタンは、投稿記事に配置しましょう♪

 

AFFINGER5でヘッダー画像エリアにボタンを配置する方法!MCボタンだと?まとめ

今回は、AFFINGER5でヘッダー画像エリアに

ボタンやテキストなどを配置する方法について紹介しました。

 

ちょっとわかりづらいので

私も結構な時間を費やした場所ですが

以前に比べると楽になったかなと思いますので

ぜひぜひ試してみてくださいね。

人気の投稿とページ

-WINGカスタマイズ
-,

© 2020 あぶログ