初心者向け

ワードプレスのカスタマイズの使い方とは?操作方法も解説!

2022年4月9日

こんな方に読んで欲しい!

  • ワードプレスのカスタマイズってどうやって使うの?

WordPress(ワードプレス)のカスタマイズとは、サイトデザインをするために使うメニューです。

ワードプレス導入直後によく使うメニューのため、早目に操作方法を覚えておくといいでしょう。

そこで今回は、カスタマイズの操作方法やワードプレスカスタマイズに役立つサービスついて解説していきます。

ワードプレス初心者向けのカスタマイズの操作方法が中心となる記事です。

それでは、本編をどうぞ!

ワードプレスのカスタマイズとは?

ワードプレスのカスタマイズは、サイト全体をデザインしていくためのメニューです。

自身のサイトの見栄えを決める重要なメニューのため、ワードプレスの初期設定の中でも一番時間をかけて使うメニューです。

ワードプレスのデザインは、ワードプレステーマによって大まかに決まり、カスタマイズによって細かく設定していきます

カスタマイズを編集するタイミング

カスタマイズは、ワードプレスの初期設定のタイミングにメインで使います。

具体的には、ワードプレステーマとプラグインを有効化した後に行うのが理想です。

いつでもカスタマイズで編集することは可能ですが、サイト全体のカラーリングやトップページのデザインはサイト全体のイメージに関わるため、サイト公開前に済ませておくのが無難です。

とはいえ、カスタマイズに時間をかけすぎて記事が書けないのは元も子もないので、ある程度気に入ったデザインができたら記事作成に移りましょう。

ブログを育てながらデザインを変えていくのも楽しいですよ!

カスタマイズで設定・編集できる項目

カスタマイズで設定や編集できる項目は、テーマによって異なりますが主に次の要素が編集できます。

  • サイト全体のデザイン:サイト全体のカラーやフォント等
  • サイトタイトル・キャッチフレーズ:サイトのタイトルやキャッチフレーズ(管理画面の「設定→一般」からも編集可能)
  • 背景画像:背景に画像を設置するか等
  • ヘッダーデザイン:ロゴの設定、キャッチフレーズやSNSアイコンの表示/非表示、ヘッダー背景のカラー等
  • トップページデザイン:トップページに画像や動画を設置するか等
  • 投稿・固定ページデザイン:タイトルや見出し、コンテンツのデザイン、見出しデザイン、SNSシェアボタンのデザイン等
  • フッターデザイン:フッター背景・文字カラー、コピーライトの内容等
  • メニューデザイン:メニュー構成、メニュー設置位置の調整
  • ウィジェットデザイン:ウィジェット構成、ウィジェット設置位置の調整

WordPressのカスタマイズの使い方

カスタマイズは、ワードプレス管理画面の「外観→カスタマイズ」から開けます。

今回は、インターネットビジネスラボも使う「AFFINGER6」のカスタマイズ画面で解説をしていきます。

ワードプレス カスタマイズ

カスタマイズの仕方

カスタマイズ画面では、左側にカスタマイズメニューが配置され、右側にトップぺージが表示されます。

基本的には、左側のカスタマイズメニューを編集して、右側の画面に反映されるのを確認します。

ワードプレス カスタマイズ画面

カスタマイズ後の公開の仕方

カスタマイズが完了したら、左上の「公開」ボタンが選択できるようになります。

「公開」ボタンを押すまではサイトに反映されませんので、色々とデザインをいじってみましょう。

ワードプレス カスタマイズ画面 公開

投稿ページのデザインを確認する方法

カスタマイズの中では、投稿ページのタイトルや見出しのデザインが編集できます。

しかしトップページを表示したままでは、タイトルや見出しのデザインの変更点がわからないので、事前に「テスト記事」の投稿をつくっておくといいでしょう。

テスト記事では、「見出し2」「見出し3」「見出し4」を挿入しておくと、見出しデザインの変化が確認できるのでおすすめです。

ワードプレス カスタマイズ 操作

「テスト記事」は、公開せずに非公開に設定しておきましょう。

カスタマイズに役立つサービス

カスタマイズを操作する前に、利用すると便利なサービスやプラグインを紹介します。

どれもサイトデザインをする際に役立つので活用しましょう。

Adobe Color

Adiobe Color」とは、Adobe社が提供する無料の配色デザインソフトです。

バランスの良い配色デザインを提案してもらえるので、サイトの配色を決める際に役立ちます。

気に入った配色デザインのHTMLカラーコードをコピーすれば、そのまま同じカラーが使えます。

Adobe Color

WP Maintenance Mode & Coming Soon

「WP Maintenance Mode & Coming Soon」プラグインは、ワードプレスを一時的にメンテナンスモードにしておくプラグインです。

カスタマイズ中は、デザインを色々いじりながら確認をしてくためメンテナンスモードにしておくと、製作途中のサイトを見られずに済みます。

STINGER STORE

AFFINGERだけにはなりますが「STINGER STORE」は、デザインテンプレートがダウンロードできるサイトです。

STINGER STORE

他のテーマを使っている場合でも「テーマ名 デザインテンプレート」で調べると、テンプレートサイトが出てくる可能性があるので調べてみましょう。

他のテーマでは「Swell」「JIN」などもダウンロード可能なデザインテンプレートが用意されています。

まとめ

今回は、ワードプレスのカスタマイズについて解説してきました。

本記事の要約

  • ワードプレスのカスタマイズは、デザインを設計するメニュー
  • カスタマイズは「外観→カスタマイズ」から編集する
  • カスタマイズ前に役立つサービスを使うといい


サイトのデザインを色々といじって自分が好きなデザインを見つけましょう。

-初心者向け