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

当ブログのWordPressテーマは賢威8賢威8を使用しています。

しかし今回はワードプレステーマWordPressテーマ 「WING(AFFINGER5)」のカスタマイズの解説をします。

内容はヘッダー画像に「タイトル」と「キャッチフレーズ」さらには「ボタン」を入れる方法について。

非常に申し訳ないのですが、Affinger5の公式ホームページの説明はわかりづらいんです。
その代わりになれば幸いです。

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

WING Affinger5

ヘッダー画像の設定方法

まずヘッダー画像の設定手順。
ヘッダー画像にタイトルを挿入するためにの注意点があります。

通常、ヘッダー画像の設定はダッシュボードメニューから「外観」→「カスタマイズ」→「ヘッダー画像」の一番上の部分で行います。

ヘッダー画像設定

ヘッダー画像にタイトルを入れたい場合、文字が反映されません。

ヘッダー画像の設定画面をさらに下にスクロールさせると、「ヘッダー画像エリア」という設定場所があります。

ここに画像登録を行います。

ヘッダー画像設定

ここに画像を挿入することで、ヘッダー画像が表示されるんです。

ヘッダー画像設定

ウィジェットの設定方法

ヘッダー画像の設定後に「ウィジェットの設定」を行います。

ダッシュボードメニューから「外観」→「ウィジェット」をクリック。

「ヘッダー画像エリアウィジェット」の中に「テキスト」ウィジェットをドラッグ&ドロップで挿入します。

ウェジェット画像

または以下のように「ヘッダー画像エリアウィジェット」をクリックし「ウィジェットを追加」ボタンをクリック。

ウィジェット設定

「ヘッダー画像エリアウィジェット」に「テキスト」を追加後にコードを入力します。

タイトルコード

[st-flexbox title=”タイトル” height=”400″ color=”#fff” fontsize=”200″]これはダミーのテキストです[/st-flexbox]

※上記コードを使う場合は[ ]を半角[ ]に打ち変えてください。表示上の問題があり全角にしてあります

 

コードの中の「タイトル」の文字と「これはダミーのテキストです」の部分は別の言葉に置き換えます。

ちなみに「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を入力」します。

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

リンク先を別ページで開きたい場合はtarget=””の部分を、target=”brank”にします。

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

width=””の部分に数値が入っていません。
数値を入力しお好みの幅に調整できます。

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

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

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

  • SANGO
  • Stork
  • JIN

などさまざまなワードプレステーマがありますが、WordPressテーマ 「WING(AFFINGER5)」デザインが良く、カスタマイズ性も半端なくいいです。

どのWordPressのテーマにしようか悩んでいる方のために、WordPressテーマ 「WING(AFFINGER5)」がどれほど素晴らしいテーマなのか別記事で紹介したいと思います。

購入してみたい、どんなテーマなのか知りたいという方はこちらからWordPressテーマ 「WING(AFFINGER5)」を確認してみてください。

WING Affinger5