【WordPress】「外観」使用してサイトのデザインを変更する【超初心者】

WordPressにはメニューがいっぱいです。

 

無事Instant WordPressを使えるようになりましたので、

いよいよWordPressを使ってみます。

たぶん左のメニューから色々するんでしょうね。

私はゲームの説明書は読まない派です。(行き詰ってから読みます)

「習うより慣れろ」とりあえずさわってみます!


WordPressの「外観」

これは楽しいです!

専門知識はないのですが、ホームページが作れそうな気がしてきます!

よく分からない機能もたくさんありますけどね。

 

分からない機能は追々調べることにして・・・。

今回は、私が一番感動した「外観」を見てみたいと思います。

 

「外観」ではサイトのデザインを変えることができます。

あらかじめ色々と用意してあるので、選ぶだけで簡単にサイトのデザインを変更できます。

知識のない私でも、選ぶだけでデザインの変更ができたので、初心者でも安心です。

 

WordPress「外観」の使い方

それでは「外観」を使ってデザインを変えていきましょう。

 

現在のサイトデザインの確認方法

が、その前に初期設定ではどんなデザインになっているのか確認してみましょう。

上のメニューの「Instant WordPress」ボタンをクリックします。

 

すると、今現在のサイトの状態を確認することができます。

すでにかっこいい!

 

こんなすごいサイトが、何の設定もせずに作れるなんて、WordPressはすごいです。

個人で作ったサイトとは思えません。

 

サイトテーマの変更方法

かっこいい状態になっていますが、せっかくなので色々変更してみます。

設定の画面に戻るには、上のメニューの「Instant WordPress」ボタンをクリックします。

設定画面に戻れたら、左のメニューから「外観」ボタンをクリックします。

 

すると、テーマという画面に変わり、「外観」ボタンの下に項目が出てきました。

この「テーマ」の画面ではサイトの全体的なデザインが設定できます。

 

私はオレンジ色が好きなので、Twenty Thirteenにしてみます。

更新ができるみたいなので、ひとまず更新をします。(更新しなくても使用は可能です。)

選ぶテーマにマウスカーソルをのせると「有効化」ボタンが出るのでクリックします。

変更できたはずなので、上のメニューから「Instant WordPress」ボタンをクリックし、デザインが変更されたか確認します。

無事テーマの変更ができました!

選ぶだけで変更できるので、不器用な私でも素敵なデザインのサイトが作れます。

 

サイトデザインのカスタマイズ

次はもう少し細かい設定を見ていきます。

左のメニューから「カスタマイズ」をクリックします。

 

すると画面が切り替わります。

 

また左側に色々メニューがありますね。

順番に見ていきます。

 

  • サイトの基本情報
    • タイトル・キャッチコピーの変更ができます。
    • 上メニューの「Instant WordPress」ボタンはタイトルに応じて名前が変わります。

 

    • ヘッダー(タイトルとかが表示されているところ)の文字の色が変更できます。

 

  • ヘッダー画像
    • ヘッダーの画像が変更できます。
    • テーマごとに用意されているもののほかに、自分で用意した画像も使えます。

 

  • メニュー
    • ヘッダーの下の部分のメニューをカスタマイズできます。
    • 適当な名前でメニューを作成し、好きな項目を追加していきます。

 

  • ウィジェット
    • フッター(サイトの下の方)や画面の右に色々なものを表示できます。
    • 検索ボックス・メニュー・カテゴリー・カレンダーなど好きなものを選びます。

 

  • 固定フロントページ
    • 一番最初に表示する記事を設定できます。
    • 初期設定では、最新の記事が一番最初に来るようになっています。

 

  • 追加CSS
    • CSSというものを追加できるようです。
    • CSSを使うと、コードでデザインを変えたりできるそうです。
    • これは使いたい場合には勉強が必要ですね。

 

大体が直感的に操作できそうですね!

 

そして、メニュー一番下のボタンを押すと・・・。

 

なんとタブレット用やスマホ用のサイトなども自動的にできていました!

これはすごいです!

 

分かる部分だけでもかなりのことができるので、面白いです。

「外観」だけで1日遊んでいられます!

CSSというものが分かれば、もっと自由度が広がるのでしょうね。

 

・・・難しそうなのであとでいいですかね!

(これはしないパターンになりそう・・・いやいや、頑張りますよ!気が向いたら!)

<追記>

CSSを勉強して便利さに驚愕しました。

具体的に何ができるかを知ると使ってみたいと思うはずなので、まとめてみました。

関連:CSSとは?CSSで出来ることとスタイルの追加・編集方法


今回のまとめ

ということで、今回は「外観」を使ってサイトのデザインを変更できました。

専門知識がなくてもサイトのデザインができるのはうれしいですね。

 

次回はテーマの追加をしてみたいと思います。

4種類だとちょっと物足りないですものね。

 

ここまでお読みいただき、ありがとうございました。

次回も頑張ります。

 

関連:知識ゼロからホームページ作成・公開するまでの手順と公開後の作業まとめ<画像付き>