「WING(AFFINGER5)」のカスタマイズの解説をします。内容はヘッダー画像に「タイトル」と「キャッチフレーズ」さらには「ボタン」を入れる方法について。非常に申し訳ないのですが、Affinger5の公式ホームページの説明はわかりづらいんです。その代わりになれば幸いです。ヘッダー画像にタイトルを入れる方法ヘッダー画像の設定方法まずヘッダー画像の設定手順。ヘッダー画像にタイトルを挿入するためにの注意点があります。通常、ヘッダー画像の設定はダッシュボードメニューから「外観」→「カスタマイズ」→「ヘッダー画像」の一番上の部分で行います。ヘッダー画像にタイトルを入れたい場合、文字が反映されません。ヘッダー画像の設定画面をさらに下にスクロールさせると、「ヘッダー画像エリア」という設定場所があります。ここに画像登録を行います。ここに画像を挿入することで、ヘッダー画像が表示されるんです。ウィジェットの設定方法ヘッダー画像の設定後に「ウィジェットの設定」を行います。ダッシュボードメニューから「外観」→「ウィジェット」をクリック。「ヘッダー画像エリアウィジェット」の中に「テキスト」ウィジェットをドラッグ&ドロップで挿入します。以下のように「ヘッダー画像エリアウィジェット」をクリックし「ウィジェットを追加」ボタンをクリック。「ヘッダー画像エリアウィジェット」に「テキスト」を追加後にコードを入力します。]に打ち変えてください。表示上の問題があり全角にしてありますコードの中の「タイトル」の文字と「これはダミーのテキストです」の部分は別の言葉に置き換えます。ちなみに「st-flexbox」というところを見る限り、バナーボックスデザインのコードをカスタマイズして表示させているんですね。先ほど追加した「ヘッダー画像エリアウィジェット」の中の「テキストウィジェット」にリンクボタンのコードを追加することでリンクボタンを挿入することができます。ボタンのコードは「ヘッダー画像エリアウィジェット」内では表示させることができません。別タブで新規投稿画面を表示し、「タグ」の「その他のパーツ」→「カスタムボタン」を選択。挿入したいボタンを選び、コードを表示させます。挿入したいボタンコードをコピー。「ヘッダー画像エリアウィジェット」に戻り、「テキスト」の中に貼り付けます。このままだとレイアウトが崩れます。修正方法は以下の通り。最初に入力したコードの[/st-flexbox]の部分を、追加したボタンコードの末尾に移動させます。することで、タイトルとキャッチフレーズのコード内にボタン用のコードが入ったことで、ボタンがキレイに収まります。コードの中身を調整すれば完成。簡単にカスタマイズ方法の解説します。追加したボタンコードは以下を参考にしました。url=”#”の「#にリンクさせたいURLを入力」します。リンクページを別ウインドウで開きたい場合リンク先を別ページで開きたい場合はtarget=””の部分を、target=”brank”にします。ボタンのサイズを変更したい場合width=””の部分に数値が入っていません。数値を入力しお好みの幅に調整できます。文字を打ち変えてください。「WING(AFFINGER5)」デザインが良く、カスタマイズ性も半端なくいいです。「WING(AFFINGER5)」がどれほど素晴らしいテーマなのか別記事で紹介したいと思います。「WING(AFFINGER5)」を確認してみてください。必須サイト上に表示された文字を入力してください。アフィリエイトワークシェア電話お問合わせTOPへ。