専業ブロガー5年目のあずきです🐥
あずきのワードプレスブログ「完全初心者」ガイド、【第6章】にあたる今回のテーマは…
WordPressで「デザイン」をセットしよう
になります
まずWordPressにおける「各種デザインの初期設定」というのは、実際に使用されている「WordPressテーマ」によって…
- 設定画面の仕様
- 設定項目の種類
- カスタマイズ可能な範囲
などが、当然変わってくるんですね
で、今回は当ブログガイドの第3章「テーマ」編でもご紹介していて…
WordPressで「本格的」にブログを作っていきたい!
ブログに広告を貼ったりして「収益化」もしていきたい!
といった【本気でブログをやっていきたい方】に超おすすめな高性能&人気テーマ「ACTION AFFINGER6」を前提として、初心者さん向けに1から徹底解説していきます

\ 当ブログで愛用しています /
インフォトップ ワードプレステーマ売上
第1位※
すごいもくじLITE
の限定特典キャンペーンも実施中!!!
公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連:【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】
-
【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】
続きを見る
※2021年発表Infotop Affidemy
▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼
ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで
-
ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで
続きを見る
- 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
画像付きでまるっと解説しています - 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)
また!
この【第6章】でご紹介していく各種デザインのカスタマイズについては、専業ブロガーとしての経験を活かして…
実際にブログを立ち上げるたびに行っている時系列
をベースにし、網羅性よりも ”実践性” を特に重視した内容になっています🐥

2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました!
・わかりやすかったです!みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき鈴々 - suzu azuki (@azuki_rinrin) July 13, 2020
※お探しの内容がピンポイントで決まっている場合は、
こちらの【目次】を開いてジャンプしていただくとスムーズです ↓
Contents
- AFFINGER6のカスタマイズでおすすめな機能&手順まとめ!WordPressデザインの実践的な初期設定を1から徹底解説【あずきのワードプレスブログ「完全初心者」ガイド/第6章】
- ACTION AFFINGER6「ヘッダー・フッター・全体」背景色のカスタマイズ方法
- ACTION AFFINGER6「サイトタイトルの文字色設定」をカスタマイズする方法
- ACTION AFFINGER6「サイトタイトルの位置」を”中央揃え”にカスタマイズする方法
- ACTION AFFINGER6「ヘッダー&フッターメニュー」の作り方
- ACTION AFFINGER6「ヘッダーメニュー」のカスタマイズ方法
- ACTION AFFINGER6「スマホスライドメニュー」の作り方とカスタマイズ方法
- ACTION AFFINGER6「カテゴリー・投稿日時・ぱんくずリスト」のカスタマイズ方法
- ACTION AFFINGER6「関連記事」一覧の表示設定とカスタマイズ方法
- ACTION AFFINGER6「サイドバー・ウィジェットタイトル」のカスタマイズ方法
- ACTION AFFINGER6「不要なサイドバーウィジェット」を非表示にする方法
- ACTION AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法
- ACTION AFFINGER6「サイドバーウィジェット」をスマホ側でも表示させる方法
- ACTION AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法
- ACTION AFFINGER6「ヘッダーエリア全体に背景画像を全面表示」させるやり方
AFFINGER6のカスタマイズでおすすめな機能&手順まとめ!WordPressデザインの実践的な初期設定を1から徹底解説【あずきのワードプレスブログ「完全初心者」ガイド/第6章】
ACTION AFFINGER6「ヘッダー・フッター・全体」背景色のカスタマイズ方法
まず、「ヘッダー(最上部エリア)」の背景色というのは…
つづいて、「フッター(最下部エリア)」の背景色が…
そして、「全体」の背景色が…
上記のエリアをそれぞれ指します

ACTION AFFINGER6「サイトタイトルの文字色設定」をカスタマイズする方法
WordPressにおける「サイトタイトル」は、ブログのヘッダー(最上部)エリアに表示される…
↑ こちらの【ブログ全体におけるタイトル名】を指し、またこの設定では「サイトタイトル」とセットで表示される…
キャッチフレーズ
についても、サイトタイトルにあわせて文字色が変更されます

ACTION AFFINGER6「サイトタイトルの位置」を”中央揃え”にカスタマイズする方法
サイトタイトルの”中央揃え”とは、実際の画面上で見ると…
↑ このようなイメージです

ACTION AFFINGER6「ヘッダー&フッターメニュー」の作り方
「ヘッダーメニュー」とは…
↑ こちらの、ブログ「最上部」エリアに設置するメニューのこと

そして【フッターメニュー】とは、反対に…
↑ こちらの「最下部」エリアに設置するメニューを指します

ACTION AFFINGER6「ヘッダーメニュー」のカスタマイズ方法
ヘッダーメニューの「背景色・枠線色・文字色」とは、【PC画面】だと…
↓(設定後の一例)
また【スマホ画面】で見ると…
↓(設定後の一例)
↑ こちらのエリアをそれぞれ指します
ACTION AFFINGER6「スマホスライドメニュー」の作り方とカスタマイズ方法
ACTION AFFINGER6における「スマホスライドメニュー」とは、スマホ画面の左上もしくは右上に表示される…
↑ こちらのアイコン(三本線のところ!)を指し、またアイコンをタップすると…
↑ このように、メニューが【スライド表示】されるタイプになります
ACTION AFFINGER6「カテゴリー・投稿日時・ぱんくずリスト」のカスタマイズ方法
実際の画面上で見ると、まず「カテゴリー」が…
つづいて「投稿日時」が…
そして「ぱんくずリスト」が…
↑ こちらの箇所をそれぞれ指します
\ 「なぜ売れないか?」を徹底解析 /
結果が見えるサイト運営に
AffiliateRun~なぜ売れないか?
PDFマニュアル付き!
公式:「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連:WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】
-
WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】
続きを見る
※別売りのWordPressテーマ「ACTION AFFINGER6」最新版が必要です
ACTION AFFINGER6「関連記事」一覧の表示設定とカスタマイズ方法
ACTION AFFINGER6における「関連記事」とは、記事ページごとの末尾エリアに表示される…
↑ こうした…
「その記事と関連性の高いページ」がピックアップされた記事一覧
を指します

また、ACTION AFFINGER6における「関連記事」は…
- 見出しのタイトル名(例:関連記事 / あわせてどうぞ)
- 表示する件数
- そもそも「関連記事」を表示するかどうか
といった基本的な設定から…
- 見出しの色・デザイン設定
まで、任意の内容にカスタマイズすることも可能です
ACTION AFFINGER6「サイドバー・ウィジェットタイトル」のカスタマイズ方法
「サイドバー・ウィジェットタイトル」とは、サイドバー(ブログ右側の列)エリアに表示される…
↓(設定後の一例)
↑ こちらの箇所を指します
ACTION AFFINGER6「不要なサイドバーウィジェット」を非表示にする方法
「サイドバーウィジェット」というのは、実際の画面上で見ると…
↓(設定後の一例)
上記のエリアを指します

で、ACTION AFFINGER6の初期状態では…
- 検索フォーム
- 最近の投稿
- 最近のコメント
- アーカイブ
- カテゴリー
- メタ情報
という「6つ」のウィジェットがサイドバーエリアに設置されていますが、このなかで特に必要のないウィジェットは【非表示】にしておいた方が、ブログの構成もスッキリしておすすめです

ACTION AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法
ACTION AFFINGER6における「プロフィールカード」とは…
↑ このようなデザインのプロフィールを指します
ACTION AFFINGER6「サイドバーウィジェット」をスマホ側でも表示させる方法
WordPressにおける「サイドバーウィジェット」というのは、まず「PC」上だとブログ画面の【右列】にあたる…
↑ こちらのエリア(赤枠部分)に設置するウィジェットを指しますが、ACTION AFFINGER6ではこの「サイドバーウィジェット」が…
スマホ側だと非表示
に初期設定されているんですね
設置したサイドバーウィジェットを「スマホ側」でも表示させることは可能ですが、スマホの場合はあくまで、PCのような画面【右列】のエリアではなく…
↑ このように、全ページの…
コンテンツおわり
のエリアに追加される形です

ACTION AFFINGER6「ヘッダーカード」の作り方とカスタマイズ方法
ACTION AFFINGER6における「ヘッダーカード」というのは…
こうした、ブログのヘッダー(最上部)エリアに表示できる…
「カード型」リンク
のこと
ヘッダーという目に付きやすい場所に、「おすすめ記事」や「各カテゴリーのTOPページ」などをピックアップするのに便利な機能です

またACTION AFFINGER6では、上画像のようなデフォルトデザインから…
このように、ヘッダーカードの「表示デザイン」をクリック1つでカスタマイズすることもできます
ACTION AFFINGER6「ヘッダーエリア全体に背景画像を全面表示」させるやり方
「ヘッダーエリア全体に背景画像を全面表示」とは、実際の画面で見ると…
HOME(全体のTOPページ)における表示例 ↓
下層(記事ごとのページ)における表示例 ↓
スマホにおける表示例 ↓
このように、ヘッダー画像上に…
「ヘッダーメニュー」や「サイトタイトル」が透過表示されている状態
を指します

もちろん、背景画像の表示される幅を…
このように、「任意の高さに調節」したり「透過表示の適用範囲を広げる」といったことも可能です
人気記事
あずきのワードプレスブログ「完全初心者」ガイド!
”全8章” の総合TOPページです
\ 「なぜ売れないか?」を徹底解析 /
結果が見えるサイト運営に
✔ よく使用する文章や画像、広告リンクを「テンプレート化」して使い回せる!
✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬!
✔ 広告の「クリック回数」や「クリックされたページ」などを自動計測!
AffiliateRun~なぜ売れないか?
PDFマニュアル付き!
公式:「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連:WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】
-
WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】
続きを見る
※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です
About me
suzu azuki
あずき鈴々
独立5年目の専業ブロガー / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にいるので覗いてもらえると嬉しいです^^