wordpress-design-main-top-20200303_ec

WordPress

【WordPress完全初心者ガイド】第3章:ブログの「基本デザイン」編TOP



WordPressブログの「完全初心者」ガイド、その第3章は…

基本デザイン編

です

具体的には…

  1. ブログタイトル
  2. メニュー
  3. ウィジェット
  4. カスタマイズ
  5. AFFINGER5管理

この5つのパートにわかれます

まず前回の「第2章」では…

  • ブログ開設後にまず行うべき初期設定
  • テーマの導入
  • プラグインの導入
  • XMLサイトマップの設定

と、どちらかと言えば「内部システム」にかかわる設定を中心にやってきました

それに対して今回の「第3章」では、ブログの訪問者から直接見られる「デザイン面」を本格的に作っていきます

ブログを始めてから一気に楽しくなるのが、このデザインをいじるとこ!

まず大前提として…

今回の解説は、このブログでも愛用中のWordPressテーマ「WING(AFFINGER5)」の場合におけるものとなります

そもそもWordPressのデザイン設定は、「どのテーマを使ってるか?」によって、カスタマイズできる内容やその手順が大きく変わってくるんですね

そして「WING(AFFINGER5)」の場合、カスタマイズのバリエーションはかなり豊富で、しかも設定そのものは「超簡単」です

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

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

WordPressブログにおける「基本デザイン」の各設定【ブログタイトル/メニュー/ウィジェット/カスタマイズ】

基本デザイン①:「ブログタイトル&キャッチフレーズ」を設定する

pc-work-202001_01

まずはブログの顔とも言える、サイト全体の「タイトル名」を設定しましょう

具体的には…

  • ブログタイトル
  • キャッチフレーズ

この2つです

wordpress-design-main-top-20200303_1-01

↑ 左上の、オレンジで囲ってるとこ

タイトルは「WordPressインストール」のときに自分で設定してるはずだけど、ブログ開設後ももちろん変更できるよ!

具体的な設定&変更手順は ↓ をどうぞ♪

wp-blog-title-setting-202002-ec
WordPressのブログタイトルとキャッチフレーズを設定・変更する手順【「Just another WordPress Site」を削除】

続きを見る

基本デザイン②:「メニュー」を作成する

pc-work-202001_02

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

ブログタイトルを設定したら、お次は…

  • ヘッダーメニュー
  • フッターメニュー

を作ってみましょう

wordpress-design-main-top-20200303_2-1-01

↑ サイト上部に設置される、「ヘッダーメニュー」

wordpress-design-main-top-20200303_2-1-02

↑ サイト下部に設置される、「フッターメニュー」

特にヘッダーメニューは、ブログタイトルに負けないくらい目立つ大事な場所!

具体的な作成手順は ↓ から♪

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

続きを見る

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

まず「スマホ用スライドメニュー」とは…

wordpress-design-main-top-20200303_2-2-01

↑ この左上にあるアイコンのこと

このアイコンをタップすると…

wordpress-design-main-top-20200303_2-2-02

↑ こんなふうに、指定したメニュー内容を開けるようにできます

「スマホ用メニュー」の1つとしてけっこう大事!

具体的な作成手順は ↓ から♪

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

続きを見る

基本デザイン③:「ウィジェット」を作成する

pc-work-202001_03

「カテゴリー一覧」ウィジェットの作成

「メニュー」が作れるようになったら、つづいて「ウィジェット」を作ってみましょう

なかでも「カテゴリー一覧」は、「ウィジェット」で作れるもののなかでも特に代表的な1つです

wordpress-design-main-top-20200303_3-1-01

↑ カテゴリー一覧の例

このカテゴリー一覧は、ブログの「サイドバー」に設置するのが一般的!

wordpress-design-main-top-20200303_3-1-02

↑「サイドバー」に設置した、カテゴリー一覧

作成&設置の手順は ↓ から♪

affinger-category-list-setting-20200229_ec
【ウィジェット】AFFINGER5で「カテゴリー」一覧をサイドバーに作成する手順【WordPressブログ】

続きを見る

「プロフィール」ウィジェットの作成

今度は同じくウィジェットを使って、簡単な「プロフィール」を作ってみましょう

AFFINGER5の装飾機能と組み合わせれば…

wordpress-design-main-top-20200303_3-2-01

↑ こんなプロフィールボックスを作ることもできます(右側の🐣のとこ!)

このプロフィールも、サイドバーに置くウィジェットとして一般的!

作成&設置の手順は ↓ から♪

wp-affinger-profile-sidebar-202002-ec
【WordPressブログ】WING AFFINGER5におけるプロフィールの作り方&サイドバーへの設置手順

続きを見る

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

基本デザイン④:「カスタマイズ」を設定する

pc-work-202001_04

ここまでで、「メニュー&ウィジェット」を作れるようになったら…

今度は「各パーツの配色やデザインパターン」を、自由にカスタマイズしていきましょう

「ヘッダー&フッター&背景エリア」のカスタマイズ設定

まずは、ブログ全体の「1番の土台」となる…

  • ヘッダーエリア
  • フッターエリア
  • 背景エリア

この3つの場所における「色設定」をカスタマイズしていきます

wordpress-design-main-top-20200303_4-1-01

1番上側の白いエリア全体が、「ヘッダー」エリア(「あずきの自由帳。」というブログタイトルがあるとこ!)

中央の薄いグレーエリア全体が、「背景」エリア

1番下側の白いエリア全体が、「フッター」エリア(「お問い合わせ」「サイトマップ」という表示があるとこ!)

例えば「背景」エリアの色を、濃いグレーにすると…

wordpress-design-main-top-20200303_4-1-02

↑ こんな感じになります

ブログ全体の雰囲気に直結する、めちゃめちゃ大事な場所!

カスタマイズ手順は ↓ から♪

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

続きを見る

「ヘッダーメニュー」のカスタマイズ設定

つづいて、さきほどの「メニュー作成」のパートで設置した…

ヘッダーメニュー

における「色設定」をカスタマイズしていきます

wordpress-design-main-top-20200303_4-2-01

↑ 上側のネイビー色になってるエリアが、ヘッダーメニュー

このヘッダーメニューも、凄く目立つ場所!

具体的な手順は ↓ から♪

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

続きを見る

「スマホ用スライドメニュー」のカスタマイズ設定

今度は、同じくさっきの「メニュー作成」パートで設置した…

スマホ用スライドメニュー

における「色設定」&「表示パターン設定」をカスタマイズしていきます

wordpress-design-main-top-20200303_4-3-01

↑ この左上の三本線アイコンが、スマホ用スライドメニュー

アイコンをタップすると…

wordpress-design-main-top-20200303_4-3-02

↑ メニューがスライドで開きます

デザインパターンとか配置場所も、簡単に指定できるよ!

具体的な手順は ↓ から♪

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

続きを見る

「ウィジェットエリアにおけるタイトル部分」のカスタマイズ設定

お次は、こちらもさきほど「ウィジェット作成」のパートで設置した…

各ウィジェットエリアの「タイトル」部分

における「色設定」&「表示パターン設定」をカスタマイズしていきます

wordpress-design-main-top-20200303_4-4-01

↑ この右側部分が、それぞれウィジェット(この例では、「カテゴリー」「コメント」の2つ)

wordpress-design-main-top-20200303_4-4-02

wordpress-design-main-top-20200303_4-4-03

↑ こういったウィジェットの「タイトル部分」を…

wordpress-design-main-top-20200303_4-4-04

↑ こんな風にしたり…

wordpress-design-main-top-20200303_4-4-05

↑ はたまた、こんな風にもカスタマイズできます

タイトル名はもちろん、デザインもいろんな種類から選べる!

具体的な手順は ↓ から♪

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

続きを見る

「記事タイトル&各見出し」のカスタマイズ設定

今度は、TOPページではなく「記事ページ」内のカスタマイズです

まずは…

  • 記事タイトル
  • 各見出し

における「色設定」&「表示パターン」をカスタマイズしていきます

wordpress-design-main-top-20200303_4-5-01

↑ ブログタイトルは、記事ページの上部に表示されるタイトル名(この例では、「Hello world!」)

wordpress-design-main-top-20200303_4-5-02

↑ 見出しとは、この「H2見出しは…」「H3見出しは…」「H4見出しは…」にあたる部分

記事ページの「骨組み」とも言えるような、めちゃめちゃ大事な場所!

具体的な手順は ↓ から♪

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

続きを見る

「記事本文&リンクテキスト」のカスタマイズ設定

つづいて、同じく「記事ページ」内から…

  • 本文テキスト
  • リンクテキスト

における「色設定」をカスタマイズしていきます

wordpress-design-main-top-20200303_4-6-01

↑ ちょっと極端な例として、「本文テキスト」の配色をグリーンに変えると…

wordpress-design-main-top-20200303_4-6-02

↑ こんな感じになります

wordpress-design-main-top-20200303_4-6-03

↑ リンクテキストは、この青地部分のこと(クリックすると、指定したURLにジャンプできる機能のこと!)

本文テキストは真っ黒よりも「ダークグレー」とかにした方が、柔らかい印象になっておすすめ!

具体的な手順は ↓ から♪

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

続きを見る

「カテゴリー&投稿日時&パンくずリスト」のカスタマイズ設定

お次は、同じく「記事ページ」内から…

  • カテゴリー
  • 投稿日時
  • パンくずリスト

における「色設定」をカスタマイズしていきます

wordpress-design-main-top-20200303_4-7-01

↑ カテゴリー(オレンジのとこ!)

wordpress-design-main-top-20200303_4-7-02

↑ 投稿日時(or 更新日時)とパンくずリスト

「カテゴリー」と「投稿日時」は、記事ページだけじゃなく「記事一覧」エリアでも表示されるよ!

具体的な手順は ↓ から♪

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

続きを見る

「装飾アイコン&会話吹き出し」のカスタマイズ設定

今度は、記事の作成に便利な…

  • 装飾アイコン
  • 会話吹き出し

の「色設定」をカスタマイズしていきます

wordpress-design-main-top-20200303_4-8-01

↑ 装飾アイコン各種

wordpress-design-main-top-20200303_4-8-02

↑ 会話吹き出し

AFFINGER5はこういったパーツのバリエーションも豊富!

具体的な手順は ↓ から♪

「箇条書きボックス」のカスタマイズ設定

こちらも同じく、記事の作成で活躍する…

箇条書きボックス

の「色設定」をカスタマイズしていきます

wordpress-design-main-top-20200303_4-9-01

↑「チェックリスト」タイプの箇条書きボックス

wordpress-design-main-top-20200303_4-9-02

↑「数字リスト」タイプの箇条書きボックス

wordpress-design-main-top-20200303_4-9-03

↑「こんな方におすすめ」タイプの箇条書きボックス

この箇条書きボックスは、「視覚的にメリハリをもたせる役割」としても超便利!

具体的な手順は ↓ から♪

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

続きを見る

「表」のカスタマイズ設定

同じく記事の作成で便利な…

の「色設定」&「フォント設定」をカスタマイズしていきます

wordpress-design-main-top-20200303_4-10-01

↑ 表の一例

枠線の配色はもちろん、網掛けの配色だったりテキストを太字にしたりもできるよ!

具体的な手順は ↓ から♪

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

続きを見る

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

基本デザイン⑤:「AFFINGER5管理」を設定する

pc-work-202001_05

まず「AFFINGER5 管理」とは…

wordpress-design-main-top-20200304_5-1-01

↑ ここのこと

ブログにおける実用的な設定が、この「AFFINGER5 管理」でまとめて簡単に行えます

で、わりと設定項目が多いので、大きく…

  • 前編
  • 後編

の2つにわけて、実際に愛用してるおすすめな設定例を一気にご紹介していきます

AFFINGER5 管理の「前編」は ↓ をどうぞ♪

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

続きを見る

「後編」は ↓ から♪

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

続きを見る

今回の「ブログの基本デザイン」の解説は、これで以上となります

大変お疲れさまでした♪

あずき🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.