WORDPRESS

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

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

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

 

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

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

です

 

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

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

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

 

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

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

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

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

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

＼　当ブログで愛用しています　／

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

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

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

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

 

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

▼　ACTION AFFINGER6の購入・導入手順についてはこちらをどうぞ　▼

ACTION AFFINGER6の購入手順＆WordPressへの導入方法
【2021年】ACTION AFFINGER6の購入手順＆WordPressへの導入方法を、初心者向けに1から解説【テーマ有効化までのやり方】

続きを見る

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

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

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

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

 

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

Contents

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

WordPress ヘッダー a-01

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

赤枠で囲ったとこだよ！

▼　続きはこちらから　▼

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法
AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】

続きを見る

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

 

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

 

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

 

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

キャッチフレーズ

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

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

▼　続きはこちらから　▼

AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法
【スマホ用も】AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】

続きを見る

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

 

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

 

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

 

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

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

▼　続きはこちらから　▼

AFFINGER6「サイトタイトル」の位置設定を”中央揃え”にカスタマイズするやり方
AFFINGER6「サイトタイトル」の位置設定を”中央揃え”にカスタマイズするやり方を初心者向けに解説【ACTION／WordPressブログ】

続きを見る

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

 

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

 

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

 

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

ヘッド（頭側）のメニューという意味だね！
 

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

 

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

 

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

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

▼　続きはこちらから　▼

AFFINGER6「ヘッダー＆フッターメニュー」の作り方
【スマホ用も】AFFINGER6「ヘッダー＆フッターメニュー」の作り方を初心者向けに解説【ACTION／WordPressブログ】

続きを見る

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

 

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

 

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

↓（設定後の一例）

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

 

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

 

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

↓（設定後の一例）

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

 

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

▼　続きはこちらから　▼

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法
【スマホ用も】AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】

続きを見る

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

 

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

 

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

 

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

 

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

 

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

▼　続きはこちらから　▼

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法
AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】

続きを見る

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

▼　続きはこちらから　▼

AFFINGER6「カテゴリー＆投稿日時＆ぱんくずリストの色設定」のカスタマイズ方法
AFFINGER6「カテゴリー＆投稿日時＆ぱんくずリストの色設定」のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】

続きを見る

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

 

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

 

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

 

↓（設定後の一例）

 

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

 

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

▼　続きはこちらから　▼

AFFINGER6「サイドバー・ウィジェットタイトルの色＆デザイン設定」のカスタマイズ方法
AFFINGER6「サイドバー・ウィジェットタイトルの色＆デザイン設定」のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】

続きを見る

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

 

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

 

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

 

↓（設定後の一例）

 

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

 

上記のエリアを指します

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

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

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

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

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

▼　続きはこちらから　▼

AFFINGER6「不要なサイドバーウィジェット」の消し方
AFFINGER6「不要なサイドバーウィジェット」の消し方を初心者向けに解説。コメント・メタ情報等を非表示にするやり方【ACTION／WordPressブログ】

続きを見る

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

 

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

 

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

 

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

▼　続きはこちらから　▼

AFFINGER6「プロフィールカード(サイドバー)」の作り方とカスタマイズ方法
AFFINGER6「プロフィールカード(サイドバー)」の作り方とカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】

続きを見る

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

 

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

 

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

 

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

スマホ側だと非表示

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

 

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

 

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

 

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

コンテンツおわり

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

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

▼　続きはこちらから　▼

AFFINGER6「サイドバーウィジェットをスマホ側でも表示させる方法」
AFFINGER6「サイドバーウィジェットをスマホ側でも表示させる方法」を初心者向けに解説【ACTION／WordPressブログ】

続きを見る

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

 

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

 

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

　第７章　記事投稿 編　　　　　　　　　　

全９章のTOPページです

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

＼　当ブログで愛用しています　／

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

 

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

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

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

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

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

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

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

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

続きを見る

 

この記事タイトルとURLをコピー

-WORDPRESS