ワードプレス

【2020年】ワードプレスでデザインをセットしよう!【WordPressブログ完全初心者ガイド/第6章TOP】

WordPressブログ完全初心者ガイド_第6章「ワードプレスでデザインをセットしよう!」_アイキャッチ



あずきです🐥

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

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

です

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

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

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

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

を解説していきます

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

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

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

本気でブログ収益化するなら /

WING AFFINGER5 バナー 02

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

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

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

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

あずき

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

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

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

Twitter

このブログのWordPress環境

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

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

ブログガイド_見出し_01

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

affinger-menu-setting-20200228_ec
【スマホ用もあり】AFFINGER5で「ヘッダー&フッターメニュー」を作成する手順【WordPressブログ】

続きを見る

 

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

affinger-slide-menu-setting-20200301_ec
AFFINGER5で「スマホ用スライドメニュー」を作成する手順【WordPressブログ】

続きを見る

 

リクナビNEXT

30代向け

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

正社員求人は9割以上

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

 

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

ブログガイド_見出し_02

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

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

続きを見る

 

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

▼ プロフィールの作成 ▼

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

続きを見る

 

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

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

続きを見る

 

本気でブログ収益化するなら /

WING AFFINGER5 バナー 02

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

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

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

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

ブログガイド_見出し_03

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

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

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

 

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

「ヘッダー・フッター・背景」エリアの色設定
affinger-color-setting-base-202002_ec
WING AFFINGER5で「ヘッダー・フッター・背景」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「ヘッダーメニュー」エリアの色設定
affinger-color-setting-header-menu-202002-ec
WING AFFINGER5で「ヘッダーメニューの色設定」をカスタマイズする手順【WordPressブログ】

続きを見る

 

「スマホ用スライドメニュー」エリアの色設定&デザイン設定
affinger-customize-slide-menu-20200302_ec
AFFINGER5で「スマホ用スライドメニュー」の色とデザイン設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「ウィジェット」エリアの色設定
affinger-color-setting-widget-20200217_ec
WING AFFINGER5で「ウィジェットの色設定」をカスタマイズする手順【WordPressブログ】

続きを見る

 

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

続きを見る

 

 

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

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

「第7章」と並行して進めていくのが、実際にはおすすめです🐣

 

「記事タイトル&見出し」の色設定&デザイン設定
affinger-color-design-setting-heading-20200218_ec
WING AFFINGER5で「記事タイトル&見出し」の色とデザイン設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「本文&リンクテキスト」の色設定
affinger-color-setting-main-text-20200219_ec
AFFINGER5で「本文&リンクテキスト」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「カテゴリー&投稿日時&ぱんくずリスト」の色設定
affinger-color-setting-sub-text-20200223_ec
AFFINGER5で「カテゴリー&投稿日時&パンくずリスト」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「箇条書きボックス」の色設定
affinger-color-setting-bullet-point-20200225_ec
AFFINGER5で「箇条書きボックス」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

「Webアイコン」の色設定
affinger-color-setting-icon-20200317_ec
AFFINGER5で「Webアイコン」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

\ 国内シェアNo.1

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

XSERVER

  • トップクラスのサーバー速度!
  • サーバー稼働率99.99%以上の安定性!
  • 全サーバープラン10日間の無料お試しつき!

今なら「ドメイン永久無料」&「月額料金 20%OFF」のお得なキャンペーン中!

公式:月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

関連:超大手のおすすめレンタルサーバー「エックスサーバー」お申し込み手順を優しく解説
関連:エックスサーバー「X10・X20・X30」プランの実質的な違い
※2020年5月時点、dataprovider.com 調べ(詳細

 

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

続きを見る

 

「表」の枠線や背景色の初期設定
affinger-color-setting-table-20200227_ec
AFFINGER5で、「表」の枠線や背景色の初期設定をカスタマイズする手順【WordPressブログ】

続きを見る

 

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

続きを見る

 

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

続きを見る

 

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

続きを見る

 

リクナビNEXT

30代向け

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

正社員求人は9割以上

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

 

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

ブログガイド_見出し_04

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

具体的には、大きく…

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

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

 

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

続きを見る

 

「AFFINGER5 管理」後編 → おすすめ記事一覧 / SNS / SEO / Google連携・広告 / 会話・ファビコン / その他
affinger-management-second-20200305_ec
「AFFINGER5 管理」のおすすめ設定例を全公開:後編【おすすめ記事一覧/SNS/SEO/Google連携・広告/会話・ファビコン/その他】

続きを見る

 

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

大変お疲れさまでした♪

あずき🐥

本気でブログ収益化するなら /

WING AFFINGER5 バナー 02

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

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

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

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

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

次の章はこちら

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

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

 

著者

azuki_01

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

あずき

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

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

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

Twitter

-ワードプレス

© 2020 あずきのぶろぐ。