専業ブロガー５年目のあずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
「ヘッダーカード」の作り方＆カスタマイズ設定方法
について、ブログ初心者さん向けに１からわかりやすく解説していきます
まず、ACTION AFFINGER6における「ヘッダーカード」というのは…
こうした、ブログのヘッダー（最上部）エリアに表示できる…
「カード型」リンク
のこと
ヘッダーという目に付きやすい場所に、「おすすめ記事」や「各カテゴリーのTOPページ」などをピックアップするのに便利な機能です
またACTION AFFINGER6では、上画像のようなデフォルトデザインから…
このように、ヘッダーカードの「表示デザイン」をクリック１つでカスタマイズすることもできます
▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼
【2022年12月】AFFINGER6の購入・導入手順を１から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】
-
【2022年12月】AFFINGER6の購入・導入手順を１から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】
続きを見る
- 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
画像付きでまるっと解説しています - 作業そのものは、正味【15分程度】でおわります（子テーマまで含めて）
AFFINGER6「ヘッダーカード」の作り方＆カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド】
注意
当ブログガイドは、WordPressの編集エディタが「グーテンベルグ」ではなく…
クラシックエディタ
の前提で解説しています（圧倒的に使いやすく、またユーザー数の多さから「情報もググりやすい」のでおすすめです）
そのため、使用されているWordPress環境が…
- 無料プラグイン「Classic Editor」を有効化していない
- または、AFFINGERに付属の「Gutenbergプラグイン2」を有効化している
といった状態だと、「画面のデザインや設定方法が当ページの内容と異なる」可能性がありますのでご注意ください
なお「Classic Editor」の有効化手順は、下記のステップとなります（一瞬です）
- WordPress管理画面から、左側の プラグイン ＞ 新規追加 を順にクリック
- 右上の検索フォームに「Classic Editor」と入力し、表示された「Classic Editor」の インストール ＞ 有効化 を順にクリック
「クラシックエディタとグーテンベルグってなに…？」という場合は、こちらで１から解説しています ↓ ※重要です
-
WordPressクラシックエディタ・グーテンベルグとは？Classic Editorの導入方法【ワードプレスブログ「完全初心者」ガイド／第４章／No.6】
続きを見る
WordPress管理画面の左側一覧から…
AFFINGER 管理
を開き、さらにそのなかの左側一覧から…
ヘッダー下 / おすすめ
というタブを開きます
「ヘッダー下 / おすすめ」タブを開くと、そのなかに…
↑「ヘッダーカード」というエリアがあるので、こちらで設定していきます
まず一番上側に表示されている…
↑「サイト全体に表示する」という項目ですが、こちらで…
- チェックあり → 「HOME」つまり全体のTOPページだけでなく、「下層」つまり記事ごとの個別ページでも、ヘッダーカードを表示させる！
- チェックなし → 「HOME」のみヘッダーカードを表示させる！
という２パターンの表示設定から、任意の設定を選択しましょう
つづいて、その下側に大きく表示されている…
↑ こちらの設定フォームで、ヘッダーカードに反映させる…
- 画像ファイル
- 表示タイトル
- リンク先URL
などを指定していきます
まず「画像ファイル」ですが…
アップロード
というボタンをクリックして、あらかじめ用意してある任意の画像ファイルを選択します
つづいて、画像と一緒に表示される「タイトル」ですが…
- テキスト
- サブテキスト
というフォームに、任意のタイトル名をそれぞれ入力しましょう
お次は「リンク先URL」ですが、こちらはそのまま…
リンク先URL
というフォームに、リンク先として設定したい任意のページURLを貼りつければOKです
あとは、その下側に表示されている…
- PCに表示しない
- スマホ・タブレットに表示しない
という項目で、ヘッダーカードの表示・非表示を「デバイスごと」で個別に指定できます
設定を保存すると…
↑ このように、さきほどアップロードした画像ファイル（例：スイーツ写真）が設定画面上にもイメージ表示されるようになります
ということで、実際の画面上を確認してみると…
↑ このようなヘッダーカードが設置されました🐥
そしてもう１点！
ACTION AFFINGER6では、さきほどの設定画面を少し下の方へとスクロールしていき…
↑ こちらの「デザイン」というエリアで、ヘッダーカードの「表示デザイン」をカスタマイズすることも可能です🐣
「テキストのある背景画像をぼかす」↓
「テキストのある背景画像を暗くする」↓
「角丸にする」↓
「スマホ閲覧時（959px以下）のおすすめヘッダーカードの高さを倍に」↓
補足
ヘッダーカードエリアの「背景色」設定については、WordPress管理画面の左側一覧から…
外観 ＞ カスタマイズ
をクリックしたなかの、さらに左側一覧から…
基本エリア設定 ＞ ヘッダーカードエリア
という順に開いたタブ内にて、任意の色にカスタマイズできます
人気記事
あずきのワードプレスブログ「完全初心者」ガイド！
「全８章」の総合TOPページです
