WordPress
Customize

WordPressのカスタマイズ

カスタマイズについて

カスタマイズは直訳すると「カスタマイズ=自分流に変える事」です。

ワードプレスでは、管理画面の「カスタマイズ」ボタンから、色々自分の好きなデザインに変えることができます。

操作を説明します。

カスタマイズに入ってみる

カスタマイズにどのような項目があるかは、テーマごとに違うため実際にご自身のホームページのデザインを変更する際は、使っているテーマのカスタマイズ項目に沿って行うことになります。

「外観」の「カスタマイズ」をクリックします。

このような画面に移ります。

左側に出てくるメニューの種類や数はご自身が選択しているテーマによって変わりますが、右側に表示される現在のホームページのデザインをリアルタイムに見ることができる表示方法はどのテーマを選んでも同じです。

こちらのテーマを使ってレストランのホームページを作ってみましょう。

実際にカスタマイズしてみる

上から順番に見ていきましょう。最初は「サイト基本情報」からです。

「サイト基本情報」をクリックすると下記のような画面に移動します。

サイトタイトルやキャッチフレーズは最初の管理画面の「設定」→「一般」でも設定できる項目ですが、重要な項目なのでここからも入力することができます。

レストランなので「ルビコンレストラン」という名前に変更します。

また、お店や企業ブランドを表すロゴもこちらから設定することができます。

ハンバーグが売りなので、ハンバーグの画像をロゴとして使用します。


また、このテーマでは、現在の画面から「サイトアイコン」も変更することができます。

サイトアイコンとはホームページをデスクトップやスマートフォン画面にお気に入り登録してもらった時に表示される四角いアイコンの事です。

アイコンは正方形で、幅・高さともに 512 ピクセル以上である必要がありますが、長方形の画像でもこちらから正方形に切り取ることができますので、大きさ(512ピクセル以上)という点だけ気を付けましょう。


クリックすると元の画面に戻ります。

この状態で×を押してしまうと今まで作業した設定が消えてしまいますので「保存して公開」をクリックします。

保存されるとボタンが「保存しました」という表示に変わります。×を押して前に戻りましょう。

順番に下に向かいます。

「セクションの順序と色」の個所に鍵マークが付いていますが、ここを変更したい場合は「プロ」版を購入してくださいという流れになります。

テーマは無料で使うことができますが、より詳細に設定したいという場合にお金を取られる場合があります。

テーマを作っている側からしたら、この有料プランに申し込んでもらうために無料テーマを提供しているわけです。

こちらの設定をしなくても十分おしゃれなホームページを作ることができ、お金を掛けずにホームページを作りたいのでここは飛ばします。

ちなみにセクションとは下記の図のように、赤枠で囲った四角部分を一つのセクションと呼びます。

このテーマはいくつかのセクションが縦並びになったテーマなのでセクションという名称が各設定のキーワードなります。

次に一般設定を変更してみましょう。「一般設定」をクリックし、中に入ってみます。

このテーマでは3つの項目について設定することができます。

フッター(ホームページの下の部分)に関する設定が多いです。

例えばソーシャルアイコンの設定の仕方ですが、最初はこのような画面になって「#」が既定で入っています。

「#」とは、そのホームページのトップに行くという設定を表しており、既定の状態だとどのソーシャルアイコンをクリックしてもホームページのトップに戻るという設定になっているということになります。

もし、フェイスブック等のソーシャルネットワーキングサービスのページをお持ちであれば、そのページのURLをコピーしてこれらの欄に張り付けましょう。

また、フェイスブック以外は持っていないという場合は規定値の「#」を削除しましょう。


次から下は○○セクションというボタンばかりが続きます。

セクションはトップページの大きなグループの事を意味しますので、それぞれの名前が示すセクションの設定をできるボタンという事になります。






次に設定できるのが、背景画像です。このテーマで背景画像が表示される個所は「大きなセクション」と「お問い合わせセクション」となります。

当然、選択されているテーマによってどの部分に背景画像が表示されるかは違います。

「背景画像」をクリックし、下記画面へ移動して「画像の変更」をクリックします。

背景画像は通常画面いっぱいに表示されます。px(ピクセル)が少ない画像だと、小さい画像を無理に画面いっぱいに最大化させると画像が粗くなったり、そのままの大きさで使うと幅が足りないため繰り返し表示させるか等の設定の必要が出てきます。なるべく横幅は2000px以上の画像を選ぶようにしましょう。

(2500pxほどで十分です。これ以上大きいパソコンの画面はそうありませんし、画像が大きすぎるとパソコンが重くなり表示スピードも落ちてしまいます)

反映されたことを確認し、「保存して公開」ボタンをクリックします。

美味しそうな料理の画像に変わりました。

トップ画像は、インパクトを与える一番のツールになりますので、欲求を掻き立てる(ここでは食欲)画像が良いでしょう。

次の項目はメニューですが、こちらは2.メニューについてで後述しておりますので、ここでの説明は割愛させていただきます。

次にウィジェットです。

ウィジェットとはホームページの各箇所に表示される機能の集まる枠を言います。

こちらも3.ウィジェットについてで説明いたしますので、ここでは割愛させていただきます。

次に、固定フロントページの設定についてです。こちらの項目はほぼすべてのテーマのカスタマイズに出てくる項目です。トップページに「固定ページ」を使うか

「投稿」を使うかの設定になります。

テーマによってはこの設定1つでトップページのデザインが大変わりします。

後で変更はいくらでもできるので、設定を変えるとどうなるか実際にやってみてください。

2.メニューについて

メニューは、ほぼすべてのホームページのトップページに上部に表示されるもので、各ページに移動するためのボタンの役割を果たします。

設定画面はワードプレスの管理画面にあります。

上記の「カスタマイズ」内にもメニューの設定画面はあるのですが、どんなテーマを選んでいようが関係なくワードプレスの管理画面に備わっている設定画面からの設定方法を説明いたします。

クリックすると下記の画面に移ります。メニューを作成する際に、メニュー名を求められます。

メニューはテーマによっては、表示する箇所によって別のメニューを表示することもできる為、何個でも作成できるようになっています。

ここではトップページのメインメニューという意味合いで「メインメニュー」と入力します。

また、表側の画面でも当画面のメニューの順番が反映されますので、ドラッグして位置を変えます。

また、メニュー内で階層を付けることもできます。表示のされ方は後でお見せしますが、設定方法は下記のように行います。お店の下の階層に

阪店と東京店がありますので右に移動させます。

これだけでメニュー内に階層を設けることができます。

一旦「メニューの作成」をクリックし保存します。すると先ほどまで表示されていなかった「位置の管理」というタブが出現します。

これは作ったメニューをどこに表示させますか?という意味でこちらのタブから表示箇所を設定します。

「位置の管理」をクリックすると下記の画面に移動します。「メインメニュー」に先程作ったメニューを選択し、「変更を保存」をクリックします。

これでメニューの設定は完了です。表側の画面でどんな風に表示されるか見てみましょう。

左上の「ルビコンレストラン」をクリックします。先程設定した内容に反映されているのが分かります。

お店の下の階層に設定した大阪店と東京店は表示されていません。

お店の上にマウスカーソルを持って行くと下記のような画面になります。

階層を設けることで情報を整理することができ、見た目もシンプルにすることができるのです。

この文字をクリックすることで各々のページに移動することができるようになりました。

3.ウィジェットについて

ウィジェットとは、特定の機能を集めた枠の事を言います。当テーマでは固定ページや投稿が表示されるとサイドにウィジェットが表示されます。

ウィジェット設定画面に入ると、自分が使っているテーマで表示することができるウィジェットの種類を確認することができます。

ワードプレスの管理画面から「外観」→「ウィジェット」とクリックします。

クリックすると下記のような画面に移動します。

左には表示することができる項目が並んでいます。

右にはウィジェットの一覧とウィジェットで表示される設定になっている項目一覧が出てきます。

一番最初にお見せしたものが「サイドバー」にあたります。

こちらの項目をいじってみたいと思います。

「最近のコメント」「カテゴリー」「メタ情報」を下図のような手順で削除します。

続いて、アーカイブという表示を変更します。

アーカイブとは過去の古い投稿の事を言います。

アーカイブという呼び名は閲覧者にとってはあまり浸透していないため「過去のお知らせ」という表示に変更します。

次に新しい項目を追加してみます。

ここでは「カレンダー」を新たにサイドバーに追加してみます。

これで表の画面にも既に反映されています。

「ルビコンレストラン」ボタンを押して確認してみましょう。

サイドバーウィジェットは固定ページか投稿ページに移動しないと見れないため、投稿を見てみます。

設定した内容に表示が変わったことが確認できました。

他のウィジェットの追加方法も同じで、表示箇所が違うだけです。色々触ってみてください。

4.トップ画像の表示を変える

ここまで来て、気になっていた方もいるのではないでしょうか?

トップ画像の「WORDPRESS.ORGにてトップ10以内、最も人気のあるテーマ」の表示を変えられないの?と。

もちろん変えることができます。こちらの表示もテーマに紐づくものになるので、「カスタマイズ」からの設定になります。

カスタマイズ画面の「大きなタイトルセクション」をクリックします。

メインコンテンツをクリックします。

「タイトル」に自分が表示させたい言葉を入力します。

ここでは、「こだわりの料理をあなたへ」とします。

ここでは、「こだわりの料理をあなたへ」とします。

入力し「保存して公開」をクリックします。

5.スマートフォン対応ページを作る

今やユーザー数がパソコンユーザーよりも多いと言われているスマートフォン。

一昔前のホームページだと、パソコンではきちんと表示されてもスマートフォンでは見づらいページがほとんどです。

下図は、パソコンで見た場合の弊社の会社ホームページです。

このページがスマートフォンに対応していないと、このような表示になります。

非常に見づらいですよね。

このような表示にならないように、スマートフォンでも見やすいページ(スマートフォン対応ページ)を是非作っておきたいものです。

今回使用しているテーマでスマートフォン対応ページを作製する方法をご紹介します。

『何もする必要はありません』

これが作製方法です。

どういうことかと言いますと、今までのパソコン用ページを作る感覚で、スマートフォン対応ページを作っていたのです。

これは今回使用しているテーマが「スマートフォン対応」だったからです。

スマートフォンで見た時だけ、画像の大きさや配列が変わり、文字は見やすい大きさになっています。

気を付けることがあるとすると、画像自体に文字を使いすぎると、画像が縮小した時に文字も同じ割合で縮小されてしまうため、見にくくなることがあるので、画像自体に文字を表示する場合は、大きく文字を表示させましょう。

もちろん、スマートフォン対応になっていないテーマを選ぶと、スマートフォンで見た場合には見づらいサイトのままになります。

テーマを選ぶ際に、スマートフォン対応しているかどうかを注意してみてください。

スマートフォン対応しているテーマだけを探す方法は下記のとおりです。

「外観」→「テーマ」→「新規追加」をクリックすると下記の画面になります。

特徴フィルターをクリックします。

レスポンシブレイアウトにチェックを入れ「フィルターを使用」ボタンをクリックします。

すると、レスポンシブレイアウト(スマートフォン対応)のテーマだけが一覧に出てきます

この中から、テーマを選ぶと必ずパソコン用のページを作りながら自動的に、スマートフォン対応ページを作ることができます。