WORDPRESS

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

AFFINGER6のカスタマイズでおすすめな機能&手順まとめ!WordPressデザインの実践的な初期設定を1から徹底解説

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

 

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

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

になります

 

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

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

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

 

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

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

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

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

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

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

ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで

ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで
ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで

続きを見る

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

また!

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

 

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

 

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

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

 

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

Contents

AFFINGER6のカスタマイズでおすすめな機能&手順まとめ!WordPressデザインの実践的な初期設定を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「関連記事」一覧の表示設定とカスタマイズ方法

 

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

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

↑ こうした…

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

を指します

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

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

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

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

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

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

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

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

コンテンツおわり

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

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

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ページです

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

\ 「なぜ売れないか?」を徹底解析 /

AFFINGERタグ管理マネージャー&PVモニター バナー 01-1000px

結果が見えるサイト運営に

AFFINGERタグ管理マネージャー4 + PVモニター

 

   ✔ よく使用する文章や画像、広告リンクを「テンプレート化」して使い回せる!

   ✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬!

   ✔ 広告の「クリック回数」「クリックされたページ」などを自動計測!

AffiliateRun~なぜ売れないか?

PDFマニュアル付き!

 

公式:「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット

関連:WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】

WordPressにおける広告リンクの貼り方
WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】

続きを見る

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

About me

あずきアイコン main-01 背景透過

suzu azuki
あずき鈴々

 

独立5年目の専業ブロガー / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にいるので覗いてもらえると嬉しいです^^

-WORDPRESS