WORDPRESS

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

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法
 

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

 

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

「ヘッダーカード」の作り方とカスタマイズ方法

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

 

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

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 top-01

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

「カード型」リンク

のこと

 

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

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

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

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 top-02-a

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 top-02-b

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 top-02-c

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 top-02-d

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

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

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼

ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで

ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで
ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像付きでまるっと解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

インフォトップ ワードプレステーマ売上

第1位

公式:ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

※2021年発表Infotop Affidemy

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

WordPress ヘッダー b-01

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

AFFINGER 管理

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

ヘッダー下 / おすすめ

というタブを開きます

 

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

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 1-01

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

 

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

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 1-02

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

  • チェックあり → 「HOME」つまり全体のTOPページだけでなく、「下層」つまり記事ごとの個別ページでも、ヘッダーカードを表示させる!
  • チェックなし → 「HOME」のみヘッダーカードを表示させる!

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

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

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

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 1-03-a

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

  • 画像ファイル
  • 表示タイトル
  • リンク先URL

などを指定していきます

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

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

アップロード

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

 

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

  • テキスト
  • サブテキスト

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

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

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

リンク先URL

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

 

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

  • PCに表示しない
  • スマホ・タブレットに表示しない

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

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

設定を保存すると…

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 1-03-b

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

 

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

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 1-05

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

 

そしてもう1点!

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

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 1-04

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

 

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

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 1-06-a

 

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

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 1-06-b

 

「角丸にする」↓

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 1-06-c

 

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

AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法 1-06-d

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

補足

ヘッダーカードエリアの「背景色」設定については、WordPress管理画面の左側一覧から…

外観 > カスタマイズ

をクリックしたなかの、さらに左側一覧から…

基本エリア設定 > ヘッダーカードエリア

という順に開いたタブ内にて、任意の色にカスタマイズできます

人気記事

 

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

”全8章” の総合TOPページです

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

\ 「なぜ売れないか?」を徹底解析 /

AFFINGERタグ管理マネージャー&PVモニター バナー 01-1000px

結果が見えるサイト運営に

AFFINGERタグ管理マネージャー4 + PVモニター

 

   ✔ よく使用する文章や画像、広告リンクを「テンプレート化」して使い回せる!

   ✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬!

   ✔ 広告の「クリック回数」「クリックされたページ」などを自動計測!

AffiliateRun~なぜ売れないか?

PDFマニュアル付き!

 

公式:「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット

関連:WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】

WordPressにおける広告リンクの貼り方
WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】

続きを見る

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

About me

あずきアイコン main-01 背景透過

suzu azuki
あずき鈴々

 

独立5年目の専業ブロガー / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にいるので覗いてもらえると嬉しいです^^

-WORDPRESS