AFFINGER5

【AFFINGER5:使い方】ヘッダー画像にタイトルとボタンを入れる方法!

【AFFINGER5使い方】ヘッダー画像にタイトルとボタンを入れる方法!

 

ここあです。

 

ワードプレステーマ「AFFINGER 5」は

5/21に大型アップデートとしてβ版が公開されました。

 

今回は、その大型アップデートで実装された

ヘッダー画像にタイトル」と「キャッチフレーズ

さらには「ボタン」を入れる方法を解説したいと思います。

 

なぜ、こんな記事をわざわざ書こうと思ったのか…

 

理由は簡単。

公式サイトの説明が分かりにくい!

というより分からなかったから…^^;

 

この設定をするだけで

どれだけ無駄な時間を費やしたことか…

 

私は販売者に声を大にして言いたい!

お前ら、もっとユーザーのこと考えろ!と…

 

確かに、これだけ優秀なテーマを

こんな低価格で使わせてもらえるのはありがたいですよ…。

ただそれでも言いたいことは、はっきり言いたい!^^;

 

使い方の説明、ほんと何とかならんのか…(笑)

確かに開発側は分かって使ってるから問題ないでしょう…

 

しかし、初めてこのテーマを手にする人が

たったそれだけの説明で理解できるか?

ということを改めて考えて欲しいのです…。

 

説明ページを担当した人は

そのページを他の誰かに見てもらって

本当にそれで理解できるか検証したのか?も疑わしい。

 

そんなことすら感じる部分もあります…

 

確かにそれでもAFFINGERの説明ページは

かなり親切な方だはと思う。それは認めますよ…。

 

まぁ「あんたはまだまだ勉強不足だよ」と言われれば、

それまでかもしれませんが…

それでも私は初心者ではない。

 

ほんと一筋縄ではいかない「AFFINGER5」(笑)

文句もあるけど確かにスゴくいいテーマ…

それもちゃんと認めます…^^

 

だからこそ、

もっとユーザーの満足度を上げる努力をして欲しい

というのが素直な気持ち…

 

そんなところで評価を下げるのは非常にもったいないですよね?

あなたもそう思いませんか?^^;

とまぁ、愚痴はそれぐらいで…(笑)

 

それでも何とかなったから

同じように無駄な時間を過ごす人を減らすべく

この記事を書くことにしました。

 

ヘッダー画像にタイトルを入れる方法

ヘッダー画像にタイトルを付けるためには

知っておかなければならない基本的な設定場所があります。

 

ここが違っていれば…

なんでやねん!」とモニターに

ツッコむことになります(笑)

 

ヘッダー画像の設定方法

通常、ヘッダー画像の設定は…

ダッシュボードメニューから

外観」→「カスタマイズ」→「ヘッダー画像」の一番上

 

↓ 以下の部分で行います。

ヘッダー画像設定

 

しかし、ヘッダー画像にタイトルを入れたい場合は

ここではダメなんです…。

※実際に、画像は反映されてないですよね^^;

 

というのも…

 

ヘッダー画像の設定画面を

もう少しだけ下にスクロールさせると…

 

ヘッダー画像エリア」という設定場所があるからです。
「分かるかっ〜!」(笑)

ということで、画像はここに登録しましょう!^^

 

ヘッダー画像設定

 

 

そうすれば、ちゃんとヘッダー画像が表示されます。

ほらねっ!^^

ヘッダー画像設定

 

私は、まさかヘッダー画像の設定箇所が分かれていると

思ってなかった…^^;

そこが最大のミステリー(笑)

 

なので、ウィジェットを入れた瞬間

画像の表示が消えて「何で?」と

ぷちパニックになったのです…

 

ここさえ気付いていれば後は楽勝^^

 

ウィジェットの設定方法

ヘッダー画像の設定ができたところで

続いてウィジェットの設定をしていきましょう。

 

ダッシュボードメニューから

外観」→「ウィジェット」をクリック。

 

ヘッダー画像エリアウィジェット」の中に

「テキスト」ウィジェットをドラッグしていれましょう。

ウィジェット画面

 

テキストウィジェットをドラッグしにくい場合は…

以下のように「テキストウィジェット」をクリック。

 

ヘッダー画像エリアウィジェット」をクリックし

ウィジェットを追加」ボタンをクリックしてください。

ウィジェット設定

 

ヘッダー画像エリアウィジェット」に

テキストウィジェット」を追加できたら

コードを入力しましょう。

 

[st-flexbox title="タイトル" height="400" color="#fff" fontsize="200"]これはダミーのテキストです[/st-flexbox]
※上記コードを使う場合は[ ]を半角[ ]に打ち変えてください。表示上の問題があり全角にしてあります^^;

コードを入力すると…

 

タイトル
これはダミーのテキストです

 

というテキストがヘッダー画像の上に表示されるので

コードの中の「タイトル」の文字と

これはダミーのテキストです」を好きな言葉に打ち変えましょう。

 

リンクボタンの設定方法

ヘッダー画像にリンクボタンを挿入する場合は…

 

先ほどの「ヘッダー画像エリアウィジェット」の中の

「テキストウィジェット」にボタンのコードを追加します。

 

しかし、ボタンのコードは

ヘッダー画像エリアウィジェット」内では

表示させることができないので

 

一旦、投稿画面に移動し、

タグから「その他のパーツ」→「カスタムボタン」へと移動

挿入したいボタンを選びましょう。

 

ボタンコード選択

 

挿入したいボタンが選べたらコードをコピー。

ボタンコードをコピー

 

再び「ヘッダー画像エリアウィジェット」に移動し

テキストウィジェット」の中に貼り付けます。

ヘッダー画像エリアウィジェット

 

しかし、このままだとレイアウトが崩れます。

こんな感じに…

トップ画面イメージ

 

とりあえず、ここで一発思いっきりツッコむ練習!

なんでやねんっ!」(笑)

 

ということで、コードの修正をします…

 

以下、画像のように最初に入力したコードの

[/st-flexbox]の部分を、追加したボタンコードの末尾に移動させましょう。

 

 

そうすることで、タイトルとキャッチフレーズのコード内に

ボタン用のコードが入ったことで、ボタンがキレイに収まります。

 

↓ ご覧の通り!

ヘッダーイメージ

 

最後に、コードの中身を調整すれば完成です!^^

 

コードの調整方法

キリがないので、全部説明はしませんが…^^;

簡単にカスタマイズ方法の説明だけしておきますね。

 

追加したボタンコードは、以下をサンプルとします。

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#FFB300" ref="on"]

 

ボタンを特定のページにリンクさせたい場合

st-mybutton url="#"の「#にリンクさせたいURLを入力」します。

例えば、こんな感じ…

st-mybutton url="https://sample-a.affirepo.com/profile/"

 

リンクページを別ウインドウで開きたい場合

リンク先を別ページで開きたい場合は…

target=""の部分を、target="brank"としてください。

brank」を入力しましょう。

 

ボタンのサイズを変更したい場合

width=""の部分に数値が入っていないので、

数値を入力しお好みの幅に調整できます。

私のサイトだと、ボタンの幅はwidth="30"で設定しています。

 

ボタンのタイトルを変更したい場合

title="詳しくはコチラ" の文字を打ち変えてください。

 

 

ヘッダー画像にタイトルとボタンを入れる方法まとめ

AFFINGER5」はとにかく設定箇所が多いので

いろいろと設定を試してみると

その都度新しい発見があります。

 

自分はこれで良いと思っていても設定を触っているうちに

もっとしっくりくる」設定になったりもするので

 

いろいろと好奇心をもって触ってみることは

非常に大事だと思います。

 

ただし、大掛かりなカスタマイズに手を出す時は

必ず「バックアップ」をとってから

設定を触るようにしてくださいね。

 

何事も「備えあれば憂いなし」です^^

 

とうことで、今回は簡単ではありましたが

ヘッダー画像にタイトルとボタンを入れる方法」を

解説しました。

 

また、分かりにくい設定があれば

備忘録も兼ねて記事にしたいと思います。

 

最後までお読みいただきありがとうございました!

 

  • この記事を書いた人
ここあ

ここあ

グラフィックデザイン歴20年のフリーランスデザイナー。大手広告代理店や大手印刷会社と取引のある制作プロダクションに20年勤務し、2017年に独立。現在は、グラフィックデザインを生かしたWebデザインのビジネスを展開しながら、コンサルティング業務など幅広く活動しています。

Reccomend

オシャレなブログデザインの作り方 1

    ここあです。   このサイトはワードプレステーマ「AFFINGER5」の 個人的なテストサイトして立ち上げています。 ※ただし、記事はしっかり書いてます! &nb ...

【AFFINGER5使い方】ヘッダー画像にタイトルとボタンを入れる方法! 2

  ここあです。   ワードプレステーマ「AFFINGER 5」は 5/21に大型アップデートとしてβ版が公開されました。   今回は、その大型アップデートで実装された ...

-AFFINGER5
-, , , ,

© 2021 THE BLOG LIFE