WORDPRESS

AFFINGER6「ヘッダーカード」の作り方&カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド】

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の「購入・導入手順」はこちらから ▼

【2022年12月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】

AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】
【2022年12月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】

続きを見る

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

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

公式:ACTION AFFINGER6

すごいもくじLITE

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

※2021年発表Infotop Affidemy

AFFINGER6「ヘッダーカード」の作り方&カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド】

WordPress ヘッダー b-01

注意

当ブログガイドは、WordPressの編集エディタが「グーテンベルグ」ではなく…

クラシックエディタ

の前提で解説しています(圧倒的に使いやすく、またユーザー数の多さから「情報もググりやすい」のでおすすめです)

 

そのため、使用されているWordPress環境が…

  • 無料プラグイン「Classic Editor」を有効化していない
  • または、AFFINGERに付属の「Gutenbergプラグイン2」を有効化している

といった状態だと、「画面のデザインや設定方法が当ページの内容と異なる」可能性がありますのでご注意ください

 

なお「Classic Editor」の有効化手順は、下記のステップとなります(一瞬です)

  1. WordPress管理画面から、左側の プラグイン > 新規追加 を順にクリック
  2. 右上の検索フォームに「Classic Editor」と入力し、表示された「Classic Editor」の インストール > 有効化 を順にクリック 

「クラシックエディタとグーテンベルグってなに…?」という場合は、こちらで1から解説しています ↓ ※重要です

WordPressクラシックエディタ・グーテンベルグとは?Classic Editorの導入方法【ワードプレスブログ「完全初心者」ガイド/第4章/No.6】
WordPressクラシックエディタ・グーテンベルグとは?Classic Editorの導入方法【ワードプレスブログ「完全初心者」ガイド/第4章/No.6】

続きを見る

 

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ページです

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

 

あずき猫 - Azuki Cat

猫です。独立5年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ニャー!!!

-WORDPRESS