WordPressのサイトデザインの変更方法を画像付きで解説

サイトデザイン変更方法 画像付きで解説

WordPressのサイトデザインの変更は、

  1. 最も大きく変わる:テーマの変更
  2. 次に大きく変わる:着せ替え
  3. 少し変える:各種設定

という3つの作業に分かれます。

テーマの変更と着せ替えについては、それぞれ下のページで解説してきました。

テーマの変更テーマの選び方
着せ替えおすすめのテーマ(SWELLでの着せ替え例)

今回は「少し変える」作業である各種の設定について説明します。

この各種設定はテーマによって異なるため、今回はSWELLを例にとって説明します。

目次

ヘッダーロゴの設定・変更をする方法

どのテーマを使うときでも、真っ先に変えるべき部分はロゴです。

ヘッダー

ヘッダーロゴの設定は、「カスタマイズ」⇒「ヘッダー」を選択します。↓

ヘッダー

この中で「ヘッダーロゴの設定」という部分があります。

ヘッダー
ヘッダー

「画像を選択」を押して、ロゴ画像をアップロードします。
(今回は、サイトのロゴをアップします)

ヘッダー

アップしたら、右下の「画像を選択」という青いボタンを押します。

ヘッダー

設定画面で、このようにロゴが反映されます。

ヘッダー

間違いがなければ公開し、公開すると下のように反映されています。

基本カラーの設定・変更をする方法

デザイン

まず、サイトの初期設定はこうなっています。↓

デザイン

上の黒いバーにある「カスタマイズ」をクリックしてください。↓

デザイン

この画面になります。↓

デザイン

左のメニューの上の方にある「サイト全体設定」をクリックしてください。

デザイン

次のメニューが出てくるので「基本カラー」を選んでください。↓

「メインカラー」を変える

ピンク

まず「メインカラー」を選んで、たとえばピンクに変更します。↓

基本

すると、元々はこのようなデザインが、↓

基本

下のように変わります。↓

  • 吹き出し
  • 囲み枠
  • 付箋
  • 見出し
  • 目次

などのあらゆるパーツの色が、指定の色に変更されるわけです。

全体のデザインは同じでも、これでデフォルトより女性らしい雰囲気になりました。

「テキストカラー・背景色」を変える

たとえば黒背景・白文字にしてみましょう。

デザイン

(テキストカラーを白、背景色を黒)↓

デザイン

すると、このように大胆に変わります。↓

デザイン

ただ、SWELLのこのテーマの場合は、このように「個別記事の文字」が見えなくなってしまいます。↓

もちろん、ここまで30秒程度しか作業していないため、真面目にカスタマイズをすれば、これもクリアできます。

(しかし、別の話題になるためここでは飛ばします)

お知らせバーの設定・変更をする方法

お知らせバーの設定も、最初の流れは同じです。

デザイン

「カスタマイズ」⇒「サイト全体設定」で、下の「お知らせバー」の部分をクリックしてください。

デザイン

このSWELLのテーマの場合、最初は「表示しない」になっています。

これを「ヘッダー上部に表示」にします。

デザイン

(上下はどちらでもかまいません)↓

デザイン

すると、最上部に「お知らせバー」が登場します。

このテーマの場合は黄緑のバーです。

テーマによっては、お知らせバーは最初から表示されています。

デザイン

表示されていないテーマの場合、今回のようにまず「表示する設定」をします。

また、その他にも上の画像のようにさまざまな設定をできます。

パンくずリストの設定・変更をする方法

パンくずリストは、記事の上部にある「ホーム>スタッフ日記>山田太郎」のような、サイト内の現在地の情報です。

パンくずリスト
パンくずリスト

上の画像で、パンくずリストを拡大すると下のようになります。

パンくずリスト

これを編集するには、まず「お知らせバー」の下のボタンをクリックします。

パンくずリスト

すると、下のようなメニューが出ます。

パンくずリスト

最初にいじるところは「ホーム」の文字列くらいです。

パンくずリスト

ここを「サイトTOP」などの好きな文字にします。

パンくずリスト

保存すると、下のように変更されています。↓

まとめ

今回の講座の要点を4行でまとめると、下のとおりです。

  1. テーマ導入後、最初に変更すべきものは「ロゴ」
  2. デモサイトを再現しロゴを入れ替えたら概ねOK
  3. むしろ、最初は記事数とアイキャッチ画像が重要
  4. お知らせバーなどの設定は随時改善していけばいい

次の講座では『ブロックエディタ』について解説します。

GraslaX-グラスラX-ネット集客講座
WordPressブログの始め方!サイトの作り方全手順を画像付きで解説【開設ロードマップ】 | GraslaX-グラスラ... WordPressでブログを始めたい人のための全知識を網羅した「ブログ開設のロードマップ」としてこの記事を作りました。 この記事を上から順に読み進めていくだけで、わずか3...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次