WordPressのサイトデザインの変更は、
- 最も大きく変わる:テーマの変更
- 次に大きく変わる:着せ替え
- 少し変える:各種設定
という3つの作業に分かれます。
テーマの変更と着せ替えについては、それぞれ下のページで解説してきました。
テーマの変更 | テーマの選び方 |
---|---|
着せ替え | おすすめのテーマ(SWELLでの着せ替え例) |
今回は「少し変える」作業である各種の設定について説明します。
この各種設定はテーマによって異なるため、今回はSWELLを例にとって説明します。
ヘッダーロゴの設定・変更をする方法
どのテーマを使うときでも、真っ先に変えるべき部分はロゴです。
![ヘッダー](https://graslax.com/wp-content/uploads/2021/10/hedda-.jpg)
ヘッダーロゴの設定は、「カスタマイズ」⇒「ヘッダー」を選択します。↓
![ヘッダー](https://graslax.com/wp-content/uploads/2021/10/hedda.jpg)
この中で「ヘッダーロゴの設定」という部分があります。
![ヘッダー](https://graslax.com/wp-content/uploads/2021/10/heda.jpg)
![ヘッダー](https://graslax.com/wp-content/uploads/2021/10/heda2.jpg)
「画像を選択」を押して、ロゴ画像をアップロードします。
(今回は、サイトのロゴをアップします)
![ヘッダー](https://graslax.com/wp-content/uploads/2021/10/heda3.jpg)
アップしたら、右下の「画像を選択」という青いボタンを押します。
![ヘッダー](https://graslax.com/wp-content/uploads/2021/10/heda4.jpg)
設定画面で、このようにロゴが反映されます。
![ヘッダー](https://graslax.com/wp-content/uploads/2021/10/heda6.jpg)
間違いがなければ公開し、公開すると下のように反映されています。
基本カラーの設定・変更をする方法
![デザイン](https://graslax.com/wp-content/uploads/2021/10/desa1.jpg)
まず、サイトの初期設定はこうなっています。↓
![デザイン](https://graslax.com/wp-content/uploads/2021/10/desa2.jpg)
上の黒いバーにある「カスタマイズ」をクリックしてください。↓
![デザイン](https://graslax.com/wp-content/uploads/2021/10/desa3.jpg)
この画面になります。↓
![デザイン](https://graslax.com/wp-content/uploads/2021/10/desa4.jpg)
左のメニューの上の方にある「サイト全体設定」をクリックしてください。
![デザイン](https://graslax.com/wp-content/uploads/2021/10/desa5.jpg)
次のメニューが出てくるので「基本カラー」を選んでください。↓
「メインカラー」を変える
![ピンク](https://graslax.com/wp-content/uploads/2021/10/pink1.jpg)
まず「メインカラー」を選んで、たとえばピンクに変更します。↓
![基本](https://graslax.com/wp-content/uploads/2021/10/kihon1.jpg)
すると、元々はこのようなデザインが、↓
![基本](https://graslax.com/wp-content/uploads/2021/10/kihon2.jpg)
下のように変わります。↓
- 吹き出し
- 囲み枠
- 付箋
- 見出し
- 目次
などのあらゆるパーツの色が、指定の色に変更されるわけです。
全体のデザインは同じでも、これでデフォルトより女性らしい雰囲気になりました。
「テキストカラー・背景色」を変える
たとえば黒背景・白文字にしてみましょう。
![デザイン](https://graslax.com/wp-content/uploads/2021/10/desa12.jpg)
(テキストカラーを白、背景色を黒)↓
![デザイン](https://graslax.com/wp-content/uploads/2021/10/desa13.jpg)
すると、このように大胆に変わります。↓
![デザイン](https://graslax.com/wp-content/uploads/2021/10/desa19.jpg)
ただ、SWELLのこのテーマの場合は、このように「個別記事の文字」が見えなくなってしまいます。↓
もちろん、ここまで30秒程度しか作業していないため、真面目にカスタマイズをすれば、これもクリアできます。
(しかし、別の話題になるためここでは飛ばします)
お知らせバーの設定・変更をする方法
お知らせバーの設定も、最初の流れは同じです。
![デザイン](https://graslax.com/wp-content/uploads/2021/10/desa14.jpg)
「カスタマイズ」⇒「サイト全体設定」で、下の「お知らせバー」の部分をクリックしてください。
![デザイン](https://graslax.com/wp-content/uploads/2021/10/desa16.jpg)
このSWELLのテーマの場合、最初は「表示しない」になっています。
これを「ヘッダー上部に表示」にします。
![デザイン](https://graslax.com/wp-content/uploads/2021/10/desa17.jpg)
(上下はどちらでもかまいません)↓
![デザイン](https://graslax.com/wp-content/uploads/2021/10/desa18.jpg)
すると、最上部に「お知らせバー」が登場します。
このテーマの場合は黄緑のバーです。
テーマによっては、お知らせバーは最初から表示されています。
![デザイン](https://graslax.com/wp-content/uploads/2021/10/desa16.jpg)
表示されていないテーマの場合、今回のようにまず「表示する設定」をします。
また、その他にも上の画像のようにさまざまな設定をできます。
パンくずリストの設定・変更をする方法
パンくずリストは、記事の上部にある「ホーム>スタッフ日記>山田太郎」のような、サイト内の現在地の情報です。
![パンくずリスト](https://graslax.com/wp-content/uploads/2021/10/hakusu2.jpg)
![パンくずリスト](https://graslax.com/wp-content/uploads/2021/10/hakusu3.jpg)
上の画像で、パンくずリストを拡大すると下のようになります。
![パンくずリスト](https://graslax.com/wp-content/uploads/2021/10/hakusu1.jpg)
これを編集するには、まず「お知らせバー」の下のボタンをクリックします。
![パンくずリスト](https://graslax.com/wp-content/uploads/2021/10/hakusu4.jpg)
すると、下のようなメニューが出ます。
![パンくずリスト](https://graslax.com/wp-content/uploads/2021/10/hakusu5.jpg)
最初にいじるところは「ホーム」の文字列くらいです。
![パンくずリスト](https://graslax.com/wp-content/uploads/2021/10/hakusu6.jpg)
ここを「サイトTOP」などの好きな文字にします。
![パンくずリスト](https://graslax.com/wp-content/uploads/2021/10/hakusu7.jpg)
保存すると、下のように変更されています。↓
まとめ
![](https://graslax.com/wp-content/uploads/2021/11/pixta_23159606_M-1024x682.jpg)
今回の講座の要点を4行でまとめると、下のとおりです。
- テーマ導入後、最初に変更すべきものは「ロゴ」
- デモサイトを再現しロゴを入れ替えたら概ねOK
- むしろ、最初は記事数とアイキャッチ画像が重要
- お知らせバーなどの設定は随時改善していけばいい
次の講座では『ブロックエディタ』について解説します。
![](https://graslax.com/wp-content/uploads/2022/05/4dbd0f51593dba416f5b6fcb79a081a2.jpeg)