【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"］