WORDPRESS

【2021年】ACTION AFFINGER6のデザインカスタマイズで”超実践的”なポイントを1から徹底解説【あずきのワードプレスブログ「完全初心者」ガイド/第6章】

ACTION AFFINGER6のデザインカスタマイズで”超実践的”なポイントを1から徹底解説
 

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

 

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

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

です

 

まずWordPressの各種デザインというのは、お使いの「WordPressテーマ」によって…

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

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

 

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

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

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

といった【本気でブログをやっていきたい方】に超おすすめな高性能&人気テーマ、「ACTION AFFINGER6」を前提として解説していきます

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

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

また今回ご紹介していく各種設定については、専業ブロガーとしての経験を活かして…

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

をベースにし、網羅性よりも「実践性」を特に重視しています

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

 

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

Contents

【2021年】ACTION AFFINGER6のデザインカスタマイズで”超実践的”なポイントを1から徹底解説【あずきのワードプレスブログ「完全初心者」ガイド/第6章】

WordPress ヘッダー a-01

 

ACTION AFFINGER6「ヘッダー・フッター・全体の背景色設定」をカスタマイズしたい

 

まず、「ヘッダー(最上部エリア)」の背景色というのは…

 

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

 

つづいて、「フッター(最下部エリア)」の背景色が…

 

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

 

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

 

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

 

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

赤枠で囲ったとこだよ!

ACTION AFFINGER6「サイトタイトルの文字色設定」をカスタマイズしたい

 

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

 

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

 

↑ こちらの【ブログ全体におけるタイトル名】を指し、またこの設定では「サイトタイトル」とセットで表示される…

キャッチフレーズ

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

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

ACTION AFFINGER6「サイトタイトルの位置」を”中央揃え”にカスタマイズしたい

 

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

 

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

 

↑ このようなイメージです

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

ACTION AFFINGER6「ヘッダー&フッターメニュー」を作りたい

 

まず【ヘッダーメニュー】とは…

 

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

 

↑ こちらの、ブログ「最上部」エリアに設置するメニューのこと

ヘッド(頭側)のメニューという意味だね!
 

そして【フッターメニュー】とは、反対に…

 

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

 

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

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

ACTION AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」をカスタマイズしたい

 

ヘッダーメニューの「背景色・枠線色・文字色」とは、【PC画面】だと…

 

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

↓(設定後の一例)

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

 

また【スマホ画面】で見ると…

 

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

↓(設定後の一例)

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

 

↑ こちらのエリアをそれぞれ指します

ACTION AFFINGER6「スマホスライドメニュー」を作り、その「色・位置・デザイン設定」をカスタマイズしたい

 

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

 

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

 

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

 

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

 

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

ACTION AFFINGER6「カテゴリー&投稿日時&ぱんくずリストの色設定」をカスタマイズしたい

 

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

 

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

 

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

 

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

 

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

 

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

 

↑ こちらの箇所をそれぞれ指します

ACTION AFFINGER6「サイドバー・ウィジェットタイトルの色&デザイン設定」をカスタマイズしたい

 

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

 

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

 

↓(設定後の一例)

 

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

 

↑ こちらの箇所を指します

ACTION AFFINGER6「不要なサイドバーウィジェット」を非表示にしたい

 

「サイドバーウィジェット」というのは、実際の画面上で見ると…

 

AFFINGER6「不要なサイドバーウィジェット」の消し方 top-01-a

 

↓(設定後の一例)

 

AFFINGER6「不要なサイドバーウィジェット」の消し方 top-01-b

 

上記のエリアを指します

画面右側の、赤枠で囲ったとこ!
 

で、ACTION AFFINGER6の初期状態では…

  • 検索フォーム
  • 最近の投稿
  • 最近のコメント
  • アーカイブ
  • カテゴリー
  • メタ情報

という「6つ」のウィジェットがサイドバーエリアに設置されていますが、このなかで特に必要のないウィジェットは【非表示】にしておいた方が、ブログの構成もスッキリしておすすめです

もちろん「やっぱり戻したい」と思ったら、いつでも再設置できるよ!

ACTION AFFINGER6「プロフィールカード(サイドバー)」を作り、色やデザインをカスタマイズしたい

 

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

 

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

 

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

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

 

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

 

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

 

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

スマホ側だと非表示

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

 

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

 

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

 

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

コンテンツおわり

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

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

第6章「デザイン」編における、そのほかの項目について【随時更新の予定です】

 

※そのほかの項目につきましては、現在「WING AFFINGER5」版から「ACTION AFFINGER6」版に工事中です。 あしからずご了承ください(随時更新予定です)

 

次の章はこちらからどうぞ

 第7章 記事投稿 編          

全9章のTOPページです

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

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

 

   ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

   ✔ 時間のかかる面倒なカスタマイズも「クリック1つ」でさくさく実現!

   ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

-WORDPRESS