こんにちは！白川です。
今回は、無料テーマの「Lightninng」を使った
架空のネイルサロンのホームページを見ながら
「Lightninng」の使い方を解説していきます＾＾
慣れてくれば、1時間ぐらいでできますよ～＾＾
こちらから動きのあるページをご覧いただけます。
ホームページの基礎知識を混ぜながら、
解説していきますね＾＾
ホームページで「なにを伝えたいですか？」
WordPressのテーマは、無料～有料まで多くの種類があり、どれも素敵です。
ホームページは自由に表現ができる分、ご自分がホームページを通じて
「どんな読者さんに」「なにを伝えたいのか？」を決めてから作り始めることが、はじめの一歩です＾＾
困ったら、いつでもご相談くださいね＾＾
Lightningはシンプルで、真面目な企業のサイト～個人向けまで幅広く対応できる使いやすいテーマです。
Lightningには、便利機能のための有料プラグインがありますが、今回は「まず作ってみたい。」という方向けに、
有料のプラグインは使わずに、100％無料の範囲で作成しています。
デザインにどれだけこっても・・見てくれるお客さんがいなかったり、
自分で簡単に編集ができないのでは、ホームページは死んでしまいます・・。
ですから「ホームページは、少しづつ成長させていくもの。」
という気持ちで、はじめてくださいね＾＾
ここからは、解説です
ここからは、Lightning（無料）でできることを順に解説していきます。
Lightningは、スライドショーも簡単に設置できます。
今回のネイルサロンでは画像を「Canva」で作成しました。
画像のサイズは、横幅1900px 高さ600px
で作成すると、きれいに入ります。
画像は、事前に用意しておいてくださいね＾＾
スライドショーをセットする
まずは、一番のメインビジュアル！
スライドショーを設置していきましょう＾＾
step
1「カスタマイズ」を開きます。
ダッシュボード（管理画面）からトップページへ移動、またはダッシュボードの外観から「カスタマイズ」を開きます。
step
2「Lightningトップページスライドショー」をクリックします。
カスタマイズのメニューの中の「Lightningトップページスライドショー」をクリックします。
step
3スライドショーの設定をします。
スライドショーは3枚まで設定できます＾＾
カスタマイズからスライドショーの項目を開き、設定しましょう。
関連
スライドショーは、以下の設定ができます。
・スライドショーの見せ方（スライド・フェード・カバーフロー・フリップ）
・スライドの静止時間（4000ミリ秒→4秒）
・スライドの切り替え時間（2000ミリ秒→2秒）
・スライド【1】スライドタイトル、スライドテキスト、ボタンのテキスト
1枚づつ、スライドの画像に見出しと本文とボタンを表示できます。スライドショーから個別のページにリンクを貼りたい場合に設定してください。
・スライド画像リンク先 URL＝スライド画像がクリックされた時（ボタンがクリックされた時）移動先のページのリンクを設定できます。
step
4「公開」ボタンを押して保存します。
スライドショーの設定が済んだら、最後に「公開」ボタンを押して保存します。
※「公開」を押し忘れると変更内容が保存されません。
はじめての方へなど「お知らせ」を載せる
スライドショーから下（ヘッダーから下）は、固定ページの編集機能を使って作っていきます。
step
1固定ページから「ホームページ」の編集を開きます。
ダッシュボードに移動して、固定ページの「ホームページ」の編集を開きます。
※Lightningは、インストールと同時に、いくつかのページが自動で作成されています。
step
2画像を追加します。
青いプラスマーク、または黒いプラスマークを押すとブロックを追加するメニューが表示され、画像を追加できるようになります。
※クラシックエディタをお使いの方は、ブロックエディタに切り替えてから編集してください。
全幅のカバーをつけて「今風」にします
あっという間に今風のデザイン「全幅のカバー」が設置できます。
（個人的には、簡単すぎで一番の衝撃でした！笑cssを必死で勉強した日々が懐かしい・・。）
↓こういうのです。
全幅カバーの設定方法
step
1「全幅見出し サブテキストあり」を追加します。
先ほどと同じように、青いプラスマークまたは黒いプラスマークから
「ブロックを追加」を表示して、検索窓に「全幅」と入力すると
「全幅見出し サブテキストあり」と「PRコンテンツ全幅」の2種類が出てきます。
今回は、見出しにして、この下にネイルのメニューを置きたいので
「全幅見出し サブテキストあり」を選びました。
step
2デザインを変更します。
黒いカバーになるのでデザインを変えていきます。
右側の設定にある画像をクリックして削除→メディアを挿入ボタンを押すと背景に好きな画像を設定できます。
step
3カバーの色を変えます。
カバーの色も設定の中で変えられます。
色の下にある「不透明度」のスライドを動かすとカバーの透明度が変更できます。
今回は、白の60％にしました。
ここにある以外の色にしたい場合は、Webカラー（#123456）の形で指定してください。
ネイルメニューの料金表をセットします
step
1料金メニューを設置します。
再び、青いプラスマークまたは黒いプラスマークから「ブロックを追加」を表示して
「すべて表示」を押し「カラム」を選択します。カラムとは、横に並べるボックスのことです。
今回は、3つですが、お好みに応じて変更してください。
step
2カラムの変更は、お好みで。
カラムも1つ1つ設定できますので、お好みに応じて変更してください。
フッターの設定
一番下のフッターは、前ページに共通になります。
自由に設定することができるので、お客様が使いやすい設計にしましょう＾＾
フッターは「ウィジェット機能」を使い設定します。
step
1「ウィジェット」をクリックします。
上のバーから、再びカスタマイズを開き「ウィジェット」をクリックします。
step
2フッターウィジェット1、2、3を設定します。
フッターウィジェット1、2、3、は、それぞれ独立した3つのブロックが並んでいます。
まとめ
以上で、トップページが完成しました＾＾お疲れ様でした。
ホームページは、お客様が知りたい情報を載せておくことが大切です。
こだわりを出しつつ、魅力が伝わるホームページを作っていきましょう＾＾
ご質問やご相談も受け付けておりますので、お困りのことがありましたら。
無料メール相談から、お気軽にお問い合わせください＾＾
