AFFINGER6のカスタマイズでおすすめな機能＆手順まとめ！WordPressデザインの実践的な初期設定を１から徹底解説【あずきのワードプレスブログ「完全初心者」ガイド／第６章】

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

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

になります

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

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

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

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

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

また！

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

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

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

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

2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、

・役に立ちました！
・わかりやすかったです！

みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF

— あずき鈴々 - suzu azuki (@azuki_rinrin) July 13, 2020

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

AFFINGER6のカスタマイズでおすすめな機能＆手順まとめ！WordPressデザインの実践的な初期設定を１から徹底解説【あずきのワードプレスブログ「完全初心者」ガイド／第６章】

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

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

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

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

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

赤枠で囲ったとこだよ！

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

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

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

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

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

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

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

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

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

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

「ヘッダーメニュー」とは…

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

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

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

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

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

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

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

↓（設定後の一例）

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

↓（設定後の一例）

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

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

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

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

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

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

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

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

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

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

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

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

↑ こうした…

を指します

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

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

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

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

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

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

↓（設定後の一例）

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

ACTION AFFINGER6「不要なサイドバーウィジェット」を非表示にする方法

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

↓（設定後の一例）

上記のエリアを指します

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

のこと

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

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

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

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

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

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

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

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

スマホにおける表示例 ↓

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

を指します

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

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

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

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

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