【超初心者でもできるサイト製作】WordPressとLightningテーマで見やすく格好良く!

【整体師・セラピストのためのサイト製作】WordpressとLightningテーマで見やすく格好良く!

ネットで集客カテゴリ【初心者でも出来る!WEBサイト作り第4弾】。いよいよテキスト(文章)を記載して濃いめの内容を充実させていきます。

この作業をやりだすと「自分は何故整体をやるのか」「自分は何者なのか」改めて考えさせられることになると思います。自己の啓発は一度じゃ終わりません。何度も繰り返して【個】を明確に・・・・するために、ウェブサイトやSNSでの発信があると言っても過言じゃない。開業しない人もみんなウェブサイト作ったら良いのにと思います。

今回の作業は

  • トップページとブログトップの設定
  • 記述のルールを知りつつ
  • トップページの作り込み

です。張り切っていきましょう

【超初心者向け】ウェブサイト製作編Vol.4「固定ページの作成」と記述のルール

ワードプレスで作成するページには【投稿】と【固定ページ】の2種類あります。一昔前と違って、集客の軸は【投稿】(ブログ)になりますが、最低限必要なページは【固定ページ】で作り込んでしっかり常設しておきます。

いつでも簡単に見られるようにしておきたい常設のページは

  • トップページ(ホームページ)
  • プロフィール
  • サービス内容+料金
  • アクセス
  • 予約・問い合わせフォーム
  • 特定商取引法表示
  • 個人情報の取扱
  • サイトマップ

とりあえずコレくらいは常設しておきたいところです。
ただし、スマホやタブレットでの閲覧が増えている今、クリックさせて別のページを見せるよりもスクロールさせて全部見せたほうが親切だと思うので、【プロフィール・サービス内容+料金・アクセス・予約お問わせ】はまとめてトップに表記してても良いと思います。

トップページと投稿トップの作成

まず、トップページの元になるページと投稿のトップを設定します。

【超初心者向けサイト製作】WordpressとLightningテーマで見やすく格好良く!チップページの設定

【固定ページ】の【新規追加】をクリック

【超初心者向けサイト製作】WordpressとLightningテーマで見やすく格好良く!トップページの設定

*1 トップページだとわかりやすいタイトルをつけます(表には表示されません)
*2 トップだとわかりやすいスラッグを入力(表には出ません)
*3 シェアされたときに表示されるアイキャッチ画像を選びます。(前回アップロードしたヘッダー画像でOK)
*4 検索結果やシェアされた際に表示される抜粋(ディスクリプション)を入力します。サービス内容や地域名といった重要なキーワードを散りばめて気を引く文章を150文字くらいで簡潔に。とても重要なので手を抜かないように。
*5 ひとまず内容は白紙のまま【公開する】ボタンをクリック

【超初心者向けサイト製作】WordpressとLightningテーマで見やすく格好良く!ブログトップページの設定

もうひとつ、同じ手順で【固定ページ】【新規追加】と進み、ブログのトップになる固定ページを追加します。

こちらのタイトルは表に表示されるので、『公式ブログトップ』などとします。
スラッグもURLとして表示されますから『blog』とします。
アイキャッチや抜粋も同様に設定すればベストですが、ブログのトップ(記事一覧)がシェアされる事は滅多に無いです。
テンプレートは【デフォルト】を選んで、公開するをクリック。

【超初心者向けサイト製作】WordpressとLightningテーマで見やすく格好良く!トップページをブログトップページの設定

次に左のメニューから【設定】【表示設定】と進んで

各トップページの表示設定

*1 【ホームページの設定】で固定ページを選択
*2 【ホームページ】で先程トップとして作成したページを選択
*3 【投稿ページ】で先程ブログのトップとして作成したページを選択
*4 【RSS/Atom】で抜粋のみ表示を選択
*5 後でこのチェックを外すのを忘れそうなのでもう外しちゃいましょう

で、変更を保存。
それでは先程空のまま保存したトップページを作り込んでいきましょう。

トップページの作り込み

【超初心者向けサイト製作】WordpressとLightningテーマで見やすく格好良く!トップページの作り込み

【固定ページ一覧】から先程の【トップ】をクリックして編集に取り掛かります。(ブログのトップには今後書いていくブログのタイトルとアイキャッチと抜粋が自動で表示されます。もういじることありません)

トップページに必要なのは

  • どんな人が
  • 誰に向かって何を提供し
  • 結果ユーザーは何を手に入れるのか
  • 何処で・幾らで
  • コレって私が探してたサービスだ。ヨーシ予約取るぞ!

という流れを生むコンテンツです。
文章を補う写真やイラスト、動画なども織り交ぜながら、基本的に『読まない』ユーザーにも伝わるように工夫をしていきます。

ワードプレスは今年からブロックエディタという形式になりました。記述する内容にあったブロックを選べば正しいタグが挿入される便利なスタイルです。実際に記述しながら慣れていきましょう。

【超初心者向けサイト製作】WordpressとLightningテーマで見やすく格好良く!トップページの作り込み

⊕ボタンをクリックして(左上にあるのも同じ)ブロックを選びます。

【超初心者向けサイト製作】WordpressとLightningテーマで見やすく格好良く!トップページの作り込み

まず【見出し】を選びます。

【超初心者向けサイト製作】WordpressとLightningテーマで見やすく格好良く!トップページの作り込み

見出しが挿入されこんな表示になります。
H2、H3、H4はそれぞれ順番通りに使うのがルールです。(ちなみにページタイトルがH1です)
H2の下にはH3が2つ入ってもう一度H2が入ったりするのは構いませんが、H3から始まってH2になるのは無し。ハウツー本などにある【見出し・中見出し・小見出し】の要領を守ります。(見た目で順番決めないように!)

【超初心者向けサイト製作】WordpressとLightningテーマで見やすく格好良く!トップページの作り込み

タイトルを入力したら次は本文。ブロックの下に出る⊕か横にある⊕をクリックして【段落】を選びます。

【超初心者向けサイト製作】WordpressとLightningテーマで見やすく格好良く!トップページの作り込み

本文の前にアイキャッチ的な画像をバーンと入れるのも効果的です。その場合は同じように【画像】のブロックを選択。

【超初心者向けサイト製作】WordpressとLightningテーマで見やすく格好良く!トップページの作り込み

アップロードをクリックして画像を選択するか、画像のブロックへ直接ドラッグ&ドロップ。
このページはサイドバー無しに設定したので、画像の幅は1400pxで横幅いっぱいに表示されます。

【超初心者向けサイト製作】WordpressとLightningテーマで見やすく格好良く!トップページの作り込み

サイズを整えた画像を挿入したら忘れずにAlt(代替テキスト)を入力。画像サイズをフルサイズに指定。

こんな感じで、【見出し】【画像】【段落】各ブロックを使い分けながら作り込んでいきます。他にも色んなボックスが用意されているので、表記を確認しながら試してみてください。

他に通常よく使うボックスは、箇条書きのための【リスト】、他のサイトや書籍などからの引用を示す【引用】(引用ボックスを使わずに引用したら盗用です)、料金表などに【テーブル】、ユーチューブやツイッターなど【埋め込み】、【ボタン】【質問と回答】【フロー】など、便利なボックスが沢山あります。

【見出し】【箇条書き】【引用】はルールなのできちんと使うこと。ワードプレスがスタンダードになる前はこれらのタグをいちいち覚える必要がありましたけど、ボックス選ぶだけで済むから有り難く使いましょう。

トップページはサイドバー無しで設定したので、もし手力整体塾の通信講座ページのような表記にしたい場合は、VK Blocks の中にある PR Content ブロックを使う。

トップページを作り込む ー PRコンテンツボックス

こんな感じで写真と文章を並べて表示できます。(スマホでは縦に並びます)

タイトルの文字色もいじれるので、【カスタマイズ】【デザイン設定】で指定した色など選んでみると良いでしょう。

トップページを作り込む ー PRコンテンツボックス

PR Content にはボタンも設定できます。
*2 ボタンの文字を入力すると勝手にボタンが表示されます。
*3 後に詳細プロフィールのページを作ったらURLを入力します
*4 ボタンの色はタイトルの色を指定した時と同じ要領で。一旦クリアをクリックしてから #996600 など【デザイン設定】で指定した色を選びましょう。

長くなったので今回はここまで。

  • トップページ(ホームページ)
  • プロフィール
  • サービス内容+料金
  • アクセス
  • 予約・問い合わせフォーム
  • 特定商取引法表示
  • 個人情報の取扱
  • サイトマップ

サービス内容+料金までをしっかり考えてまとめておいてください。【アクセス】【予約・問い合わせフォーム】はまた今度!

画像をアップロード

無料体験受付中

11/3(日)11/17(日)
壊れない、無くならない。体験を財産に、知恵と技術を資産に。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください