Web集客無料メール講座

ウェブ集客に関するメール講座を期間限定で無料購読できます。

詳細はこちら

外観をカスタマイズして、オリジナルの設定をしよう!

サイトの骨格を作る

WordPressは、管理画面からウェブサイトの外観をカスタマイズできるようになっています。

通常、ウェブサイトの外観をカスタマイズしようと思ったら、HTMLやCSS、PHP等のプログラムの知識が必要となりますが、WordPressを使う事により、プログラムが全く分からなくてもデザインを簡単に変更する事ができるのです(テーマによってはカスタマイズできる項目が異なります)。

今回は「Lightning」テーマを使用していますので、「Lightning」テーマのカスタマイズを解説したいと思います。

ダッシュボード>外観>カスタマイズ を選択します。

WordPressはテーマのカスタマイズをする際、プレビュー表示をしたまま変更する事が出来ます。

「Lightning」テーマでカスタマイズできる項目は9箇所あります。順番に解説していきます。

1. サイト基本情報

サイト基本情報では、「サイトのタイトル」と「キャッチフレーズ」を編集する事が出来ます。

 

※「Lightning」はキャッチフレーズが表示されないようになっています。ウェブ検索した際、検索結果で表示されるか、Facebook等でリンクをシェアされた際にキャッチフレーズが表示されます。

 

「サイトアイコン」はブラウザのタブや、ブックマークやお気に入りに入れたときにタイトル左側に表示されるアイコン画像です。

今すぐ使う項目ではありませんので、アイコンを作成したら追加しましょう。

 

 

2. メニュー

メニューは、カスタマイズ画面から「ナビゲーションメニュー」を編集する事ができます。

 

詳しい方法は「ナビゲーションメニューを作成し、メニュー表示を見やすくカスタマイズしよう」を参考にして下さい。

 

「メニューの位置」はカスタマイズ画面から2か所あるメニュー表示を選択する事が出来ます。

 

 

 

 

3. ウィジェット

ウィジェットは、テーマに表示できるウィジェットを設定します。

 

詳しい設定方法は、「サイドバーに最新記事一覧を表示させよう」で解説しておりますので、こちらを参考にして下さい。

 

カスタマイズ画面から、ウィジェットの表示設定を変更する事が出来ます。

 

 

 

 

 

 

 

 

4. ホームページ設定

ホームページ設定は、ウェブサイトのトップページを設定する事が出来ます。

 

詳しい設定方法は、「トップページの画面を設定しよう(トップページに表示させたいページを作成する)」で解説しておりますので、こちらを参考にして下さい。

 

カスタマイズ画面から、トップページの表示設定を変更する事が出来ます。

 

 

 

 

 

 

 

5. 追加CSS

追加CSSは、ウェブサイトのCSSを設定する事が出来ます。

 

※CSSとは
CSSを解説する前に、HTMLについて簡単に触れさせていただきます。まず最初に、HTMLはウェブサイトのページ構成などを定義するプログラム言語です。見出しで使用する「hタグ」や段落「pタグ」や改行「brタグ」等がHTMLです。

一方、CSSは、HTMLで記述したサイトの見た目を装飾などで整えるためのプログラム言語となります。見出しの色を変えたり、文字の大きさやフォントを定義します。

 

追加CSSでできる事は、例えば見出しの文字を太字にしたり、色を変えたり、装飾したり、といった、簡易的なカスタマイズを追加CSSでできるようになります。

使用するテーマによっては追加CSSで書き加えた内容がうまく反映されない場合があります。もし、反映されないような場合は、直接、スタイルシートを編集する必要があります。

 

6. Lightning デザイン設定

デザインスキンは今のところ変更できませんので、このままです。

テーマによってはスキンを変更できるものもありますが、「Lightning」テーマは今のところスキンが用意されていませんので、何も変更するような事はありません。

 

ヘッダーロゴ画像」は、ロゴ画像を作成、若しくはロゴ画像を用意している場合は、ここへドラッグしてロゴを入れます。

ロゴ画像をアップロードしない場合、ウェブサイトのタイトルがそのまま文字で表示されます(画像を用意していないのであれば、そのままで問題ありません)。

 

キーカラー」は、ウェブサイト全体の配色を簡単に変更する事が出来ます。キーカラーを変更すると、見出しの色やサイドメニューの配色、マウスオーバー時の配色が変更されます。

 

キーカラー(暗)」を変更すると、リンクテキストの配色やボタン枠の配色を変更できたりします。

「キーカラー」「キーカラー(暗)」のいずれも、気に入らなければデフォルト(初期設定)ボタンをクリックすれば簡単に元通りに出来ますので、いろいろ触ってみると良いかと思います。

キーカラー変更例

カラーピッカーを操作するだけで、ウェブサイトの配色を簡単に変更できます。

色を選ぶ際に参考になるサイト

シーン別配色見本32パターン:配色の基礎について分かりやすい説明があります。
配色パターン:シンプル・ダーク等といった印象別に配色パターンを掲載してあります。
配色の見本帳:ベースカラーを選択すると、色の法則から多彩な配色を提案してくれます。
ウェブ配色ツールVer2.0:カラーピッカーを操作して色を選択し、プレビューでサイトイメージを確認できます。
HUE/360:色相、彩度、明度を直感的に操作することで色の組み合わせが試せるサービス。

その他の設定

キーカラーの下にあるその他の項目

トップページを1カラムにするチェックを入れると、トップページにサイドバーが表示されません。
※変更されるのはトップページだけです。
トップページでデフォルトの投稿リストや固定ページを表示しないチェックを入れると投稿リストや固定ページが表示されません。※任意の固定ページをトップページに設定していても、チェックを入れると表示されません(こちらの設定が優先されます)。
投稿詳細ページで最終更新日を表示しないチェックを入れると、投稿記事の最終更新日が表示されません。
投稿詳細ページで投稿者名(ニックネーム)を表示しないチェックを入れると、投稿記事の投稿者名(ニックネーム)が表示されません。
サイドバーに表示されるページリストを全て表示せずにアクティブでない階層を非表示にするチェックを入れると、固定ページなどを表示した際に、サイドバーに関連ページへのリンクが全て展開されるのを防ぐことができます。※チェックを入れる事をおススメします。
サイドバーを固定しないチェックを入れるとサイドバーが固定されます。

メニュータイプ(モバイル端末時)

VK Mobile Nav(推奨)スマートフォンでアクセスした際に表示されるメニューを任意のウィジェットを表示させるようカスタマイズできます。

テーマ配布元サイト「VK Mobile Nav の特徴

縦展開(Ligthning標準)スマートフォンでアクセスし、メニューボタンを押すとメニューが縦に展開します。
Side Slide(非推奨)スマートフォンでアクセスし、メニューボタンを押すと、メニューが左から右に出現し(ページは右端に追いやられます)、メニューが縦に一覧表示されます。

※「VK Mobile Nav」は非常に使い勝手の良い機能ですが、WordPressに慣れるまでは、真ん中の「縦展開」にしておいた方が無難だと思います。

メニューボタンの位置(モバイルモード)

スマートフォンでアクセスした際のメニュー位置を決める事が出来ます。(初期設定では左)

サイドバーの位置(PC閲覧時)

パソコンでアクセスした際のサイドバーの位置を変更する事が出来ます。(初期設定では右)

 

7. Lightning トップページスライドショー

トップページスライドショーについては、「ヘッダー画像を入れてみよう」で解説致しますので、こちらを参考にして下さい。

 

8. Lightning トップページPR Block

Lightning トップページPR Blockでは、トップページに配置してある「RP Block」を編集する事が出来ます。

初期設定ではトップページに表示されるよう設定してありますが、チェックを外すと「PR Block」を消す事が出来ます。

「PR Block」の編集方法

「RP Block」の編集は、「アイコン」、「タイトル」、「テキスト」、「リンクURL」の4つを編集する事が出来ます。

アイコンアイコンを変更できます。
タイトルPR Blockのタイトルを編集できます。
サブテキストタイトルの下に表示されるテキストを編集できます
リンクURLリンクURLを設定すると、サブテキストにリンクを張る事が出来ます。

 

9. Ex Unit 設定

Ex Unit設定では、「SNS設定」、「お問い合わせ情報」「関連記事設定」の3つを設定する事が出来ます。

それぞれの設定方法を解説していきます。

 

 

 

SNS設定

SNS設定では、SNSボタンの配色を変更する事が出来ます。初期設定では、SNSボタンは下記のような配色がされています。

「背景なし」にチェックを入れると、SNSボタンの配色が消え、グレーの枠線表示と変化します。

「色を選択」をクリックし、カラーピッカーで色を指定すると、指定した配色にSNSボタンが変化します。

「背景なし」にチェックを入れると、上記配色が反転し、外枠とテキストに配色されます。

「カラーピッカー」の横にある「クリア」をクリックすると元のSNSボタンの配色に戻ります。

お問い合わせ情報

お問い合わせ情報を設定すると、本文下部とサイドバーにお問い合わせ情報を表示させる事が出来るようになります。この機能はコーポレートサイトを作成する際、非常に便利な機能です。

それでは、お問い合わせ情報の設定方法について解説していきます。

メッセージ:メッセージを記載すると、電話番号の上にメッセージを表示させる事が出来ます。

電話番号:お問い合わせ先の電話番号を記載します。

営業時間:営業時間を入力すると、電話番号の下に営業時間が表示されます。

お問い合わせ先URL:お問い合わせページのURLを入力します。入力したURLは、ページ下部とサイドバーウィジェット共通設定となります。

※お問い合わせフォームの作成方法は、「WordPressプラグイン「Contact form 7」で手軽にお問い合わせフォームを作ろう」で解説しています。

お問い合わせボタンに表示するテキスト:ページ下部のお問い合わせ情報のお問い合わせボタンのタイトルを変更できます。

お問い合わせボタンに表示するテキスト2:お問い合わせボタンの下にメッセージを追加する事が出来ます。入力したメッセージは、ページ下部とサイドバーウィジェット共通設定となります。

お問い合わせボタンウィジェットに表示するテキスト:サイドバーウィジェットのお問い合わせボタンのタイトルを設定できます。

お問い合わせバナー画像:お問い合わせのバナー画像を用意している場合、バナーを設定すると、お問い合わせ情報を差し替える事が出来ます。

お問い合わせ情報として表示するHTML:プラグインで用意されているお問い合わせ情報を使用せず、任意のテキストやHTML情報を表示させたい場合、ここにHTMLを入力すると、お問い合わせ情報を差し替えて表示させる事が出来ます。

関連記事設定

関連記事設定では、投稿記事の下に表示される「関連記事を表示」というタイトルを変更する事が出来ます。

下記のように、「タイトル」に任意の文章を入力すると、投稿記事の下にある関連記事のタイトルを変更する事ができます。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
無料メール講座
集客に強いWordPressを活用してあなたのファンを引き寄せる「Web集客無料メール講座」

今なら無料で下記ノウハウが手に入ります。

WordPressでビジネスサイトを構築するマニュアル
売り込まなくても楽に売れるWeb集客ノウハウ
あなたの商品・サービスを必要としている人に届ける方法

期間限定2大プレゼント「WordPressでビジネスサイトを構築するマニュアル」&「Web集客無料メール講座」

PROFILE
この記事を書いた人
瀬間 隆司

上野を拠点に中小企業の資金繰り・事業再生コンサルタントとして活動しています。
最近は自分でウェブサイトを作りたいという企業や、独立された方、独立を考えている方等にWordPressを活用したウェブサイト作り方をレクチャーしています。

他にも、チャットボットを作ったり、業務効率化のためにRPAを研究したり、目新しいものに飛びつく傾向があります。

フォローする
サイトの骨格を作る
クリエイトエクスプレス