WORDPRESS

【2020年】ワードプレスでデザイン(=カスタマイズ)をセットしよう!【あずきのWordPressブログガイド/第6章TOP】

あずきのWordPressブログガイド 第6章「デザイン編」TOP アイキャッチ



あずきです🐥

あずきのWordPressブログ「完全初心者」ガイド、その第6章にあたる今回は…

ワードプレスで「デザイン」をセットしよう

です

まず大前提として、「どのテーマを使ってるか?」次第で、カスタマイズ可能な範囲やその設定方法は変わってきます

ただ、ベースになる手順はどのWordPressテーマでもわりと共通だよ!

この第6章では、当ブログで愛用してるテーマ「WING(AFFINGER5)」をもとに…

  • まず覚えておきたい、デザイン設定の基本
  • 個人的におすすめなデザイン設定例

を解説していきます

で、具体的には次の「4つのステップ」です

  1. 「メニュー」の設定
  2. 「ウィジェット」の設定
  3. 「カスタマイズ」の設定
  4. 「テーマごと」の管理設定

さっそく見ていきましょー🐥

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

ACTION AFFINGER6 バナー 01-300px

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

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

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

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

 

About me

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

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

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

当ブログのWordPress環境

第6章:WordPressでデザインをセットしよう!【メニュー/ウィジェット/カスタマイズ/テーマごとの管理】

ステップ①:「メニュー」の設定

WordPress ヘッダー a-01

 

ヘッダー&フッターメニューの作成

AFFINGER5で「ヘッダー&フッターメニュー」を作成する手順 アイキャッチ
【スマホ用もあり】AFFINGER5で「ヘッダー&フッターメニュー」を作成する手順【WordPressブログ】

続きを見る

 

スマホ用スライドメニューの作成

AFFINGER5で「スマホ用スライドメニュー」を作成する手順 アイキャッチ
AFFINGER5で「スマホ用スライドメニュー」を作成する手順【WordPressブログ】

続きを見る

 

 

ステップ②:「ウィジェット」の設定

WordPress ヘッダー a-02

 

ウィジェットを使った「カテゴリー一覧」の設置

【AFFINGER5】ブログのサイドバーに、「カテゴリー一覧」を設置する方法 アイキャッチ
【AFFINGER5】ブログのサイドバーに、「カテゴリー一覧」を設置する方法【WordPressウィジェット】

続きを見る

 

プロフィールの作成と、ウィジェットを使ったサイドバーへの設置

▼ プロフィールの作成 ▼

【AFFINGER5】ブログの「プロフィール用ボックス」おすすめな作り方 アイキャッチ
【AFFINGER5】ブログの「プロフィール用ボックス」おすすめな作り方【サイドバーウィジェット・記事内】

続きを見る

 

▼ プロフィールのサイドバーへの設置 ▼

【AFFINGER5】ブログのサイドバーに、「プロフィール」などテキストや画像を設置する方法 アイキャッチ
【AFFINGER5】ブログのサイドバーに、「プロフィール」などテキストや画像を設置する方法【WordPressウィジェット】

続きを見る

 

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

ACTION AFFINGER6 バナー 01-300px

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

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

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

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

ステップ③:「カスタマイズ」の設定

WordPress ヘッダー a-03

 

カスタマイズについては項目がやや多いので、大きく…

  • 「サイト全体」編
  • 「記事ページ」編

この2つにわけて見ていきます🐣

 

カスタマイズ:「サイト全体」編

「ヘッダー・フッター・背景」エリアの色設定
WING AFFINGER5で「ヘッダー・フッター・背景」の色設定をカスタマイズする手順 アイキャッチ
WING AFFINGER5で「ヘッダー・フッター・背景」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「ヘッダーメニュー」エリアの色設定
WING AFFINGER5で「ヘッダーメニューの色設定」をカスタマイズする手順 アイキャッチ
WING AFFINGER5で「ヘッダーメニューの色設定」をカスタマイズする手順【WordPressブログ】

続きを見る

 

「スマホ用スライドメニュー」エリアの色設定&デザイン設定
AFFINGER5で「スマホ用スライドメニュー」の色とデザイン設定をカスタマイズする手順 アイキャッチ
AFFINGER5で「スマホ用スライドメニュー」の色とデザイン設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「ウィジェット」エリアの色設定
WING AFFINGER5で「ウィジェットの色設定」をカスタマイズする手順 アイキャッチ
WING AFFINGER5で「ウィジェットの色設定」をカスタマイズする手順【WordPressブログ】

続きを見る

 

「新着記事&関連記事」エリアのカスタマイズ
AFFINGER5で、「新着&関連記事」一覧エリアをカスタマイズする手順 アイキャッチ
AFFINGER5で、「新着&関連記事」一覧エリアをカスタマイズする手順【WordPressブログ】

続きを見る

 

 

カスタマイズ:「記事ページ」編

「記事ページ」のカスタマイズについては、いざWordPressで記事を作ってみないとイメージが沸かないと思うので、この次の章にあたる…

あずきのWordPressブログガイド 第7章「記事編」TOP アイキャッチ
【2020年】ワードプレスで記事を作って投稿しよう!【あずきのWordPressブログガイド/第7章TOP】

続きを見る

↑ こちらの「第7章」と並行して進めていくのがおすすめです

 

「記事タイトル&見出し」の色設定&デザイン設定
WING AFFINGER5で「記事タイトル&見出し」の色とデザイン設定をカスタマイズする手順 アイキャッチ
WING AFFINGER5で「記事タイトル&見出し」の色とデザイン設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「本文&リンクテキスト」の色設定
AFFINGER5で「本文&リンクテキスト」の色設定をカスタマイズする手順 アイキャッチ
AFFINGER5で「本文&リンクテキスト」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「カテゴリー&投稿日時&ぱんくずリスト」の色設定
AFFINGER5で「カテゴリー&投稿日時&パンくずリスト」の色設定をカスタマイズする手順 アイキャッチ
AFFINGER5で「カテゴリー&投稿日時&パンくずリスト」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「箇条書きボックス」の色設定
AFFINGER5で「箇条書きボックス」の色設定をカスタマイズする手順 アイキャッチ
AFFINGER5で「箇条書きボックス」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「Webアイコン」の色設定
AFFINGER5で「Webアイコン」の色設定をカスタマイズする手順 アイキャッチ
AFFINGER5で「Webアイコン」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

\ 国内シェアNo.1 /

17年以上積み重ねられた安心と実績

エックスサーバー

※2020年11月時点、dataprovider.com 調べ(詳細

【ドメイン永久無料】の特典 & さらに今なら【初期費用0円】となるお得なキャンペーンも実施中!

 

「会話吹き出し」の色&デザイン設定
AFFINGER5で「会話吹き出し」の色&デザイン設定をカスタマイズする手順 アイキャッチ
AFFINGER5で「会話吹き出し」の色&デザイン設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「表」の枠線や背景色の初期設定
AFFINGER5で、「表」の枠線や背景色の初期設定をカスタマイズする手順 アイキャッチ
AFFINGER5で、「表」の枠線や背景色の初期設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「ブログカード」の抜粋表示の設定
AFFINGER5で、「ブログカード」の抜粋表示の設定をカスタマイズする手順 アイキャッチ
AFFINGER5で、「ブログカード」の抜粋表示の設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「リンクボタン」の色設定
AFFINGER5で、「リンクボタン」の色設定をカスタマイズする手順 アイキャッチ
AFFINGER5で、「リンクボタン」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

各種「ショートコード」のカスタマイズ設定
AFFINGER5の各種「ショートコード」のカスタマイズ手順 アイキャッチ
AFFINGER5の各種「ショートコード」のカスタマイズ手順を解説【WordPressブログ】

続きを見る

 

 

ステップ④:「テーマごと」の管理設定

WordPress ヘッダー a-04

 

このブログでも愛用してるテーマ「WING(AFFINGER5)」専用の設定画面「AFFINGER5 管理」について、そのおすすめな設定方法を解説していきます

具体的には、大きく…

  • 「AFFINGER5 管理」前編 → デザイン / トップページ / 投稿・固定記事 / ヘッダー / メニュー
  • 「AFFINGER5 管理」後編 → おすすめ記事一覧 / SNS / SEO / Google連携・広告 / 会話・ファビコン / その他

この2つにわけて見ていきますね🐣

 

「AFFINGER5 管理」前編 → デザイン / トップページ / 投稿・固定記事 / ヘッダー / メニュー
「AFFINGER5 管理」のおすすめ設定例:前編 アイキャッチ
「AFFINGER5 管理」のおすすめ設定例を全公開:前編【デザイン/トップページ/投稿・固定記事/ヘッダー/メニュー】

続きを見る

 

「AFFINGER5 管理」後編 → おすすめ記事一覧 / SNS / SEO / Google連携・広告 / 会話・ファビコン / その他
「AFFINGER5 管理」のおすすめ設定例:後編 アイキャッチ
「AFFINGER5 管理」のおすすめ設定例を全公開:後編【おすすめ記事一覧/SNS/SEO/Google連携・広告/会話・ファビコン/その他】

続きを見る

 

「第6章」についてはこれで完了です

大変お疲れさまでした♪

あずき🐥

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

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

 

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

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

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

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

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

 

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

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

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

続きを見る

今回の記事はこちらの章に属しています

 第6章 デザイン 編          

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

 第7章 投稿 編            

全9章のTOPです

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

 

About me

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

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

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

-WORDPRESS