WORDPRESS

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

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



あずきです🐥

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

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

です

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

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

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

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

を解説していきます

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

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

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

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

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

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで アイキャッチ
【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで【WordPress】

続きを見る

 

About me

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

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

あずき

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

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

このブログのWordPress環境

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

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

WordPressブログ「完全初心者」ガイド 見出し a-01

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

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

続きを見る

 

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

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

続きを見る

 

リクナビNEXT

30代向け

約85%がリクナビNEXT限定求人

正社員求人は9割以上

無料登録はたった5分で完了!!!

 

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

WordPressブログ「完全初心者」ガイド 見出し a-02

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

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

続きを見る

 

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

▼ プロフィールの作成 ▼

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

続きを見る

 

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

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

続きを見る

 

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

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

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

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

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年以上積み重ねられた安心と実績 ――

XSERVER

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

今なら「ドメイン永久無料」&「初期設定費 3,000円 → 0円」のお得なキャンペーン中!

 

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

続きを見る

 

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

続きを見る

 

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

続きを見る

 

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

続きを見る

 

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

続きを見る

 

リクナビNEXT

30代向け

約85%がリクナビNEXT限定求人

正社員求人は9割以上

無料登録はたった5分で完了!!!

 

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

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章」についてはこれで完了です

大変お疲れさまでした♪

あずき🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

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

WING AFFINGER5

 ✔ 洗練された美しいデザインと、「変幻自在」な圧巻のバリエーション!

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

 ✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備!

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

公式:「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入&導入ステップを画像つきで1から解説

ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで アイキャッチ
【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで【WordPress】

続きを見る

 

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

WordPressブログガイド 第6章「デザイン」編 

次の章はこちら

WordPressブログガイド 第7章「記事」編 

あずきのWordPressブログガイド 総合TOP 

About me

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

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

あずき

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

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ