更新日: 2024年1月17日

出し惜しみ無し!
士業専門のホームページ制作のプロが、無料で教える士業のホームページの作り方講座 vol.3

ワードプレス

士業が自分でホームページを作成する方法としてシリーズ化しているこの講座のvol.3です。
前回までの講座は以下をご覧ください。

士業が自分でホームページを作成する方法vol.1
士業が自分でホームページを作成する方法vol.2

今回はワードプレスのテンプレートテーマを使って士業のホームページらしいデザインにしていきましょう。

【士業専門】ワードプレスのテンプレート「カタナ」

カタナのトップページ

デモサイトをそっくりそのままコピー可能!
サムライサイトが開発した、士業専門テンプレートの「カタナ」です。デモサイトをそのままダウンロードできるため、画像と文章を入れ替えるだけで士業のホームページが完成します。

スマホ・タブレット SEO対策 カスタマイズ
対策済み 初心者でも可能
初期ページ数 メールフォーム おまかせ編集
合計7ページ あり 可能
厳選5つ!

ワードプレス無料テンプレートテーマをお探しの方はこちらもご覧ください。

【無料】ワードプレスのテーマ:自作簡単な士業向けホームページのおすすめテンプレート

プロが教える士業のためのホームページ作成講座vol.3の目標

1.士業のホームページらしいデザインのホームページを作ろう!

2.ホームページの核となるメニューを作成しよう!

ワードプレスのテンプレートテーマって?

テンプレートテーマとは、いわゆる雛形です。
ワードプレスには日本で公開されているテンプレートテーマですら数えきれないほどありますが、海外も含めるとそれこそ星の数ほどあります。

デザイン性に優れたものやコーポレートサイト(会社のホームページのこと)や、SEO対策に特化したテンプレートテーマが山のように公開されています。

しかし、それほどの数のテンプレートがあれど士業向きのテンプレートテーマは多くはありません

そこでお勧めの士業向けのテンプレートテーマを紹介しますので、士業らしいホームページを作りましょう。

お勧め!士業向けの無料テンプレートテーマ「Lightning」

士業向けのテンプレートテーマとしてワードプレス公式テーマの「Lightning」があります。

lightning

この「Lightning」をワードプレスにインストールしていきましょう。無料です。

「失敗するかも…」という不安は拭い去りましょう。

テンプレートテーマは消したり入れたり増やしたりと自由度が高いものです。

やり直しは何度でも効くので思い切ってやってみましょう。

「Lightning」のインストール方法

1.「Lightning」の検索

「ダッシュボード」→「外観」→「テーマ」→「新規追加」→右側にある「テーマを検索」に「Lightning」と打ち込む

テーマインストール

2.「Lightning」の有効化

「Lightning」にマウスを合わせる→「インストール」→「インストール中」と表示が変わるので終わったら「有効化」

テーマインストール2

しばらくすると画面が切り替わり「新しいテーマを有効化しました。」と1文だけ表示されます。
これでテンプレートテーマの適用は完了です。

3.ホームページを見てみよう

実際にテンプレートテーマが「Lightning」に変わったか見てみましょう。

新しいテーマを有効化しました。」の横に「サイトを表示」と出ているのでクリックしてください。

Lightning適用

このように「Lightning」のテーマが適用されていればOKです。

適用されていない方は再度同じ手順を繰り返してみましょう。

テーマのインストール方法のポイント

1.士業向けのテンプレートテーマは「Lightning」
2.手順通り進むだけでインストールできるため簡単!

ここまでの設定で上手くいかない士業の方はこちらへ

いよいよ自分のホームページにしていくための編集へ

ここからついに本格的にホームページの編集です。

まずはホームページの核となるメニューを作ります。

下記画像の赤枠で囲んだようなメニューを作っていきましょう。

メニューを作る

メニューを作るために固定ページを作成する

メニューは「固定ページ」というページをメニューに追加していくことによってメニューが出来上がります。

『メニューという大枠に固定ページという部品を入れていく』というイメージです。

よってまずは部品である固定ページを作成していきます。

固定ページってなに?

ワードプレスにはホームページの内容を記載していく記事を書く画面が大きく分けて
1.投稿
2.固定ページ
の2つあります。

それぞれ細かい説明は省略しますが、
「1.投稿」はブログ記事のようなイメージを持ってください。
いくつもの記事を投稿するような場合に使用します。
「2.固定ページ」は会社サイトでいう「商品説明」のページ等のイメージを持ってください。
その名の通り、一度作ったらあまり編集しないので「固定」されたページということです(編集しないだけで編集することはもちろん可能です)。

そのため士業ホームページのメニューとなる「業務内容」や「料金案内」については固定ページで作成していきます。
(「1.投稿」に業務内容等のページを入れることもありますが、ここではシンプルに全てを固定ページに入れます)

固定ページに作りたいメニューのページを作る

「ダッシュボード」→「固定ページ」を見ると

1.サンプルページ

2.プライバシーポリシー

の2つが初期設定で入っています。

ホームページの編集

サンプルページは「ゴミ箱へ移動」をクリックしてOKです(元に戻すこともできますので気軽に捨てましょう)。

プライバシーポリシーは後で編集するため今はそのままの状態で放置しておきます。

では、士業のホームページに必須であろう項目を作っていきましょう。

ここでは

1.トップページ

2.業務内容

3.料金案内

4.相談の流れ

5.事務所概要

のページを作ります。

デモサイトをそっくりそのままコピーできる「カタナ」登場!
「カタナの」デモサイトをそっくりそのままあなたのホームページにコピーできるようになりました!
士業専用のテンプレート「カタナ」をご覧ください。
「カタナ」紹介ページはこちら

固定ページへの投稿の方法

「固定ページ」→「新規追加」→「タイトルを入力」→「公開」

(本文の入力は後でするので今はなにも書かないまま公開しましょう)

ホームページの編集2

この手順でページが1つ作られました。

今回、タイトルは「トップページ」としていますが、「業務内容」や「料金案内」ページなどのタイトルをつけて同じ手順でどんどん作っていきましょう。

「固定ページ一覧」を見て下記のようにページが作成されていたらOKです(順番はバラバラになっていてもOKです)。

ホームページの編集3

固定ページのポイント

1.メニューに入れたい項目を「固定ページ」で作成する
2.「公開」ボタンをクリックすることを忘れずに!

ここまでの設定で上手くいかない士業の方はこちらへ

メニューを作成する

固定ページで作ったページをメニューに追加していきましょう。

メニューを作る

「ダッシュボード」→「外観」→「メニュー」→メニュー名に「ナビゲーションメニュー」と名前をつける→「メニューを作成」

これで大枠であるメニューも作成できました。

ここから部品である固定ページをメニューに入れていきましょう。

メニューに固定ページを入れていく

1.固定ページをメニューに入れる

「固定ページ」という枠の中に先ほど作成したページが表示されています。

「すべて選択」→「メニューに追加」

の手順で進みましょう。

メニューに追加する

すると、右側に各ページのタイトルが表示されます。

メニューに追加していく

2.順番を入れ替える

このままでは順番がバラバラなため、ドラッグ&ドロップ(マウスを押したまま移動して移動先で放す)をして順番を入れ替えます。

メニューを入れ替える

順番は自分がベストだと思う順番でOKです。

今回は上記画像の順番にしておきます。

ここで注意!

下記画像のように一段ズレてしまうと上手くメニューが表示されないことがあります。

注意

これは「子ページ」と呼ばれる機能を利用することになるためです。
ちゃんと表示させるために、しっかりと整列させた状態にしておきましょう。

子ページとは?

ページには「親ページ」と「子ページ」があります。
イメージでいうと、親ページはメインフォルダで子ページは親ページ内にあるサブフォルダです。
親ページでなければメニューにちゃんと表示されないので気を付けましょう。

3.「メニューの位置」にチェックを入れて保存する

「メニューの位置」の3つのチェックボックスにすべてチェックを入れる→「メニューを保存」

メニューを保存

これでメニューが完成しました。

4.メニューが表示されているか確認しよう

ホームボタン

ダッシュボードの左上にある家のマークをクリックすると自分のホームページを見ることができます。

下記のように表示されていればOKです。

メニューを作る

メニュー作成のポイント

1.メニューは好きなページを入れることができる
2.メニューの数は少なめがベスト!見る人が迷わないようにしよう

ここまでの設定で上手くいかない士業の方はこちらへ

士業のためのホームページ作成講座vol.3まとめ

ついに士業のホームページらしくなってきました。

次の記事の更新時期は未定です。