WORDPRESS

【2022年11月】AFFINGER6のおすすめなカスタマイズ設定方法まとめ【ワードプレスブログ「完全初心者」ガイド/第6章TOP】

AFFINGER6のおすすめなカスタマイズ設定方法まとめ【ワードプレスブログ「完全初心者」ガイド/第6章TOP】

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

 

あずきのワードプレスブログ「完全初心者」ガイド、【第6章】にあたる今回のテーマは…

WordPressで「デザイン」をセットしよう

になります

 



 

まずWordPressにおける「各種デザインの初期設定」というのは、実際に使用されている「WordPressテーマ」によって…

  • 設定画面の仕様
  • 設定項目の種類
  • カスタマイズ可能な範囲

などが、当然変わってくるんですね

 

で、今回は当ブログガイドの第3章「テーマ」編でもご紹介していて…

WordPressで「本格的」にブログを作っていきたい!

ブログに広告を貼ったりして「収益化」もしていきたい!

といった【本気でブログをやっていきたい方】に超おすすめな高性能&人気テーマ「ACTION AFFINGER6」を前提として、初心者さん向けに1から徹底解説していきます

ワードプレスの超有名テーマ!

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

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

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

続きを見る

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

また!

 

この【第6章】でご紹介していく各種デザインのカスタマイズについては、専業ブロガーとしての経験を活かして…

 

実際にブログを立ち上げるたびに行っている時系列

 

をベースにし、網羅性よりも ”実践性” を特に重視した内容になっています🐥

ということで、さっそく見ていこー!
 

 

※お探しの内容がピンポイントで決まっている場合は、
こちらの【目次】を開いてジャンプしていただくとスムーズです ↓

【2022年11月】AFFINGER6のおすすめなカスタマイズ設定方法まとめ【ワードプレスブログ「完全初心者」ガイド/第6章TOP】

WordPress ヘッダー a-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】

続きを見る

 

ACTION AFFINGER6「ヘッダー・フッター・全体」背景色のカスタマイズ方法

 

実際の画面で見ると、まず「ヘッダー背景色」が…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 top-01-a

↓(設定後の一例)

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 top-01-b
 

つづいて「フッター背景色」が…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 top-02-a

↓(設定後の一例)

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 top-02-b
 

そして「全体の背景色」が…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 top-03-a

↓(設定後の一例)

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 top-03-b

上記のエリアをそれぞれ指します

ACTION AFFINGER6「サイトタイトルの文字色設定」をカスタマイズする方法

 

WordPressにおける「サイトタイトル」は、ブログのヘッダー(=最上部)エリアに表示される…

AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法 top-01

↑ こちらの【ブログ全体におけるタイトル名】を指します

 

で、具体的には…

  • PC画面用
  • スマホ画面用

で、個別にそれぞれカスタマイズしていく形です

 

ちなみに今回の設定では、この「サイトタイトル」とセットで表示される…

キャッチフレーズ

についても、サイトタイトルにあわせて文字色が変更されます

キャッチフレーズは、上画像だと「Just another…」の部分だね!
 

補足

サイトタイトル&キャッチフレーズにおける「そのほかのカスタマイズ設定」についても、補足でご紹介しています

 

なお、サイトタイトル&キャッチフレーズの表示を「中央揃え」にする方法だけ若干わかりづらいので、そちらはこの次のパートをどうぞ(別途記事にしています)

 

関連

「そもそもサイトタイトル名とかって、どうやって変更するの?」という場合は、こちらから ↓

WordPressサイトタイトル(ブログ名)の変更方法。キャッチフレーズも【ワードプレスブログ「完全初心者」ガイド】
【2022年】WordPressサイトタイトル(ブログ名)の変更方法。キャッチフレーズも【ワードプレスブログ「完全初心者」ガイド】

続きを見る

ACTION AFFINGER6「サイトタイトルの位置」を”中央揃え”にカスタマイズする方法

 

サイトタイトルの”中央揃え”とは、実際の画面上で見ると…

AFFINGER6「サイトタイトル」の位置設定を”中央揃え”にカスタマイズするやり方 top-01

↓(設定後の一例)

AFFINGER6「サイトタイトル」の位置設定を”中央揃え”にカスタマイズするやり方 top-02

上記のイメージです

サイトタイトルと一緒に表示されてる「キャッチフレーズ」も、一緒に中央揃えになるよ!

ACTION AFFINGER6「ヘッダー&フッターメニュー」の作り方

 

まず、前者の「ヘッダーメニュー」とは…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 top-01

↑ こちらの ”最上部エリア” に設置するメニューのこと

文字通り「ヘッド=頭側」のメニューという意味だね!
 

そして後者の「フッターメニュー」とは、反対に…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 top-02

↑ こちらの ”最下部エリア” に設置するメニューを指します

こっちはフットなので足側!

ACTION AFFINGER6「ヘッダーメニュー」のカスタマイズ方法

 

ACTION AFFINGER6では、「ヘッダーメニュー」の色設定を…

  • PC画面用
  • スマホ画面用

で個別に指定していく仕様ですが、具体的には【PC画面用】のヘッダーメニューが…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 top-01-a

↓(設定後の一例)

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 top-01-b
 

そして【スマホ画面用】のヘッダーメニューが…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 top-02-a

↓(設定後の一例)

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 top-02-b

上記のエリアをそれぞれ指します🐥

ACTION AFFINGER6「スマホスライドメニュー」の作り方とカスタマイズ方法

 

ACTION AFFINGER6における「スマホスライドメニュー」とは、スマホ画面の左上 or 右上に表示される…

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 top-01

↑ こちらのアイコン(左上の三本線!)を指し、またアイコンをタップすると…

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 top-02

↑ このように、メニューが【スライド表示】されるタイプになります🐥

ACTION AFFINGER6「カテゴリー・投稿日時・ぱんくずリスト」のカスタマイズ方法

 

実際の画面上で見ると、まず「カテゴリー」が…

AFFINGER6「カテゴリー&投稿日時&ぱんくずリストの色設定」のカスタマイズ方法 top-01
 

つづいて「投稿日時」が…

AFFINGER6「カテゴリー&投稿日時&ぱんくずリストの色設定」のカスタマイズ方法 top-02
 

そして「ぱんくずリスト」が…

AFFINGER6「カテゴリー&投稿日時&ぱんくずリストの色設定」のカスタマイズ方法 top-03

上記の箇所をそれぞれ指します🐥

 

ACTION AFFINGER6「関連記事」一覧の表示設定とカスタマイズ方法

 

「関連記事」とは、記事ページごとの末尾エリアに表示される…

AFFINGER6「関連記事」一覧の表示設定とカスタマイズ方法 top-01

↑ こうした…

「その記事と関連性の高いページ」がピックアップされた記事一覧

を指します

関連性が高そうなページを ”自動” でピックアップしてくれるよ!
 

また、ACTION AFFINGER6における「関連記事」は…

  • 見出しのタイトル名(例:関連記事 / あわせてどうぞ)
  • 表示する件数
  • そもそも「関連記事」を表示するかどうか?

といった基本的な設定から…

  • 見出しの色・デザイン設定

まで、任意の内容にカスタマイズすることも可能です

ACTION AFFINGER6「サイドバーウィジェット」の作り方とカスタマイズ方法

 

「サイドバーウィジェット」とは、サイドバー(ブログ右側の列)エリアに表示される…

AFFINGER6「サイドバー・ウィジェットタイトルの色&デザイン設定」のカスタマイズ方法 top-01-a

↓(設定後の一例)

AFFINGER6「サイドバー・ウィジェットタイトルの色&デザイン設定」のカスタマイズ方法 top-01-b

上記の箇所となります🐥

 

で、具体的には3つのステップで解説していきます

  1. デフォルトで表示されている「サイドバーウィジェット」の消し方
  2. 「サイドバーウィジェット」の作り方
    ※検索フォーム、カテゴリーを例に解説!
  3. 「サイドバーウィジェット」のカスタマイズ設定方法
    ※「余白スペース」の調整や、検索フォームのカスタマイズまで!

ACTION AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法

 

ACTION AFFINGER6における「プロフィールカード」とは…

AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法 top-01

↑ このようなデザインのプロフィールを指します

ACTION AFFINGER6「サイドバーウィジェット」をスマホ側でも表示させる方法

 

WordPressにおける「サイドバーウィジェット」というのは、まず「PC」上だとブログ画面の【右列】にあたる…

AFFINGER6「サイドバーウィジェットをスマホ側でも表示させる方法」 top-01

↑ こちらのエリア(赤枠部分)に設置するウィジェットを指しますが、ACTION AFFINGER6ではこの「サイドバーウィジェット」が…

スマホ側だと非表示

に初期設定されているんですね

 

設置したサイドバーウィジェットを「スマホ側」でも表示させることは可能ですが、スマホの場合はあくまで、PCのような画面【右列】のエリアではなく…

AFFINGER6「サイドバーウィジェットをスマホ側でも表示させる方法」 top-02-b

↑ このように、全ページの…

コンテンツおわり

のエリアに追加される形です

つまり、「フッターエリア(最下部)のすぐ上側」に設置されるよ!

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

 

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つでカスタマイズすることもできます

ACTION AFFINGER6「ヘッダーエリア全体に背景画像を全面表示」させるやり方

 

「ヘッダーエリア全体に背景画像を全面表示」とは、実際の画面で見ると…

 

HOME(全体のTOPページ)における表示例 ↓

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 top-01-a

 

下層(記事ごとのページ)における表示例 ↓

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 top-01-b

 

スマホにおける表示例 ↓

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 top-01-c

 

このように、ヘッダー画像上に…

「ヘッダーメニュー」や「サイトタイトル」が透過表示されている状態

を指します

通常の表示スタイルよりも、”世界観” をぐんと演出できておすすめ!
 

もちろん、背景画像の表示される幅を…

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 top-02-a

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 top-02-b

 

このように、「任意の高さに調節」したり「透過表示の適用範囲を広げる」といったことも可能です

人気記事

 

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

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

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

 

あずき猫 - Azuki Cat

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

-WORDPRESS