AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】

専業ブロガー５年目のあずきです🐥

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

について、ブログ初心者さん向けに１からわかりやすく解説していきます

まず、ACTION AFFINGER6における「ヘッダーカード」というのは…

こうした、ブログのヘッダー（最上部）エリアに表示できる…

のこと

ヘッダーという目に付きやすい場所に、「おすすめ記事」や「各カテゴリーのTOPページ」などをピックアップするのに便利な機能です

ヘッダーカードを設置しておくと、ブログの見栄えも華やかになるね！

またACTION AFFINGER6では、上画像のようなデフォルトデザインから…

このように、ヘッダーカードの「表示デザイン」をクリック１つでカスタマイズすることもできます

ほかにも、「PC」「スマホ」でヘッダーカードの表示・非表示を個別に設定したりもできるよ！

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】

WordPress管理画面の左側一覧から…

を開き、さらにそのなかの左側一覧から…

というタブを開きます

「ヘッダー下 / おすすめ」タブを開くと、そのなかに…

↑「ヘッダーカード」というエリアがあるので、こちらで設定していきます

まず一番上側に表示されている…

↑「サイト全体に表示する」という項目ですが、こちらで…

という２パターンの表示設定から、任意の設定を選択しましょう

参考までに、このブログでは「チェックあり」にしてるよ！

つづいて、その下側に大きく表示されている…

↑ こちらの設定フォームで、ヘッダーカードに反映させる…

などを指定していきます

ヘッダーカードは【1】～【4】までの最大４件設定できるから、左上の【ヘッダーカード1】から順に設定していこう！

まず「画像ファイル」ですが…

というボタンをクリックして、あらかじめ用意してある任意の画像ファイルを選択します

つづいて、画像と一緒に表示される「タイトル」ですが…

というフォームに、任意のタイトル名をそれぞれ入力しましょう

サブテキストは小さく表示されるタイトルのことで、入力しなくてもOKだよ！

お次は「リンク先URL」ですが、こちらはそのまま…

というフォームに、リンク先として設定したい任意のページURLを貼りつければOKです

あとは、その下側に表示されている…

という項目で、ヘッダーカードの表示・非表示を「デバイスごと」で個別に指定できます

一通りできたら、画面右上の「Save」ボタンをクリックして設定を保存しよう！

設定を保存すると…

↑ このように、さきほどアップロードした画像ファイル（例：スイーツ写真）が設定画面上にもイメージ表示されるようになります

ということで、実際の画面上を確認してみると…

↑ このようなヘッダーカードが設置されました🐥

そしてもう１点！

ACTION AFFINGER6では、さきほどの設定画面を少し下の方へとスクロールしていき…

↑ こちらの「デザイン」というエリアで、ヘッダーカードの「表示デザイン」をカスタマイズすることも可能です🐣

「テキストのある背景画像をぼかす」↓

「テキストのある背景画像を暗くする」↓

「角丸にする」↓

「スマホ閲覧時（959px以下）のおすすめヘッダーカードの高さを倍に」↓

デザインを変更したら、また「Save」ボタンを忘れずにクリックしよう！

あずきのワードプレスブログ「完全初心者」ガイド

※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です