WordPressの操作に慣れると、以下のことを考えたくなると思います。
「サイトの見た目を違うものに変えたい...」
今回は、WordPressで作ったサイトの見た目を変える方法を解説します。
結論から言うと、WordPressの「テーマ」を変更すれば解決です。
WordPressで「テーマ」を変更する方法を、操作画面の画像と共に解説していきます。
ちなみに、WordPressをローカル環境にインストールする方法を以下の記事で解説しております。
WordPressを触る環境がまだ用意できていない方は、参考にされてください。
![【初期設定まで解説】LocalbyFlyWheelでWordPressローカル環境構築](https://images.ctfassets.net/o1bgnefm7hbe/2bj4B3wdmYEWUsI5wL9QOY/e70d8660ba93b3a66eb75637a6739ad8/flywheel_eyecatch.png?w=260&h=146&q=50&fm=png)
【初期設定まで解説】LocalbyFlyWheelでWordPressローカル環境構築
記事を読む
また、WordPressの簡単な基本操作の説明を以下の記事にて解説しておりますので、よろしければどうぞ。
![【学習者向け】WordPressの基本操作を解説【サーバー、ドメイン不要です】](https://images.ctfassets.net/o1bgnefm7hbe/4XI2iciuntHI6Pql39VjRh/ef5c5491e833c093c946d017eb276dfe/wordpress_manual_eyecatch.png?w=260&h=146&q=50&fm=png)
【学習者向け】WordPressの基本操作を解説【サーバー、ドメイン不要です】
記事を読む
現在適用されているテーマの確認
WordPressで作ったサイトの表示を一度確認します。
![appearance default](https://images.ctfassets.net/o1bgnefm7hbe/6nalz8aeV998Uz3eiNtNIT/f83398e217a0007ba06baa2596aac6c1/default_appearance.png?w=760&h=434&q=50&fm=png)
記事冒頭でご紹介した「LocalbyFlywheelでWordPressローカル環境構築」で作ったサイトは上の画像のような見た目になっています。
このサイトの見た目を変えていきます。
テーマを変更する
![access theme](https://images.ctfassets.net/o1bgnefm7hbe/c2XSiQv9SFH52KiWHczRF/69bca49a9c8836f6475364fae979e126/access_theme.png?w=760&h=434&q=50&fm=png)
管理画面左側の「外観」にマウスカーソルを合わせます。
いくつか項目が出てきますので、「テーマ」をクリックします。
![change to twenty twenty](https://images.ctfassets.net/o1bgnefm7hbe/58248qmD3OVtkxnDJh5fq5/53d17373033bed36e21382539ffd04d5/change_to_twenty_twenty.png?w=760&h=434&q=50&fm=png)
「テーマ一覧」が表示されます。
デフォルトで3種類のテーマが用意されています。
上の画像では、「Twenty Twenty-One」というテーマが適用されている状態です。
では、テーマを変更します。
「Twenty Twenty」にマウスカーソルを合わせると、「有効化」のボタンが表示されるのでクリックします。
これでテーマが変更され、サイトの 見た目が変わります。
![appearance of twenty twenty](https://images.ctfassets.net/o1bgnefm7hbe/5ja2pYZtV2Bqtgcqdp5JZl/5d9eee5b60ab8e86b4f1f71f265c6db4/appearance_twenty_twenty.png?w=760&h=475&q=50&fm=png)
サイト表示を確認します。
ブラウザの更新ボタンをクリックすると、サイトの見た目が変わります。
記事は以上です。
![【学習者向け】WordPressの基本操作を解説【サーバー、ドメイン不要です】](https://images.ctfassets.net/o1bgnefm7hbe/4XI2iciuntHI6Pql39VjRh/ef5c5491e833c093c946d017eb276dfe/wordpress_manual_eyecatch.png?w=260&h=146&q=50&fm=png)
【学習者向け】WordPressの基本操作を解説【サーバー、ドメイン不要です】
記事を読む