SKINテーマ「エステサロンのトップページ」作成手順を画像付きで解説

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順

※こちらの記事はホームページを自分で作成される方が対象の記事になります。

こんにちは、美ヨウ部編集長のカワジリです。

今回も「ヨウ子さん」と一緒にすすめていきたいと思います!

みなさん、よろしくお願いします!
ヨウ子
ヨウ子

ヨウ子さん、これまでは設定作業だけでしたが、いよいよホームページの制作作業がはじまります!

準備はよろしいでしょうか?

頑張ります!
ヨウ子
ヨウ子

とはいっても、今回もほとんど丸写しで作業は完了しますので安心して下さい!

美ヨウ部【How to Blog】の第5シリーズのホームページ作成編

「トップページ作成」について説明していきます!

ホームページのトップページ作成手順

トップページ(フロントページ)を作成していく手順を説明していきます。

ちなみにヨウ子さん!

トップページ(フロントページ)はどこのページかわかりますでしょうか?

ホームページの一番最初の画面ですよね?
ヨウ子
ヨウ子

その通りです!デモサイトのこの画面の部分です!

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。デモサイトトップページ

では作業にいきます。

「トップページ&ブログページ」を表示させる固定ページを新規追加する

「トップページ&ブログページ」を表示させるためには「表示専用の固定ページ」の追加が必要になりますので、先に追加作業をしていきます。

管理画面(ダッシュボード)の固定ページにカーソルを合わせ、「新規固定ページを追加」をクリックして下さい。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。固定ページを新規追加する

「新規固定ページを追加」の画面が表示されたら、「タイトルを追加」欄に名前を入力します。

このページは管理専用のページなので、わかりやすい「トップページ」と入れておきましょう。

「公開」をクリックします。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。新規固定ページ追加

これで「トップページ用の固定ページ」追加はOKです!

ついでに「ブログページ」の表示にも固定ページが必要になりますので、追加しておきましょう!

同じようにメニューの「新規固定ページを追加」をクリックするか、「固定ページ編集」横の新規追加をクリックします。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。ブログ用の新規固定ページ追加

再度、新規固定ページの追加画面が表示されたら、タイトルに「ブログページ」と入力しましょう。

「更新」をクリックします。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。ブログ用の新規固定ページ追加手順

これで「トップページ」と「ブログページ」を表示させる固定ページの追加は完了です!

「トップページ&ブログページ」の表示設定

次に管理画面(ダッシュボード)メニューの「設定」→「表示設定」をクリックします。

「ホームページの表示」は「固定ページ(以下で選択)」にチェック。

ホームページは、先ほど作成した固定ページの「トップページ」を選択。

投稿ページは、「ブログページ」を選択します。

「検索エンジンでの表示」の「検索エンジンがサイトをインデックスしないようにする」にチェックをして「変更を保存」をクリック。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。表示設定

「表示設定」は以上になります。

次にSKINテーマの「トップページコンテンツの表示設定」をおこなっていきます。

TCDテーマオプション「トップページの設定」

ここからは「TCDテーマオプション」の設定になります。

重要事項

トップページを作成していきますが、画像や写真が超重要になります。

初めての方は先に手順だけ覚えて頂いて、どこにどんな画像や写真が必要になるかまずは知って下さい。

画像サイズや対比なども把握しておきましょう!

管理画面(ダッシュボード)の「外観」にカーソルを合わせ、「TCDテーマオプション」をクリックして下さい。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。TCDテーマオプションの設定

下記の画面が表示されます。

これが「SKINテーマ専用」編集画面になります。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションの設定

ここからは「SKINテーママニュアル」もご参照頂き、作業をお願いします。

「SKINテーママニュアル」:トップページの表示仕様と設定箇所

マニュアルサイトのログインには、マイページに記載の「ユーザー名」「パスワード」が必要になります。
※会員サイトのログインID・パスとは異なります。
確認方法:TCDログイン → ダウンロードと帳票 → SKINマニュアル・帳票の確認

ヨウ子さん、マニュアルサイトは確認できましたでしょうか?

今表示できました!
ヨウ子
ヨウ子

では進めていきます!

先程の作業で、マニュアルサイトの1の「テーマのインストールと初期設定」と2の「トップページ/ブログページの設定」は完了していますので、3の「トップページの表示仕様と設定箇所」からいきます!

ヨウ子さん、3番からです!

3番見つけました!
ヨウ子
ヨウ子

TCDテーマオプション「ヘッダースライダーの設定」

トップページをクリックし、ヘッダースライダーの設定です。

ヘッダーとは、一番最初のメインの画像や動画の事で、ヘッダーは「静止画・動画」を最大5枚まで追加できます。
美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションのトップページ編集。スライダーの編集

「スライダー1の設定」をクリックします。

まずは一旦静止画を入れていきましょう!

推奨サイズの記載はありますが、初めてなので好きな画像を入れて下さい。

あとで編集すればOKです!

手順は以下の通りです。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションのトップページ編集。スライダー写真を追加

「画像を選択する」をクリックしすると、「メディアライブラリ」が開きます。

「メディアライブラリ」は使用しているワードプレス内の「画像や動画データ」の保管庫になります。

最初は「メディアライブラリ」に画像が入っていませんので、「ファイルをアップロード」を選択し「ファイルを選択」をクリックします。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションのトップページ編集。スライダー写真を追加をアップロード

「ファイルを選択」をクリックすると、パソコンのファイルが立ち上がりますので、ファイルから画像を選択後、右下の「開く」をクリックして、アップロードして下さい。

画像がアップロードされると、「メディアライブラリ」に追加されます。

「メディアライブラリ」に追加された画像を選択し「この画像を利用する」をクリック。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションのトップページ編集。スライダー写真を追加をアップロード手順

「この画像を利用する」をクリックした画像が表示されます。

「設定を保存」をクリック。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションのトップページ編集。スライダー写真を追加をアップロード手順2

スライダーに反映されているか確認していきましょう!

管理画面(ダッシュボード)左上の「家アイコン:サイト名」にカーソルを合わせ、「サイトを表示」をクリック。

先程スライダーに追加した画像が表示されていればOK!

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションのトップページ編集。スライダー写真を追加をアップロード手順3

ヨウ子さん、ここまでは大丈夫でしょうか?

編集長!すごいです!表示されました!
ヨウ子
ヨウ子

良かったです!

スライダーはこんな感じで簡単に追加できます。

画像が2枚以上になるとスライドしますので、時間があるときに「メディアライブラリ」に写真をアップロードして追加していって下さい!

了解です!
ヨウ子
ヨウ子

細かな設定は、「テーママニュアル」をご覧ください。

TCDテーマオプション「トピックスとボックスコンテンツの設定」

トピックスコンテンツの設定

一番上の「このコンテンツをトップページに表示する」にチェックを入れます。

「表示設定」で表示させたい記事コンテンツにチェックを入れます。

今回は「お知らせ記事」を選択。(複数チェックも可)
※注意 選択しても記事がないと表示されません。

「設定を保存」をクリック。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションのトップページ編集。トピックスの設定

ではどのように表示されているか、確認していきます!

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションのトップページ編集。トピックスコンテンツの表示確認

ボックスコンテンツの設定

ボックスコンテンツの設定です。

ボックスコンテンツは3つ設定します。

設定は下記の通りです。

ボックス2と3も同様設定します。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションのトップページ編集。ボックスコンテンツの設定

どんな表示になったか見ていきましょう!

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションのトップページ編集。ボックスコンテンツの表示確認

良い感じですね!

ボックスコンテンツには、リンクの貼り付けが可能です。

「店舗案内」「コンセプト」「初回メニュー」など一押ししたいコンテンツを表示させるようにしましょう!

編集長!なかなかいい画像がありません。
ヨウ子
ヨウ子

そうですよね!

今日は編集手順を覚えて頂くだけで良いので、後日画像が決まれば編集してみて下さい。

わかりました。
ヨウ子
ヨウ子

次にいきます!

TCDテーマオプション「コースとお知らせコンテンツの設定」

コースコンテンツの設定

「このコンテンツをトップページに表示する」にチェックを入れ、コースコンテンツのタイトルと、説明文を入力します。

フォントサイズとフォント色は好みでOK!

コース一覧の「コース一覧をトップページに表示する」にチェックを入れます。

チェックを入れておくとコースページ作成後に、自動でトップページに表示されます。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションのトップページ編集。コース表示の設定

確認です!

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションのトップページ編集。コース表示の設定確認

お知らせコンテンツの設定

お知らせコンテンツも「このコンテンツをトップページに表示する」にチェック。

お知らせアーカイブページボタンの「ボタンを表示する」にチェックします。

お知らせコンテンツも、ページがなければ表示されません。

チェックを入れておくとコースページ作成後に、自動でトップページに表示されます。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションのトップページ編集。お知らせコンテンツの設定

確認は飛ばします。

ヨウ子さん、作業は順調でしょうか?

とりあえず入力してる感じです。
ヨウ子
ヨウ子

最初はそれで全然OKです!

次にいきます!

TCDテーマオプション「キャンペーンとお客様のお声コンテンツの設定」

キャンペーンコンテンツの設定

「このコンテンツをトップページに表示する」にチェックを入れ、キャンペーンアーカイブページの「ボタンを表示する」にチェックします。

お客様のお声コンテンツの設定

「このコンテンツをトップページに表示する」にチェックを入れます。

サブタイトルを入力します。

お客様の声アーカイブページボタンの「ボタンを表示する」にチェックし、「設定を保存」をクリック。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。SKINテーマオプションのトップページ編集。キャンペーンコンテンツとお客様のお声コンテンツの設定

確認は飛ばします。

次にいきます!

TCDテーマオプション「キャンペーンとお客様のお声コンテンツの設定」

ブログコンテンツの設定

「 このコンテンツをトップページに表示する」にチェックを入れ、ブログタイトルを入力します。

「ブログアーカイブページボタン」にもチェックを入れ、「設定を保存」をクリック。

営業日表の表示設定

個人的には無くても良いかと思います。

表示させる場合は、「 このコンテンツをトップページに表示する」にチェックを入れ、「設定を保存」をクリック。

営業日表ページ作成後に、表示されます。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。ブログコンテンツ と営業日程カレンダーの表示設定

次にいきます!

TCDテーマオプション「フリースペースコンテンツの設定」

フリースペースコンテンツの設定

「このコンテンツをトップページに表示する」にチェックを入れ、タイトルと説明文を入力します。

フォントサイズとフォント色は好みでOK!

フリースペースには表示させたいコンテンツを直接入力することができます。

テキストだけではなく、画像なども表示が可能です。

おすすめはビフォーアフター写真の掲載や、Q&Aの表示です!

今回はビフォーアフターの写真とテキストを入力しています。

入力後は「設定を保存」をクリック。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定手順。フリースペースコンテンツの設定

これで「トップページの編集」は完了になります!

設定してきましたが、どう表示されているか確認していきましょう!
※グレーの枠は見やすくするためにつけています。

美ヨウ部、自分でサロンのホームページ作成しよう。トップページの設定後のサイト表示

編集長!すごいです!これ私が作ったんですよね?
ヨウ子
ヨウ子

そうです!

完成にはまだ遠いですが、少しは完成形の形は見えて来たのではないでしょうか?

なんとなくですが見えて来た感じがします!
ヨウ子
ヨウ子

それは良かったです!

最後に「メディアライブラリー」にアップロードする画像の設定について話していきます!

メディアライブラリにアップロードする画像設定方法【画像SEO】

先程の設定では画像の設定をおこなっていませんでしたが、今後アップロードする全ての画像データは必ず設定をしましょう!

画像SEO対策の一環です!

パソコン側の設定

まず画像やデータを保存しているパソコン側での設定をします。

アップロード前の画像データの設定です。

パソコンのデスクトップ画面に、ホームページで使用する画像などを保存しておく「専用のフォルダ」を作成して下さい。 例.「美ヨウ部サイト」

美ヨウ部、自分でサロンのホームページ作成しよう。メディアライブラリーデータ設定方法

ホームページを作成していくにつれ、画像データがどんどん増えとんでもない量になりますので、フォルダ内も最初から振り分けできるようにしておきましょう!

ヨウ子さん、こんな感じです!

美ヨウ部、自分でサロンのホームページ作成しよう。メディアライブラリーデータ設定方法、パソコン側の設定(整理)

整理できていないと、どこにどの画像を保存したか分からなくなりますので、必要に応じてフォルダを増やして振り分けして下さいね。

苦手ですが頑張ります。
ヨウ子
ヨウ子

先程トップページの「スライダー画像」に使った画像のファイル名ですが、ファイル名は必ず内容がわかる名前をつけて下さい。

少し前までは、「ファイル名は半角英数字」と決まっていました。

これは画像を「ワードプレス」にアップロードすると、画像1枚1枚にURLがつきます。

ファイル名が日本語だと文字化けのような感じになり、ファイルURLが異様に長くなり、なんのファイルか分からなくなってしまっていたからです。

最近では日本語ファイル名でも問題ないとの記事も多数出ておりますので、ファイル名は日本語で問題ないでしょう。

それよりも内容のわかるファイル名にしておくことが大事です。

例 「ABCサロンの店内写真」の場合
NGファイル名:D2001
正しい日本語ファイル名:ABCサロンの店内写真
正しい半角英数字ファイル名:abcsalon-in-store-photo

美ヨウ部、自分でサロンのホームページ作成しよう。ファイル名の設定

メディアライブラリーでの設定

では先程ファイル名を設定したファイルを「メディアライブラリー」にアップロードしてみましょう!

管理画面(ダッシュボード)の「メディア」にカーソルを合わせ、「新しメディアファイルを追加」をクリック。

「ファイルを選択」をクリック。

美ヨウ部、自分でサロンのホームページ作成しよう。メディアライブラリーに写真をアップロード

先程の画像をフォルダから選択し、アップロードします。

アップロードされた画像がこちらになります。

美ヨウ部、自分でサロンのホームページ作成しよう。メディアライブラリーに写真をアップロードした画像をクリック

アップロードした画像をクリックすると、画像データの詳細が表示されます。

※重要と記載している「代替テキスト(alt属性)」は必ず入力して下さい。

美ヨウ部、自分でサロンのホームページ作成しよう。メディアライブラリーに写真をアップロードした画像をクリックして代替テキストを入力

代替テキスト(alt属性)とは?

代替テキスト(alt属性)とは、ホームページに含まれる画像の代わりになるテキストのことです。

画像が何らかの原因で表示されないときや、音声読み上げブラウザを使用する際に、情報を取得することができます。

また、検索エンジンは画像の内容を完璧に把握することが難しいため、代替テキスト(alt属性)から画像の内容を判断します。

画像が把握できない状況でも、情報が正しく理解されるような代替テキスト(alt属性)を設定することが非常に大事です。

簡単に言うと、Googleロボットが、どんな画像か判断するのに必要な情報が代替テキストという事です!

代替テキストがあると「画像検索」にヒットしやすくなります!

画像のSEO対策です!

ヨウ子さん、ワードプレスに画像をアップロードする際は、全ての画像データに代替テキスト(alt属性)を入力して下さいね!

全部ですね!わかりました。
ヨウ子
ヨウ子

キャプションと説明は空白でもOKです!

画像の設定は以上になります。

お疲れさまでした!

あとがき

今回もここまで記事をお読み下さりありがとうございました!

少し長くなりましたが、トップページ編集は無事できましたでしょうか?

冒頭でもお話しましたが、ホームページには写真が超重要になってきます。

写真の善し悪しでサイトの見栄えが変わると言っても過言ではありません。

デモサイトがなんであんなにキレイなのか?

それは画像です!

どれだけ構成がキレイで内容や情報があっても、写真が暗かったり、統一感がなかったりすると全て台無しです。

最初から完璧に仕上げるなんてことはほぼ不可能です。

プロの業者でも何回も編集して作り直します!

手順さえ覚えれば編集は何回でも出来ますので、皆さんも焦らず「どの写真が良いか」「どんな文章が良いか」見比べながら編集して下さいね!

この記事が少しでも皆様のお役に立てれば幸いです。

また記事が「参考になった!」「良かった!」と思われる方は、ぜひ周りの方に教えてあげて下さいね!

たくさんの方にシェアして頂ければ私もこの記事を書いた甲斐があります!

この記事のURL(長押しでコピーできます)
https://biyou-bu.com/web-site/top-page/

次回は「ロゴとメニューの作成手順」について解説していきます。

関連記事

  1. 美ヨウ部、自分でサロンのホームページ作成しよう。必須プラグインの設定手順を解説

    エステホームページ【必須プラグインの設定】手順を解説【初心者…

  2. 美ヨウ部、自分でサロンのホームページ作成しよう。コンテンツSEO対策の「キーワード」選びについて

    「コンテンツSEO対策」エステホームページ「対策キーワード」…

  3. 美ヨウ部、自分でサロンのホームページ作成しよう。レンタルサーバーの申込。

    レンタルサーバー選びと借りる手順を解説【エステホームページ作…

  4. TCDテーマオプションの設定でエステホームページのイメージカラーを設定しよう

    「SKINテーマ」TCDテーマオプションの設定手順を画像付き…

  5. 美ヨウ部、自分でサロンのホームページ作成しよう。ブログ機能の使い方を解説

    ブログ

  6. 美ヨウ部、自分でサロンのホームページ作成しよう。SEO対策の基本、内部SEO対策について解説

    「内部SEO対策」エステホームページで上位表示を狙う設定手順…

  7. 美ヨウ部、自分でサロンのホームページ作成しよう。問合せページを作成しよう。

    エステホームページ「問合せページ」の編集手順を解説【無料予約…

  8. 美ヨウ部、自分でサロンのホームページ作成しよう。【SKINテーマ】メニューに表示するページの作成

    【SKINテーマ】メインメニュー&フッターメニューを作成する…

  9. 美ヨウ部、自分でサロンのホームページ作成しよう。サロンのホームページを自分でつくってみよう。ホームページ作成手順を紹介

    自分で作る!集客できるホームページの作成手順の流れを解説

  10. 美ヨウ部、自分でサロンのホームページ作成しよう。ロゴ作成と設定手順を解説【SKINテーマ】

    「SKINテーマ」ホームページの【ロゴを無料で作成する方法】…

  11. 美ヨウ部、自分でサロンのホームページ作成しよう。【SKINテーマ】コースページの作成編集方法について

    「SKINテーマ」コースページの【料金表】作成手順を画像付き…

  12. 美ヨウ部、自分でサロンのホームページ作成しよう。外部SEO対策について

    「外部SEO対策」エステホームページで上位表示を狙う設定手順…

  13. 美ヨウ部、自分でサロンのホームページ作成しよう。ワードプレスのテーマ・テンプレートをダウンロード方法

    【エステ特化】ワードプレスのテーマ【テンプレート】選びとイン…

  14. 美ヨウ部、自分でサロンのホームページ作成しよう。固定ページを編集してコンテンツを充実させよう!

    エステホームページに必要な情報を「固定ページ」で作成編集する…

  15. 美ヨウ部、自分でサロンのホームページ作成しよう。ワードプレスでサロンのホームページを作成する手順の解説

    エステホームページ作成【ワードプレス】のダウンロード&インス…