シマタケ

プロデューサー歴20年のシマタケです。
僕自身、満足のいくホームページ作成に出会えなく、
現在はホームページ作成を提供し、

かつ、ご自身で運営できるようサポートしています。

ワードプレス公認テーマ「ライトニング(Lightning)」は個人ブログから本格的な企業ホームページまで作成する事ができるおすすめのテーマ。

今回はトップページのスライドショーや、ヘッダーへのロゴマーク設置等、ホームページの「顔」とも言える部分を設定する、ライトニングの「カスタマイズ」ページの解説をいたします。

「カスタマイズ」ページにはいろんな項目がありますが、今回お伝えする項目を設定すれば立派なホームページの「顔」が完成します。

まずは今回の設定を行なって、少しづつ「カスタマイズ」ページに慣れていってください。

「カスタマイズ」機能とは?

シマタケ

ワードプレスの操作は大きく分けて3つのセクションに分かれています。

1、ホームページ全体のデザインを行う「カスタマイズ」機能
2、ホームページの各ページを作成する「固定ページ」
3、ブログやニュース記事を作成する「投稿」

「カスタマイズ」機能はページの外観や基本設定を簡単に変更できる便利なツールです。
この機能をわかりやすく3つの項目に分けて説明します。

「カスタマイズ」ページ
左に操作パネルが出て、
右はプレビュー画面になるので操作しやすい!

1、ページ全体のデザイン調整

カスタマイズ機能の項目にて、フォント、カラー、レイアウトなどを変更できます。

カラーパレットの調整
配色を変更して、ブランドや好みに合わせたデザインを実現します。

ロゴやヘッダー画像の変更
サイトのロゴやバナーをアップロードして、ブランディングを強化します。

2、ナビゲーションの設定(メニューとウィジェット)

メニュー
メニューバーに「ホーム」「サービス」「お問い合わせ」などの各ページのリンクを追加する事ができます。

ウィジェット
サイドバーやフッターに、カレンダー、検索バー、SNSリンクなどの機能を配置する事ができます。

3、基本情報と機能の設定

サイト情報
サイトのタイトル、キャッチフレーズ、ロゴ、アイコン(favicon)などを設定します。

ホームページの表示形式
トップページをブログ一覧にするか、固定ページ(例: サービス案内ページ)にするか選択できます。

CSSの追加
さらにデザインを細かく調整したい場合は「カスタムCSS」を追加できます。

まず、ホームページの基本情報を設定

ビギナーさん

いろんな設定ができる「カスタマイズ」
まずは何から設定すれば良いでしょうか?

シマタケ

ホームページの「名称」「キャッチコピー」「アイコン」を設定いたします。

これらは、ページを開いた際のブラウザのラベルや、検索サイトに掲載されるので、検索して貰うために重要な要素(SEO的に)。初めにしっかり設定してください。

「カスタマイズ」ページへの移動

1、まずダッシュボードの左カラムの「外観」を触ると右にラベルが出てきます。

その中の「カスタマイズ」をクリック。

2、すると参照画像のように「カスタマイズ」ページへ移動します。

カスタマイズページは、左が操作パネル、右はプレビュー画面になるので操作しやすいです。

次に操作パネルの「サイト基本情報」をクリックしてください。

基本情報の設定

3、参照画像のように「サイト基本情報」のパネルへ移動します。

赤丸で囲っている「サイトのタイトル」「キャッチプレーズ」「サイトアイコン」にそれぞれお好きな名称やキャッチコピー等を追加してください。

お好きなもので良いのですが、前述したように名称やキャッチフレーズは、検索されやすいよう配慮が必要です。

以下、それぞれ設定時の注意点になります。

サイトのタイトル初期設定はワードプレスをインストールした際に設定したものになっています。英語でも日本語でも良いですが、読者が認識しやすく検索しやすい名称が良いです。
キャッチフレーズ検索される上で重要な箇所です。検索して貰いたいワードを組み合わせてキャッチコピーを設定しましょう。25文字以内にまとめてください。
アイコン(favicon)正方形もしくは真丸のロゴを掲載。サイズは512×512pixel推奨となっています。

4、参照画像のように、それぞれの項目に、タイトル、キャッチフレーズ、アイコンを設定します。

そうすると、次の画像のように、ブラウザのラベルに、タイトル、キャッチフレーズ、アイコンが表示されます。

次にロゴを設定

シマタケ

次に、ホームページのヘッダーにロゴを掲載します。

ビギナーさん

ヘッダーは、はじめに目にするところなので、とても大事な場所ですね。

ホームページのヘッダーとは?

「ヘッダー」とはホームページの最上部に表示される部分のことで、一般的に以下の要素が含まれます。

  1. ロゴ・サイト名
    • ブランドや企業のロゴ、サイト名を表示し、訪問者にサイトの認識を促します。
  2. ナビゲーションメニュー
    • 「ホーム」「サービス」「お問い合わせ」など、サイト内の主要なページへのリンクを設置します。

ロゴの設定

1、カスタマイズの左パネルの中の「Lightningデザイン設定」をクリック。

2、移動したパネルの中の「ヘッダーロゴ画像」にて「画像を選択」をクリックして任意のロゴ画像を選択してください。

推奨画像サイズは、500px(横) × 120px(縦) ですが、
細長いロゴばかりではないので、縦 120px で設定するしてください。


例)真四角のロゴなら、120px(横) × 120px(縦)

3、設定するとロゴがパネルにもプレビュー画面にも掲載されます。

ロゴの大きさは、同パネルの「ロゴの大きさ」にて、PC、モバイル(スマホ)それぞれ数値を入れると調整できます。

スライドショーの設定

シマタケ

次に、トップページに掲載されるスライドショーを設定します。
標準でスライドショーを設定できるのがライトニングの魅力のひとつです。

ビギナーさん

スライドショーを表示できるとプロっぽくなって良いですね^^

ホームページのスライドショーとは?

トップページに表示される画像や動画が自動で切り替わる仕組みのことを指します。Webサイトの印象を強くし、視覚的に魅力を伝えるのに役立ちます。

スライドショーの効果

✅ 視覚的にインパクトを与える
 → 大きな画像や動きのあるデザインで、第一印象を強くできます。

✅ 重要な情報をまとめて伝えられる
 → 複数のメッセージ(キャンペーン・サービス・会社の魅力など)を順番に見せられます。

✅ ブランドイメージを強化
 → プロフェッショナルなデザインのスライドショーは、信頼感やブランドの雰囲気を伝えるのに役立ちます。

設定方法

1、カスタマイズのパネルの中の「Lightningトップページスライドショー」をクリック。

2、移動したパネルの中の「表示設定」の項目にて「スライドを表示する」「しない」を選択できます。

デフォルトは「表示する」になっているので、表示したい方はそのままで良いです。

スライドショーを表示したくない場合は「表示しない」を選択してください。

3、パネルを下にスクロールすると、スライドショー画像に掲載される文字情報の設定ができます。

・スライドのタイトル
・スライドのテキスト
・ボタンのテキスト
・ボタンのリンク先設定


それぞれ空欄にすると表示されません。

4、掲載するテキストの掲載位置や色も設定できます。                   

5、さらにその下にスクロールするとスライドショー画像を選択する項目が出てくるので「画像を変更」をクリックして「画像を選択」にて任意の画像を掲載してください。

PC版の推奨サイズは1900px × 600px です。このサイズは本当におすすめです^^

6、画像を選択して掲載すると、このように表示箇所とプレビュー画面に反映されます。

7、上記したように、スライドショー画像の「タイトル」「テキスト」「リンクボタン」の項目に掲載情報を記載します。

情報の掲載が必要なければ、それぞれ空欄にすると表示されません。

8、上記したように、文字情報の位置を指定する項目でテキスト情報の掲載位置を指定してください。

サンプル画像では、右にテキストを指定しました。

9、掲載テキストの色を指定する項目が出てきます。こちらでテキストの色を指定してください。

サンプル画像では、テキストの色を白にしました。

10、このようにスライドショー画像とテキスト情報を設定します。

ライトニングでは標準で3枚のスライドを作る事ができます。

上記と同じ手順で、下にスクロールして、2枚目、3枚目の設定ができます。

モバイル版スライド画像の設定

ちなみに、

PC版画像設定の下に「モバイル用スライド画像」を設定する項目があります。

こちらは任意の設定となります。

設定しなければPC版の画像がモバイル(スマホ)に表示されます。その場合、横長の画像が表示されモバイル表示には適しません。

なので、こちらでモバイル表示に合わせた縦長の画像を掲載する事をお勧めします。                

その際の画像の推奨サイズは、830px (横)× 1040px(縦) になります。

そうする事で、モバイル版では縦型のスライドショーが表示されます。

まとめポイント

シマタケ

いかがでしたか。

ワードプレスのテーマ「ライトニング(Lightning)」の「カスタマイズ」項目の中でも最初にしていただきたい設定をご紹介しました。

これだけでも、だいぶオリジナリティーのあるページになります。

ぜひ、ご自分のイメージ合わせて設定してみてください。

「カスタマイズ」ページとは?

「カスタマイズ」機能はページの外観や基本的な設定を簡単に変更できる便利なツールです。


ホームページの基本情報を設定。

ホームページの「名称」「キャッチコピー」「アイコン」を設定いたします。

これらは、ページを開いた際のブラウザのラベルや、検索サイトに掲載されるので、検索して貰うために重要な要素(SEO的に)。初めにしっかり設定してください。

ロゴを設定

ホームページの顔となる「ヘッダー」にロゴを掲載します。そうする事でブランディングに大きな効果がでます。

スライドショーを設定

トップページに掲載されるスライドショーを設定します。
標準でスライドショーを設定できるのがライトニングの魅力のひとつです。

シマタケ

ワードプレスを用いて、ご自身で運営できる理想のホームページを作成する
弊社のホームページ作成サービス「MY PAGE」もご覧ください。

Follow me!