1. このは屋
  2. WordPressのブロックエディタ..
2024-08-08 1:27:34

WordPressのブロックエディタで、ホームページを作成する方法

spotify apple_podcasts youtube

スモールビジネス特化の学び舎 このは屋です。

無料で、ネット集客に必要なテンプレートを手に入れられます。

 

▼無料でテンプレート、あげます。

【無料】ネット集客テンプレート全13種

https://konohaya.com/cast

 

エピソードページは、以下よりご確認頂けます。

 

▼エピソードページ

WordPressのブロックエディタで、ホームページを作成する方法

https://konohaya.com/87585

 

▼ホームページ

このは屋

https://konohaya.com

 

#このは屋 #スモールビジネス特化の学び舎 #鼻歌まじりの商売

00:00
今回は、サイト整理ということで、このパートの目的と進め方についてお伝えしていきます。
では、やっていきましょう。 まず、本パートのゴールということで、どこに向かってこの作業をやっていくのか、実践していくのかと言いますと、
WordPressサイトの項目の整理をするということですね。 このために今回の作業をしていきます。
WordPressってインストールをして、それだけあっても何も動かないわけですね。 そのサイトの中に項目とかメニューとかね、そういったコンテンツを用意して、
行かなければいけないので、そういった整理を今回やっていきます。 こちらがゴールになります。
なぜ今回の作業をやっていくのかと言いますと、まずホームページブログに必要なコンテンツを用意して、 集客の効果を高めるためということですね。
もう何もない、すっからかんのワードプレスのサイトでは、集客もそうだし、 見た人の信頼とかね、ここ大丈夫かなということで不審がなれてしまいますので、
そういったときに必要なコンテンツってものを用意しておきましょう。 もちろんそういったものを揃えていくと、集客にもつながっていきますよということです。
そしてホームページブログにアクセスした人に信頼してもらうためですね。
訪れた人が何もない寂しいサイトだったらここ大丈夫かなとか、 もちろん商品も買う気にもならないし、なんかね良い印象は持たないですよね。
見た目なんでね、人は見た目が大事だと言われますが、 ウェブサイトもそうなんですよね。
パッと入ってきたときにコンテンツが充実されていないとなんか寂しい感じがして、 信頼ができないということになってしまいますから、
必ずそういったコンテンツとか項目っていうのはね、 最低限整理をしていきましょうということです。
これがホームパートを行う理由になります。 ホームパートの進め方、概要と詳細という順番で見ていきます。
まずは大枠ですね、その後中身という順番でお伝えします。 まず必要なページを作成します。その後に問い合わせフォームを作成します。
問い合わせフォームというのはフォームと捉えておけます。 フォームを作成していきますよということ。この大きな2つの作業を今回やっていきます。
じゃあ詳細ですね。まず必要なページを作成というのはどういうことかと言いますと、 ホームページ、ブログに必要な要素、項目を入れていきます。
例えば何々とはですね、例えば会社名とは、野後とはということを解説してあげるような ページを用意しておく必要があると。
そのサイトに初めて訪問してきた人はこのサイトの正体というかね、 あるいは運営者のことはわからないわけですよね。
このサイトとかブログとかホームページがどんなコンセプト、どんな思いで やっているのかというのはわからないわけです。
それを教えてあげるコンテンツというのを用意しておく。 あと選ばれる理由ですよね。どんな人が選んでいて評価しているのか
というものとか、自社の強み、USBみたいなものをここに書いておく必要があります。 あとプロフィール、何者なのかということですよね。
お客様の声というものもあるとサイトの信頼度が上がりますので、こういったものを用意しておく。 FAQ、よくある質問とか言われますけども、そのサイトに
訪れた人が生じるであろう疑問というものを先回りして置いておいてあげる。 あとは店舗系の方であれば特にお店までの行き方とか
03:08
最寄りの駅とか、そういったことを書く必要がありますよね。 会社概要とか、こういったものをよくホームページを見ると思うんですけども、こういったものを用意しておく。
これは一例なので、もちろんこれ以外ものも入ってくる場合もありますし、これ全てを適用するわけではありません。
これは業種によってカスタマイズするというのが前提になります。 こういったことで必要なページ項目というのを用意しましょうというのが一つ目ですね。
そして次、問い合わせフォームの作成ということです。 これはワードプレスのプラグインを使った問い合わせフォームの設定方法がありますので、こちらもお伝えしていきます。
そして頼りというウェブサービスを使ったフォームの設定。 google フォームを使った問い合わせフォームの設定。
こういった手段があります。 これはフォームのサービスだったりやり方というのは、今後並行削除、追加の可能性はもちろんあります。
こういったウェブツールは特に移り変わりが激しいので、ただ私たちが現時点で推奨しているものをベースに行っていきますので、今はこういった項目でやっていきます。
ただ、頭の片隅に今後変更、修正の可能性はありますよということは入れておいてください。 よろしいでしょうか。
今回の作業はどんなことをやるのかと言いますと、ざっくり簡単な図なんですけれども、 サイト名があってメニューが並んでますよね。
まるまる問い合わせが選ばれる理由とか、お客さんの声とか、アクセスとか、問い合わせフォームとか、あるいは予約とか、こういったものがあると思うんですけれども、こういったものを設置していく。
こういったものを作っていくということですね。 あとはウェブページの下の方に行くと会社概要とか、下のフッターメニューというのがありますけれども、こういったものを入れていく。
こっちはヘッダーメニュー、フッターメニューと呼ばれ方もします。 こういったことを、この項目を作っていくということをこのパートではやっていきます。
図式化すると、なんとなくイメージが湧くと思いましたので、こちら説明させていただきました。
それでは今回は、この会社名とページの作り方を解説していきたいと思います。 こちらのページなんですが、固定ページを使って作成をしていきます。
まずどういうページなのか、そちらをお見せしてから、軽く作り方について解説していきたいと思います。
はい、こういうページになっていまして、会社名のところにご自身の会社の名前ですね、野号とかそういったものを入力していただく形になります。
内容はこんな感じですね。 簡単に解説しますと、
当サイトにアクセスいただきありがとうございますという簡単なお礼ですね。 この会社名の部分を
これもご自身の会社名とか野号にしていただくという形になります。そういった例文ですね。
あとターゲットの悩みといったことにお悩みの方に向けて、この三角になっている部分が実写の内容に合わせてですね、
06:02
変えていただくという、そういう例文になります。 実写が提供するノウハウを提供していますということで、ここに
ご自身の専門としている分野に関するものですね、
とか、そういったノウハウとかを入力していただくという形になります。
ノウハウを提供するまでに至った過去の経験、失敗だ、 そんな経験があってこの取り組みをしています。
その自社が提供するノウハウをするために、 ノウハウを提供するスタイル、セミナーなどって書いてありますね。
といった内容で、 こういう方向、こういう理念のもと
活動を行っておりますという、そういう例文ですね。 内容はですね、別にこの内容に
合わせなくてよくて、自由に書いていただいていいんですけど、 もしわからないよという方はですね、この動画を一旦
Cテイシステムですね、こういう 文章を、なんかワードでもいいですし、
エモ帳でもいいので打ち込んでから、 コピペしていただくという作り方が、まあいいのではないかなと思います。
まあ直書きでもいいんですけど、そこはお待たせします。 編集方法ですね。編集方法は、
こんな感じになってまして、まあ非常にシンプルです。
会社名とあのとこにタイトルですね。 実際に打ち込んでみますけど、僕たちであればこのは屋ってなりますね。
はい。 あとはですね、この
一旦下書き、これ公開してしまってるんで、 実際は下書きにしてしまってですね、このパーマリンクのとこに
URLスラックということで、 about と入力しておいてください。
定番としてはaboutですね、この会社名とはですね。
はい。 次にここですね、ここから内容に入っていくんですけど、これすべて
あの段落ですね。 段落というブロックを使っています。
これを使ってですね、一番ちょっと上だけですね。 これEnterを押すと自動的に段落になるんですけど、ここに適当こう書いていただくっていう形になりますね。
あとは、この直書きはやりにくいのであれば、 Wordかに書いてコピペしていただくという使い方になります。
ほとんどこの段落ですね。はい、といった形になります。 ちょっと工夫したいのであれば、
この、 ここですね。
このプラスマーク、だいたいこうEnterを押すと、 この右側、もしくはこういうところに出てくるんですけど、
プラスマークをクリックしてブロックを挿入します。 段落のほかにも見出しですね。
はい。段落だけだと文章だけになってしまって見づらいので、 見出しですね。間に見出しを入れていただくとかですね。
09:02
場合によってはここに 画像なんかを入れたりとかですね。画像がない場合は
検索、ここで検索できるので検索していただいて、画像を挿入ですね。
はい。画像、こう バンと配置したい場合はこれを使います。
で、あとはですね、カラムという要素があります。
はい。 2カラム、3カラムですね。
あともうちょっとこうカスタマイズしたものですと、 左がちょっと狭いバージョンと右側がちょっと狭いバージョンですね。
あとこういう真ん中が広くて左右が狭いバージョンとか、 いろんなバリエーションがあります。
ただですね、あんまりこう 考え込んでしまうとですね、やりづらいと思うんでも2カラムだけでオッケーです。
こういうページは2カラムだけですね。はい。 こっちに画像とかですね。
こっちに画像、 こっちに文章といった形になります。
テキストですね。 はい、こんな感じで
はい、こっちにテキスト、こっちに画像、 みたいな形で設定することができます。
慣れてきたらですね、あの先ほど解説した こういうものですね、ちょっとこの幅のバリエーションが効いたものをやっていただけばと思います。
通常はこっちですね。場合によってはこういう 70対30のものでもいいです。はい。
そんな感じですね。ちょっとカラムについては、あの 初めてこういうツールを触る方は難しいと思うんで、
50、50でやっていただいて、慣れてきたら、 ここですね、幅パーセントで指定できるので
ここを、これが100%だとして、こっちが70、こっちが30、 みたいな感じでやると
画面に収まると、綺麗に収まるといった形になります。 ただちょっとまだよくわからない場合は、この普通の50対50でいいので、はい。
そんな感じです。 こういうのを使っていただいてですね、まあいろんな
他にも過剰描きとかあるんですが、 これもちょっと一応念のために教えておきます。
はい、過剰描きですね。 これでなんかこう
過剰描きと言うと、はい、こんな感じで過剰描きにできます。 文章をですね、ちょっとでもわかりやすくするためにですね、
なんかちょっと過剰描きにできないかどうかっていうのを考えてみてください。 はい。
そんな感じで、こういう文章ですね、をベースにしつつですね、 ちょっと
なんていうか華やかにというか、わかりやすくしてみたい場合は、見出しとか画像とか絡むですね、過剰描き、そういったものを使って編集してみてください。
基本はこれでもいいんですけど、ちょっと寂しいので補足です。 はい、あとこのURLスラッグですね、ここもアバウトで設定しておいてください。
12:05
はい、そんな感じで設定をするというわけですね。 これですね、ちょっとあの
既にあるページで解説してしまったんですけど、 新規で追加する場合はこちらをクリックすればOKです。
ここにタイトル、パーマリンクですね、URLスラッグ、ここにアバウトと入力して、 内容をどんどん書いていただくという、そういった形になります。
実際書き終わったら公開をする、公開できる状態になったら公開するといった形になります。 はい。
てな感じでですね、あの まずはですね、会社名とあのページをですね、先ほどの例文ですね、あれに
こう
これに限定しなくてもいいので、とりあえず書いていただいてですね、自分の会社の内容に応じですね、ここ書いていただいて
それで作成をしてみてください。作成方法は先ほどのブロックの追加で、 段落、画像、絡む、箇条書きですね、そういったものをうまく工夫して使っていただいて
まずはこの会社名とページですね、作成してみてください。 今回は以上になります。
はい、それでは今回はこちらの選ばれる理由のページの内容と操作方法を解説していきたいと思います。
こちらを一旦ですね、見ていただいて、こういうシンプルな作りになっていますね。
選ばれる理由、タイトルがあって、そこに競合にはない自社の特徴、強みですね。 それはですね、まあ
最低でもというか、できたら3つ用意していただいてですね、 それに対する具体的な内容という、そういうシンプルな作りになっています。
これ内容ですね。 見ていきますと
タイトル、アーマリンクがこういうもんですね。 これを真似していただいて、次は競合にはない自社の特徴、強みですね。
これは見出しで作っています。 これテキストは
その内容に対して、こういうことですよという具体的な内容を書いていただくという形になりますね。
見出し、テキスト、見出し、テキストですね。 前回の動画を見ていただいた方であれば、これすごく簡単にできるのがわかっていただけると思います。
改めて解説しますと、このブロックですね。 こういうとこに出てきますので、もし出てこなかったらエンターを押して、この右側に出てくるっていうことがありますので、
とりあえずこのプラスのマークを見つけていただいて、 見出しですね。
次に段落、テキストです。 簡単な構成になっています。 ちょっとこれでは味気ないなという場合はですね、
画像を入れるとかになります。この場合はここに出てるんですけど、出てこなかったら画像と検索していただいて、画像のブロックを見つけてください。
15:00
はい、でですね、これ
メディアライブラリですね。こちらをクリックすれば今までの画像が出てくると。 ファイルをアップロードしていただければ
自分のパソコンの画面がですね、ここをクリックすると出てきて、 画像を取り込みますので、それで取り込んでください。
画像はですね、できるだけ自社で撮影したものですね。 もしなかったらですね、
Pixabayですね、こういうサイトからダウンロードしてきてですね、 所要利用可能なサイトからダウンロードしてきて配置してください。
で、補得です。 他にもですね、その
絡むとかですね、 こういうのがあります。
これ別の動画でも解説しましたが、念のためもう1回お伝えしますと、 これ50対50になっていまして、こっちに画像とかですね。
先ほどと同じやり方で画像が配置できます。 テキストといった形で、
こっちにテキスト、こっちに画像といったレイアウトを組むことができます。
これもいろんなパターンあるので、慣れてきたら こっちのバランスですね、70にしたいとか、こっち30
っていう感じで調整してみてください。 初めのうちは50対50の方がわかりやすいです。
他にもリストですね、リストイコール過剰描きだと思っておいてください。 過剰描きも使うとですね、結構こう
複数の事柄を並べたい場合に使えたりします。 こういう要素を使ってですね、
ちょっとこの見出しテキストの形式では味気ないなと思ったら、 こういう画像を使って
華やかにするとかですね、華やかというかちょっとわかりやすくしたりとかですね。 場合によってはこういうレイアウトを組んで、カラムでレイアウトを組んだりとかですね。
ちょっと長くなりそうだなって、文章が一行一行長くなりそうだなと思ったらリストを使うとか、 っていう感じで工夫して
設定というか作成をしてみてください。 ちなみに新規で作る場合はこの新規追加ですね。
すると同じような画面ができますので、先ほどですね、お見せした通りタイトルに選ばれる理由ですね。
パーマリンクがこういうものです。 これを真似して打ち込んでください。
あとは見出しテキストといった、 簡単というかシンプルな作りになっていますので、
ブロックの挿入から挿入して編集をしてみてください。 それでは今回のこの動画は以上になります。
それでは今回はこちらのプロフィールページの作成法を解説します。 まずは実際のページをお見せします。
こういうページになっていまして、今回はですね、 なるべくですね
プロフィール画像を設置していただきたいので、画像の要素、あとこういうレイアウトを組むカラムの要素を
使ってですね、作成していただく形になります。 今、配置している文章は例文みたいなもので、こんな感じの文章を
18:07
よくまだわからないという方はですね、こんな感じの文章を配置してくださいということで、 初めまして、型書き名前と言います。
これまで、こういう経歴と、これまでの経歴ですね。
といったようなことをしてきましたということで、このカッコの部分に 実際の内容を打ち込んでいただくっていう、そういう例文になっています。
カッコはその、その一言に当てはめて書いていただくという形ですね。
この会社名は、 ノウハウが生まれた経緯などといった経緯で開業しました。
実際に口に出すと、ちょっと違和感もあるものですけど、ここですね。 カッコの部分を、とにかく自分に当てはめて書いてくださいというものですね。
現在は、 現在の活動内容を中心に活動中です。
その他、商売の世界観を記載といった感じですね。 この世界観はですね、ちょっと難しいなという場合は書かなくてもOKなんですけど、
プロフィールなんで、まあ自分のことですね。 なんで、そんな難しくないと思います。
ただ文章としましては、こういう感じのものを用意していただけばいいということで、 あとは思い思い書いてください。
これに限って書くって必要はないので、自分のことなんで、はい、書いてください。
あと重要なのが顔写真ですね。 これが、あった方がですね、安心したりとかですね、
こういう人がやってるんだっていうのがわかりますので、 画像できたら撮ってもらってください。
カメラマンに撮ってもらうのが難しいのであれば、なんか知り合いにですね、 頼んで撮ってもらうとかですね。
一眼レフカメラでなくていいので、スマホのカメラでいいので撮って、 こちらに配置するようにしてください。
ということで、操作ですね。そちらを解説していきます。
タイトルはプロフィール。非常にシンプルですね。 パーマリンクですね。URLスラックのとこにプロフィールと英語で入力してください。
ここなんですけど、カラムという要素を使っています。 カラムはですね、この
他の動画でも出てきたと思うんですけど、このカラムですね。 というものを使っていきます。
この50-50ですね。もしくは70-30ですね。 こちらにしてください。
30-70でもいいですけど、この3つですね。 ちょっと画像が大きくなりすぎてしまうって場合はこの2つですね。
50-50でもいいです。とりあえずこの画像に応じて変えていただくこの3択ですね。 3カラムにしてしまうと
この場合はちょっと違和感がありますので、この3択ですね。 左側に配置するのがいいのか、右側に配置するのがいいのかっていうのはお任せします。
21:02
今このように、この動画では左になっていますけど、 右の方がしっくりくるなっている場合は右でもOKですね。
どんな感じになります。 ちょっとこれを
配置してみますけど、このここプラスをクリックして ここに画像ですね。
メディアライブラリから こういう写真を用意していただいて、これ練習なのでこういうダミーの画像になっていますが、これを選択します。
実際にパソコンからワードプレスの取り込みの場合は、このファイルアップロードからファイルを選択です。
ファイルアップロードからファイルを選択。 ここをクリックすると自分のパソコン内の画面が出てきますので、
パソコンに画像を用意していただいてそれを選択するという形になります。 こちらに段落、文章を打ち込んでいただく。
そうするとこっちに画像、こっちに文章といった作りになります。 あとはその文章ですね、長くなってしまった場合、この
画像より下にしてしまう、下に来てしまうという場合はですね、 例えばどういう状態かというと、このようにちょっと
ファイルを増やしてわざとやってますけど このようにちょっと下に来てしまう場合ですね、このままずっと続いてもいいんですけど
区切ってさらにこの1コラムの段落ですね。 通常の段落で書いていただくという方が回り込んでですね
文章が記載できますので、そのようにしてください。 こちらはですね、このようにずっと下に来てしまっても
別に問題ないといえば問題ないんで、内容に応じてですね、違和感があったら調整してください。
といった感じで編集をお願いします。 今回はこの画像とカラムはですね、
必要になってきますので、それを使っていただくという形になりますね。 新規に作成する場合はこちらの新規追加ですね。
ここから先ほどと同じとですね、プロフィール、パーマリンクを 英語でプロフィールですね。
で、カラムを使ってやっていただくといった形になりますね。
基本はこのブロックの挿入から追加していただくという感じでやってみてください。 ブロックの追加ですね。
こんな感じで編集方法はそれ以上なので、あとは実際に編集を、内容を考えた上でですね、編集をしてみてください。
プロフィールなんで、そんなこの文章にですね、こだわらず自分のことをですね、 経歴とかですね、
その活動内容、思いとかそういったものを記載してみてください。 それでは今回のこの動画は以上になります。
はい、それでは今回はこちらのお客様のウェブページの 作成方法、編集方法を解説していきたいと思います。
24:08
こちらの内容を見ていきたいと思います。 その後は編集方法ですね、使う要素なんかを解説していきたいと思います。
こういうシンプルなページですね。 この説明書きをちょっと解説を読んで解説していきたいと思います。
このページはその名の通りですね、お客様の声を配置して、 顔写真とかですね、そういったものがあったらですね、配置するとより良かったりするので、そういうものを配置しましょう。
なかったらですね、配置できないので、信頼度はちょっと下がってしまうもののですね、配置しなくてOKですといった形になります。
画像がなくても内容が具体的であれば特に問題はないかなといった感じです。 関係性がきちんと築けているお客さんにインタビューとかですね、お願いして、その際に記載許可を確認するようにしましょう。
こういう順番ですね、信頼度が変わってくるんですけど、やっぱり動画って難しかったりすると思うんで、動画が一番信頼度が高くて、
画像と文章ですね、が次に信頼度が高くて、文章・実名が次に信頼度が高くて、イニシャル・特名という順番で変わっていきます。
具体的、実際にいるんだなという感じがしてくればするほどですね、信頼度が上がるっていう、そんな感じになります。
先ほど解説した通りですね、動画が難しいのであれば、文章プラス画像といった感じですね。 できるところから始めていただければと思います。
内容はですね、こんな感じで見出しがあって、お客様の声や文章で記載といった形になります。
実際のページを見ていきましょう。 使う要素は見出しと段落ですね。
もし画像があったらですね、これも今まで出てきたカラムですね。
あと普通に手書きのものがあったら、それをコンビニとかでスキャンしてきて、画像化して配置するといった形になりますね。
その際にアップロードしていただいて、自分のパソコンが出てきますので、そこから画像を選択してください。
既にアップしてあればこのメディアのところにあるので、配置するといった形になります。
例えばこれがダミーの画像なんですけど、声だとしてこんな感じで配置されます。
あとはその顔写真がある場合は空物を使うといいかなという感じで、50-50ですねこれは。
他にも70-80、こっちに画像、こっちに文章といった感じで、ちょっとこの割合ですね。
こっちが30、こっちが70になっていますね。その割合で幅が変わります。
一応これ調整することもできるんですけど、ここで調整できるんですけど、難しい場合はですね調整しなくて ok です。
27:04
デフォルトのままでやってください。こっちに画像、こっちに声、こっちに顔写真、お客さんの顔写真でこっちに実際の声を記載するといった感じで編集をしてみてください。
ですが、ちょっとそこまでは記載許可も取ってないですし、難しいですという場合は文章だけで ok です。
といった感じですね。次、動画の場合はですね、
こういうHTMLコードありますので、VimeoとかYouTubeでアップしたものの埋め込みコードを配置してください。
他にもYouTubeとかですね、この場合は販売しないのでYouTubeでいいので、埋め込みとかYouTubeっていう要素があるので、
ここにその動画のURLを配置するで埋め込みをクリックするで動画が配置できます。
といった感じですね。そういう要素を使って配置してください。
手段はいろいろあるんですけど、やりやすいものでやってください。
基本はテキストのみでもいいので、この声の中から一言ピックアップということで、印象に残った言葉を
ピックアップして、こにゃらさんですね。 イニシャルの場合はYKさんとかっていう感じで記載をしてください。
編集をしてください。こんな感じですね。パーマリンクはこんな感じですね。
カスタマーですね。英語で半画で入力してください。 編集方法は以上になります。新規で作成する場合ですね、これも繰り返しになるんですが、
この新規追加をクリックして、ここからお客様の声タイトルですね。
スラッグをカスタマーとか、何でもいいです。カスタマーじゃなくてもいいです。
半画で入力してください。そこから編集を始めるといった形になります。このブロックの追加ですね。
そういった感じですね。非常にシンプルでいいので、お客様の声ページですね。できたら作成してみてください。
ない方はですね、ないからといってダメというわけではないので、これから集めていっていただければと思います。
はい、それでは今回のこの動画は以上になります。
はい、それでは今回はこちらのギャラリーページの作成方法を解説します。内容はですね、
これまで活動して撮影した画像を配置といった形になります。
例えばセミナーの時の様子ですね。撮影した画像があればそれを配置。お客さんとミーティングとか面談をしている様子ですね。
最近ですと、Zoomの時のみんなで写った画面をですね、
写真で撮って配置したりとかそういう方がいます。ですが、これない場合は作成しなくてもOKです。
無理に作成しなくてもいいです。あるとよりいいっていうので、はい。編集方法を解説します。
今回はですね、この特に何もない状態というか、編集をクリックしていただいて、
30:01
これ例文なので、消すといった形になりますね。
タイトルはギャラリーですね。新規で作成する場合はこの新規追加になるので、今回あらかじめ作ったページから解説します。
タイトルはギャラリーですね。ファーマリンクのURLスラッグはギャラリー。
半額で入力してください。このブロックを追加ですね。ここにギャラリーと入力してください。
するとこういうギャラリーというブロックがあります。ここにですね、複数、
設置したい画像を複数アップロードしていただくと、こんな感じですね。この要素は複数の画像を選択することができます。
今回はダミーの画像でいきますけど、この感じで5つ、今回の場合5つ配置したいと思います。
どういうものなのかというと、ギャラリーというのは、こんな感じで画像を並べてくれる、そういった要素になります。
これはダミーの画像なんですけど、実際は先ほど説明した通りセミナーとか、
活動内容がわかるような画像、あと雰囲気がわかるような画像ですね。そういったものを配置してください。
配置し終わったらですね、これ更新になってるんですが、公開をクリックして公開してください。
それでは今回のこの動画は以上になります。それでは今回はこちらのよくある質問のページですね、こちらの内容と
あと編集方法を解説していきたいと思います。内容を見てもらいますと、FAQなんかと言われるページなんですけど、
予想される質問とかですね、質問が来そうなもの、または実際に来た質問、
そういったものを記載する、そういったシンプルなページになります。編集方法も非常にシンプルで見出しテキストですね。
見出しに質問、このテキストの段落の箇所に回答といった形になります。
今お見せしているのが、よくありそうなものなんですけど、行種とかそういうのによって微妙に違ってくると思うので、これに限らずですね、
実際に来た質問、あと予想される質問を想像してですね、記載していただくかと思います。
よくある形式をしまして、こにゃらなんですけど大丈夫ですかとか、そんな感じですね。
何々教えてくださいとか。これ見出しと段落なんで非常に簡単なんですけど、
見出しですね。なかったら検索してください、見出しです。あと段落ですね。これになります。
画像とか特に、箇条書きとか絡む画像ですね、そういったものは必要ないので、
見出し、段落、見出し、段落でその内容に応じてですね、編集をしていただければと思います。
33:05
よくある質問です。パーマリンクはですね、このFAQと入力しておいてください。
あと、内容が編集完了したら公開をクリックするという形になります。
一問の通りですね、新規作成する場合はこの新規作成、新規追加ですね。固定ページ新規追加。
それでこんな感じで真似して作ってみてください。内容はシンプルです。
それでは今回の内容は以上になります。
それでは今回はこちらのアクセスのページですね。こちらの内容と返事方法を解説していきたいと思います。
こちらなんですけど、こういうページになっていまして、
これGoogleマップが表示されてますけど、別にGoogleマップ必須というわけではなく、あった方がいいですけど、簡単に実践できるので。
あとはその写真ですね。店舗系の方であれば、模様の駅から店舗までの道のりを写真で撮って配置するといった形になります。
そんな感じで編集をしていきたいと思います。
編集方法はですね、これあるんですけど、これ消します。
このGoogleマップの埋め込みなんですけど、これはカスタムHTMLでやっています。
HTMLで検索するとこう出てきますので、ここにGoogleマップの埋め込みですね。それを設置するようにしてください。
やり方ですね。Googleマップで検索していただいて、
自主体の住所が出てきたらですね、この共有というところがあるので、ここをクリックします。
地図を埋め込むというのがあるので、こちらをクリックして、このHTMLをコピーですね。それをコピーして配置するといった形になります。
ちょっと住所が映ってしまったので、これはモザイクしてあるので、ちょっと見づらいかもしれませんが、
ここですね、共有から地図を埋め込むのをHTMLをコピーですね。これでコピーできますので、
先ほどのカスタムHTMLという要素に配付けてください。 Googleマップの他にも先ほど言った通り、画像を配置したりですね、
自分の模様の駅から、店舗の模様の駅から画像を撮影して、そこで
道のりをですね、どんどん記載していくというもので、これは画像ですね。画像の要素を使う。
補足のテキストですね。段落を使う。といった形です。アクセスについては、その店舗系の方ですね。生態とか美容室とか
36:04
そういった、あとは飲食ですね。そういった方々がよく作るものなんですけど、
他の業種の方であれば必須というわけではないので、作らなくてもOKです。こちらは自分の業種に合わせてですね、作ってください。
パーマリンクですね。アクセスと入力します。半額です。
編集終わりましたら、公開ですね。なので使う要素としましては、カスタムHTMLと画像、あとテキストですね。補足のテキスト。
それを配置するようにしてください。 それではこの動画は以上になります。
それでは今回は会社概要のページの編集方法と内容ですね。内容と編集方法を解説していきたいと思います。
こちらはですね、こういう内容を配置するページになります。 おいしそうですね。こういう内容っていう定番のものなんで、あとはその業種とかですね。
そういったものに応じてですね、カスタマイズしてください。詳しくは会社概要
書き方とかで検索をして、必要に応じて項目を追加するといった形になります。 この内容ですと会社名、代表さん名、事業内容、所在地、電話番号
このページのURL、お問い合わせといった内容です。お問い合わせは、お問い合わせ用のメールアドレスですね。
Gmailよりかはドメインのアドレスですね。それを配置するようにしてください。 編集方法に入ります。
これはですね、テーブルという要素、ブロックを使っています。 これがテーブルですね。
表のことです。テーブルというのは。最初は、 カラム数2、行数2でいいので表を作成してください。
あとはですね、この行を下に追加していくと、どんどん追加されているのがわかると思います。
行を削除したい場合は、削除ですね。 ちょっと薄くなってて見づらいと思うんですが、今3行になっているところを追加したりですね、今4行になっています。
削除して3行にしたりとかですね。 行以外にも列を追加したりとか
そんな感じでできますので、会社概要なので2列でいいと思うんですけど、そんな感じで編集をしていってください。
会社名ですね。代表社名。
てな感じで、僕の場合はコヒペしてしまってるんですけど、皆さんは直接書いてください。
授業内容ですね。こんな感じでどんどんこの行を下に追加していって、項目を追加。
こっちに実際のテキストを貼っていった形になります。
39:00
ここもちょっとコヒペでいきます。こんな感じですね。 これも内容に応じて編集をしていくという形になります。
全部編集し終わりましたら、これ参考にしていただいて編集してください。
URLですね。こんな感じですね。
これを真似して入力してください。 公開できる状態になりましたら、公開をクリックしてください。
ちなみに新規でページを更新する場合は、この新規追加、もしくはこちらの新規追加になります。
このテーブルを使って編集をするという形になります。 表の編集はこちらからできます。ということを覚えていただければ問題なく編集ができると思います。
それでは今回の動画は以上になります。
それでは今回はこの特定商取引本に基づく表記ですね。 こちらの解説をしていきたいと思います。
まず内容の解説をして編集方法を解説します。 これは会社概要とほぼ同じです。テーブルと要素を使います。
内容はこんな感じですね。 ここに補足書きしてありますけど、
この内容ですね。項目はこれを参考にしてほしいんですけど、 代表的なものをピックアップしたものになります。
基本はご自身の商売に合わせて内容変更してください。 というのもこれ法律が関わっていますので、結構専門的な部分です。
なので不安であれば弁護士さんにご相談して作ってもらう。 相談しつつ作って一緒に作るといった感じが一番安心するかなと思います。
内容は会社名とか代表者名。会社概要とちょっと似ていますけど、 取り直せて販売の価格とかですね。
各ページを商品ページをご参照くださいとか、支払い方法、クレジット銀行振込とか、 商品の引き渡し方法ですね。
これも内容に応じて引き渡し方法に応じて変更してください。 あとは物販とかそういうものに限りますけど、
デジタル商品でも同じですね。返品とか返金とか交換キャンセルの対応方法ですね。 そういったものを記載してください。
これ基本的に代表的なものなので、 基本はですね、
弁護士さんに相談してみるということをお勧めします。 返信方法に入りたいと思います。
返信方法はこのテーブルですね。テーブルの要素を使います。 基本的に会社概要と同じで、まずカラム数2行数2で表を作成して、
ここですね、このカーソルを置いた状態ですね。 表の中に置いた状態で追加したりとか削除できたりとかですね。
基本はこの行の追加ですね。上とか下に追加できて、 あと消したいときにいらなくなった項目を消したりとか、そんな感じで返信ができます。
42:05
中身はですね、こんな感じでテキスト。 今回の場合は解説なのでちょっとコシペでいきますけど、
こんな感じで項目を入力した上で実際の内容ですね。 そんな感じで入力していってください。
基本的にこのテーブルを扱えれば、この特定表取引本に基づく表記は設定できます。
URLですね。こんな感じです。 これを真似して入力してください。公開できる状態になったら公開をクリックしてください。
新規作成はですね、ここからできますので、このタイトルとかですね、内容を記載して公開をクリックしてください。
それでは今回の動画は以上になります。 それでは今回はプライバシーポリシーの内容と編集方法を解説していきたいと思います。
内容なんですか。こういう内容ですね。 ちょっと難しいと思うんで、これは
プライバシーポリシーひな形とか、あとは書き方とかですね。 それを検索していただいて、こういう書き方とかテンプレートを解説している記事がありますので、それを参考にですね、
記入してください。全部一から解説するの結構内容的に難しいので、こういうのを参考にしてですね、ネット上の記事を参考にして記載してください。
一応各項目のざっくりとした意味合いだけでもいいので確認するようにしましょう。 編集方法です。編集方法はとても簡単で
これ見出しと段落のみですね。 このブロックの追加から見出し段落この2つだけなので、それを組み合わせてですね
編集をしていってください。 最後にお問い合わせ窓口ということでここにボタンが出てきますけど、これは簡単でボタンと打ち込んでいただいて
このボタンの要素を使ってください。そういうのボタンでなくボタンの要素ですね。 その方がテーマ依存でなく編集ができます。
あとはこのお問い合わせフォームと入力して フォームのURLを貼り付ける設定するといった形になります。非常に簡単ですね。
パーマリンクですね。パーマリンクはこんな感じで入力してください。 公開できる状態になったら公開ですね。
とにかくネット上の記事を参考にですね、作っていただくのをお勧めします。 それでは今回のこの動画は以上になります。
それでは今回はこちらのMWWPフォームの設定方法について解説します。 こちらの設定はですね、基本的にコピペしてやってもらう作業もありますので、そのコピペする内容はですね、ページ内に配置しておきます。
45:00
その代わり設定方法を間違えないとですね、うまく動作しませんので、そういうところに絞ってご紹介していきたいと思います。
ではまずはですね、新規で作成したいと思いますので、新規追加をクリックします。 こちらにお問い合わせ、タイトルはお問い合わせですね。
お問い合わせフォーム、お問い合わせどちらでもいいんですけど、これをコピーしていただいて貼り付けます。
次に、ビジュアルテキストとあるんですが、テキストにしていただいて、こういうのを用意しておきます。
こういうのを用意しておきますので、これをですね、コピーしていただいて、コピーしたらこっちもテキストにして、このように貼り付けてください。
詳しい内容はですね、ちょっと割愛しますけど、
ここ、お問い合わせフォームというと、こんなになっているじゃないですか。
このお名前、必須お名前のとこがこうなっていると、このコードによって表示されていると、必須メールアドレスがここといった感じですね。
それぞれこのコードがですね、誤配することによってこういうふうに表示してくれますよというものです。
ただ、この深く考えずにですね、ここをこう指定するだけにしてください。
あと、間違ってもこのような状態ですね、消さないでください。
するとうまくいきません。
これは否定できるようにしておきます。
1から入力するのも、入力というか設定していくのも大変だと思いますので、そんな感じで。
完了画面メッセージですね、これは、はい。
こういうものですね、これも1から入力するのも大変かなと思いますので。
と言っても簡単な文章なんですけど、こういうメッセージを配置してください。
これも、否定できるようにしておきます。
何かこう変えてしまってもいいですかね、この営業日のとことかですね。
うちは、大体この1から3、営業日だと思うんですけど、まだ違いますよというときはこの数字を変えてください。
そんな感じです。
バリデーションですね、ルール。
これは必須にするのかしないのかという、そういう設定になります。
これはですね、真似してですね、やって欲しいんですけど。
これにネームイコールってなってると思うんですが、これをここをですね、コピー、こっちの方に。
48:02
コピーしていただいて、コピーしたら、このバリデーションルールを追加ですね。
この△をクリックして設定紙に移動。
貼り付け、必須項目。
で、名前はOKなのでメールアドレス。
ネームイコール、このダブルコーディションの間をコピー。
コピーしたら、またバリデーションルールを追加。
△をクリック。
貼り付け、必須項目。
これをどんどん、この項目全てをですね、やっていくという形になります。
ネームイコール、ダブルコーディションの間、貼り付け。
バリデーションルールを追加。
これが出たらまた△をクリック。
で、貼り付け。
必須項目にチェックですね。
これ、実際にやってみるとすごく簡単なので、
ネームイコール、ダブルコーディションの間をコピー。
ルールを追加。
で、こうクリック。
何回かやってると慣れてくるというか、そんなに難しい作業ではないです。
チェックボックスも、これもルールを追加で、
で、貼り付けですね。
必ずこれ、間違えないようにしてください。
選択するときに、何か含まれてしまうとダメなので。
で、これはチェックボックスはですね、これは、
はい、これですね。
必須項目→チェックボックス。
ここにチェックを入れてください。
はい、こんな感じですね。
これ、必須なのか必須じゃないのかっていう設定になるので、
ほぼ必須にするっていう形になります。
はい、次にですね、件名、自動返信メールですね。
件名を、はい、設定していきます。
これはですね、会社名→会社名お問い合わせいただきありがとうございますと、
はい、入力してください。
はい、お礼ですね。
で、あとは会社名→名前ですね。
会社名→名前、この早としておきます。
次に、この度はお問い合わせいただきのこの文章ですね。
これ、手打ちで入力していただければと思います。
これは、あの、コスペでですね。
コスペでできるようにしておきますので、はい。
そのように、この本文のとこに自動返信メールの、
ここに、本文に貼り付けるというのを覚えておいてください。
で、自動返信、これはメールアドレスにします。
はい、これメールアドレス。
あの、ここですね。
この name="のここのやつをコピーしてきて、
はい、まあ間違いがないようにこっちの方がいいですね。
はい、で、送信元、eメールアドレス、これはですね。
51:02
はい、独自ドメインで取得したアドレスですね。
それを指定してください。
これは必ず、こっちもですね。
こっちも必ず独自ドメインで取得したメールアドレスを設定してください。
必ず、あの、Gメールの方に送信できるように設定しておいてください。
次に管理者ってですね、県名ですね。
県名は重要最大からお問い合わせが来ましたといった、
まあこれ、自分の方に来るメールなので、はい。
その感じで、まあ管理者宛てって書いてあるので、はい。
自分に来るアドレスですね。
送信の自分の会社名、
で、メールアドレスは独自ドメインのアドレスですね。
に、まあ変更しておいてください。
もし違ったらですね、はい。
で、本文ですね。
これも以下の内容でお問い合わせが来ましたっていうので、
まあこれもこう指定できるようにしておきます。
はい。
まあほぼここ、ここですね。
ここ、このネームっていうところに連動してるんですね。
ネームで指定されてるこれが、
えー、この文面のここに表示してくれますよっていう、
その、まあこのカッコは意識しなくていいんですけど、
このカッコを入れることによって表示してくれますよっていう、
そういう設定になります。
まあちょっと細かいところが見慣れないので難しいと思うんですが、はい。
あとは送信元のEメールアドレス、
これも独自のメインのアドレス。
はい。
その他の項目は特に設定しなくてOKです。
あとは公開をクリックしてください。
はい。
これでOKですね。
まあ設定するのはここの内容ですね。
これもこう指定でOK。
完了画面メッセージ、これもこう指定でやってください。
質問のうちでこういうところは変えてください。
で、ここはですね、あのちょっと作業してもらうことになるので気をつけてほしいんですが、
バリデーションルールですね。
この必ずネームの値をここですね、ダブルクオーテーションの間、はい。
ここを間違いないように選択して、こっちに指定するといった感じになります。
指定方法はここに貼り付けてリスト項目。
チェックボックスだけここになるので気をつけてください。
あとはここ、自動返信メール、件名、送信者、会社名、
アドレスは独自のメールのもの、本文はこう指定でOKなんですが、
このように自動返信メールの内容ですね。
これによって入力した内容が反映されるという形になります。
なのでこのカッコは必ず間違えて消さないようにしてください。
で、自動返信メールですね。
これは相手のアドレスが自動的に設定されますので、ここの値ですね、
name="のここの値、これをここに貼り付けています。
ちょっと細かいルールがあるんですが、この動画のとおりに真似してやってみてください。
送信先のアドレスも独自のメール、CCとBCCも設定できるんですけど、
BCCのほうを他の担当者に送りたいという場合はそのようにしてください。
54:02
で、件名はこんな感じです。
この方式でOK、送信者、会社名、メールアドレス、自分の独自のメールのアドレス、
本文、こういう内容のお問い合わせが来ましたという、そういうものになります。
以上、復習、軽く復習しましたが、最後公開をしてください。
次にですね、先ほど作ったもの、これがショートコードになっていますので、これをコピーしてください。
コピーしたら、固定ページの方に設定します。
まずお問い合わせ、ここパーマにですね、この固定ページの方はどうしても設定しなければならないので、
半額でですね、コンタクトと入力しておいてください。
コンタクトOKですね。
ブロックの追加、ショートコードと検索するとできます。
ここに貼り付けてください。
貼り付けたら、保存ですね。
1回見てみます。
何も設定していないとですね、
何も設定しないとこのような状態になります。
なので、この状態ですね。
この状態から先ほど一瞬見せた、デザインされたものですね、にしたいと思います。
それがですね、その前にプラグインの導入ですね。
都度入れるプラグインもあるので、もし入れてなかったらですね、
途中から導入してください。
シンプルCSSですね。
これをプラグインから新規追加をクリックして、
プラグインの検索ですね。
このように追加でプラグインを入れることって結構ありますので、
これのやり方は覚えておいてください。
シンプルCSSを有効化で今すぐインストールしてください。
これでOKですね。
これ導入できたので、この状態で外観パサマイズをクリックしてください。
こちらでもいいんですけど、テーマ位置になってしまうので、
こちらのプラグインを使ってやっていきます。
ここにですね、このようなコードを用意しておきますので、
これを貼り付けてください。
コピーして貼り付けで公開すると、
57:01
このようにちょっとしたデザインをされますので、
こちらの方が見やすいですね。
こうなりますので、この設定をしておいてください。
あとはこの設定が終わったら必ずテストで入力してみて確認してください。
自分の方にはこのようにメールが来ます。
先ほど自動返信の管理者宛の方に設定した文がこの辺に来ます。
入力されたもの、アドレス、入力されたもの、されたものってふうに反映されますので、
相手も同じような感じで自動返信が行きます。
こういう内容で入力お問い合わせいただきましたねというものです。
ちなみにこのように入力完了画面が出てきますので、
こういうふうに反映されたなというのを一通り実際に入力してみて、
ボタンを押してみて確認しておいてください。
以上までを一応正常に動作ができているところまで確認してください。
どうしてもうまくいかないという場合は、
頼りとかGoogleホームという手段もありますので、
これも一つの手段だと思っておいてください。
それでは今回の動画は以上になります。
それでは今回はGoogleホームのお問い合わせホームの設定方法を解説していきたいと思います。
まずGoogleホームは、ご自身のGoogleアカウントのGoogleドライブを開いてください。
新規からGoogleホームですね、こちらをクリックしてください。
Googleドライブの開き方はですね、
こういうトップからこのように出てきますので、そちらをクリックしてください。
題名ですね、お問い合わせホーム、こんな感じで入力ですね。
説明があったら説明を入力すればいいんですが、特にいらないですね。
メールアドレスは必須なので、このようにあります。
次ですね、最初に配置してあるもの、ラジオボタンになっているので、
まずはですね、お名前と入力します。
ラジオボタンではなく、切り出し機にします。
なんか説明文章ですね、入力してくださいとかですね。
こっちが実際に作ってあるものなので、これをご指定していきます。
ご記入とかご入力とか、そういうニュアンスが伝わればいいです。
ここに入力してくださいねって言いますね。
これは必ず必須にすると。そうしましたらこれをコピーして、
1:00:00
次はですね、このお問い合わせ内容ですね。
僕の場合はちょっとご指定していきます。
皆さんは手打ちで入力していくといいかなっていう感じです。
次、段落ですね。もうなっているので段落でOKですね。
あとはここにお問い合わせ内容をご記入ください。
非常にシンプルな内容ですね。OKです。
ということで、メールアドレスとお名前、お問い合わせ内容、
これでもう必要十分ですので、これでOKですね。
で、回答ですね。点々電話をクリック。
新しい回答についてメール通知を受け取るですね。
はい、これでOK。
あとは自動的に保存してくれるので、保存ボタンをクリックするとか
Googleの場合はないですね。
てな感じでOKですね。
そうしましたら、次ですね。送信。
ボタンに指定する場合はリンクでもいいんですけど、
何か埋め込む。先ほどの冒頭のように埋め込む場合は
このHTMLを埋め込むですね。これをコピーします。
はい、コピーしたらですね、これ非常に簡単なんで
新規追加ですね。固定ページ新規追加。
お問い合わせ。URLのパーマリンクが出てこなかったですね。
一旦下書き保存してください。
すでに他の撮影で作っているので、このコンタクトという
パーマリンク使えないので、皆さんの場合はこれにしてください。
もしGoogleホームでやっていくという場合は
重複しているので、Gとします。
GoogleのG。
あとは、この撮影にカスタマイズしているので
本来はこれなくてOKです。これでOKですね。
カスタマイズHTMLというのがあるので、これを
よかったら検索してください。そうすると出てきます。
貼り付けます。この状態で公開。
実際に見てみます。反映されているのがわかりますね。
こんな感じですね。非常に簡単に設定できますので
頼りでも十分お手軽なんですけど、もっと手軽で
やっていきたいという場合はこれを使ってください。
サービスなので、いきなりサービス終了とか
1:03:02
そんなことはないと思うので、運営できなくなったので
終わりますとか、使用が変わって使えなくなるということは
なくはないんですけど、そんな感じで
サービス停止というのはなかなか考えられにくいので
こういうのも使ってみてください。
それでは今回はGoogleホームの補足の情報を開示します。
補足でやってほしい設定なので、それについて
やっていきたいと思います。
この設定ですね。3つのタブがあると思うんですけど
設定の中に回答というのがこういう状態で隠れていますので
このメールアドレスを収集するのにオンにしておいてください。
デフォルトでオンになっていたので大丈夫なんですけど
一応確認しておいてください。
グレーになったらオンにする。色を付けるという感じです。
ワンクリックで切り替えができます。
こうするということですね。
一応これは確認ですね。目視しておいてください。
回答のコピーを回答者に送信する。
オフになっていますので常に表示にしておいてください。
以上の設定ですね。この2点の設定だけお願いします。
それでは今回はこちらのトップページの編集方法を
解説していきます。
まずこっちがトップページを何も設定していない方
こっちが整理に設定してある方ですね。
こういう1枚もののページというか
こういうトップページを作成していきます。
こっちに設定を施していきたいと思います。
まずは管理画面に戻っていただいて
固定ページ新規追加をクリックしてください。
ここに何でもいいんですがトップと入力してください。
ここはフロントページとかでもいいです。
トップページとかでもいいです。
このURLスラッグですね。
これもし出てこなかったら一旦下書き保存してください。
ここにトップと反格で入力します。
これで公開ですね。
内容は何も書かなくてOKです。
現時点では何も書かなくてOK。
また管理画面から表示設定をクリックしてください。
固定ページのチェックを入れて
ホームページ選択、トップを選択、変更保存ですね。
ちなみにこのトップはこの通りにやっていただけば
トップになっていると思うんですけど
フロントページという名前を付けたのであれば
フロントページになります。
これで一旦見てみましょう。
このスライダーいらないので消します。
1:06:00
皆さんの場合もスライダーが映っていたら消してください。
この記事スライダーですね。
設置しないにして公開です。
すると真っさらな状態になります。
ここから1からやっていきたいと思います。
この状態ですね。
固定ページを編集。
もしくは先ほどのここから編集画面に移動できます。
どちらでもいいです。
先ほどの表示設定をしたことによって
このページがトップに配置されました。
メインビジュアルから下がこれになっています。
メインビジュアルが振ったまでの間ですね。
これの編集方法ですね。
内容はあらかじめ説明しておくと
見出しがあって区切り線があって
仮想ページですね。
会社名とページを考えていただくと思います。
編集と内容を考えていただくと思うんですけど
この内容の抜粋分ですね。
およそここまであれば十分かなという目安というのは
あまり長くなってしまうと
ちょっと冗長になってしまうので
途中で区切っていいとこまで区切って
詳しく見るに飛ばす。
仮想ページですね。
実際の会社名と具体的なページに飛ばす
といった感じで編集をしていってください。
なのでここの長さはお任せしますけど
そこまで長いと冗長になってしまうので
言っても5行とかですね。
4から5行でいいと思います。
3行というのはちょっと空いてしまったりとか
寂しい印象があるので
そうですね。そんな感じで設置してみてください。
エロ理由も同じですね。
これは内容のこの見出しの部分を
過剰書きしたという感じで配置しています。
これもちょろっと書いておく程度でOKです。
プロフィールも同様ですね。
いいところで区切ってください。
こういう上で開業しましたところで区切って
あとは実際のページに飛ばすといった感じになります。
メルマガの登録ホームですね。
こんな感じで設置をします。
ここはベンチマーク絡んでくるので
途中までやっていきます。
お問い合わせ。
これはお問い合わせホームに飛ばすと
いった感じになります。
これの編集方法ですね。
まずは見出しですね。
見出しを一致します。
ちょっと僕の場合こうしてていきますね。
皆さんは時間に変えてください。
右サイドにセクション用というのがあるので
1:09:01
これをクリックしてください。
フォントサイズはこれ
特大にしていただければと思います。
あとはブロックの追加から区切りですね。
区切りを選択。
色はこの出てきますので
メインカラーを指定するといいかな。
他にも色々あるんですが
メインカラーの方が統一感があります。
この見出しと区切りしている間
空いてしまっているので
この見出しをカーソルを置いた状態でOKです。
ブロック下の余白量ですね。
基本的にこの右側でですね
固定ページ全体の設定
あとはブロックごとの設定
切り替えることができますので
ブロックを選択して見出し
今選択されてますねのとこから
余白量ですね。
これ1にしてください。
0だと一筆になってしまうので
1くらいでOKです。
ということで次ですね。
次はブロックの追加段枠
抜粋分ですね。
これは皆さんの内容に合わせてですね
編集してください。
今回コヒペでいきますが
皆さんはコヒペで
実際のページが作れていたらですけど
コヒペでその抜粋分を記載してください。
次ですねボタン
これはデフォルトのボタンを使用してですね
これは中央空き
詳しく見るとか
詳細を確認するとか
この文句は特にお待たせします。
幅は50ですね。
ここにリンク指定できるので
ここに実際のページですね。
会社名とはのページを指定していただければと思います。
今回はトップページの解説なので
編集法なので
リンクは指定しません。
ということで
ここまでできたら
これをですね一旦グループ化するっていうと
その前後はですね
キツキツになってしまうので
余白をつけます。
スペーサーっていうのがあるので
これを使います。
高さは70くらいでOKですね。
この間が気になるので
1とかで
70にして
ただ空きすぎてしまうため
ブロック下の余白は1にします。
1:12:04
また再びスペーサーを呼び出して
これも同じですね
70にしてください。
OKですね。
これちょっと空きすぎるので
ボタンの下の余白を1にします。
はい。
でですね、この内容
全部選択ですね。
ここから
Macの方は
Windows Mac
どっちもシフトあると思うので
シフトを押した状態で
ブロックをどんどんクリックしていってください。
ここがやりづらいんですけど
下からの方がいいですね。
ここを選択した状態で
ここは定義しづらいので
一旦抜かしてやってみます。
ここでグループっていうのがあるので
これをグループ化します。
特にこの区切り線を選択しなくても
グループされたのでOKですね。
次ですね。
これだと
ちょっとこの
間が空いてしまっているので
空いてしまっていいんですけど
全幅にします。
全幅にすると
全体に幅が広がって
例えば色を付けたいとき
背景に色を付けたいときに
この余白とか
変な余白なくて
全体に色が付くという感じです。
例えばこういう色にします。
そうすると
背景の色が付くと
これを更新して
内容を見てみます。
こんな感じで
配置ができました。
ちょっとここ
余白が付いてしまっているので
ここからカスタマイズをクリックします。
これはですね
その他
トップページですね。
トップページのその他
コンテンツ上の余白量ですね。
キースライダーとかあればいいんですけど
初期の頃だと
なかなかキースライダーとか
難しいと思うので
この余白を無しにします。
もしキースライダーを表示させる場合は
これあると
もしかしたら
激狭になってしまうと思うので
なので
こういう狭めに
1:15:02
ここで調整できるということだけ
覚えておいてください。
こういう感じですね。
こんな感じです。
これをやっておくと
この変な余白
色を付けた場合は
目立つので
やっておいてください。
配置後というページを編集
あとは基本的に
この内容を繰り返していく
というだけになるんですけど
これ一応複製できるので
複製していただいて
例えばこっちでしたら
選ばれる理由
というような感じで
やってください。
ちなみに背景色は
一応紹介でやったので
無くてもOKです。
あとはデザインに合わせて
やってください。
あとは内容の書き換えですね。
この中でリストを使ったりとかですね。
リスト。
強豪には何者の強み。
これはデザインのものを
入力してください。
これ簡単な説明書きなんですけど
具体的な文章まで
落とし込める場合は
簡素ページを作るという
具体的なページを作るという
形になります。
それが難しい場合は
できるだけ書いたほうが
いいんですけど
難しい場合は
このトーストページに
選ばれる理由を
ちょろっと書いておく程度で
OKです。
ただ推奨するのは
推奨というか
できるだけこういう文章にしたほうが
伝わり
言うまでもないと思うんですけど
伝わりますねという感じですね。
なのでこんな感じで
これもバスセブンみたいなもんですね。
具体的なページの見出しですね。
配置して
ちょっと何だろうと思わせてからの
実際のページに飛んでもらう
詳しく見るですね。
複製
次はプロフィールですね。
基本的にこれをずっと
繰り返していくっていう形
なんですけど
今回はカラムですね。
これを使っていきたいと思います。
カラムはですね
カラムと検索していただいて
そうですね割合
30、70
これで画像
画像の予想
実際はパソコンからですね
ここから
クリシーの顔の
わかるようなもの
それをですね
アップして設置してください。
今回はこのダミーの画像でいきます。
段落
1:18:03
はいこんな感じですね。
ちなみにこのボタンも色変えられるので
背景の色ですね。
こんな感じで
テキストは都合悪いので
こんな感じで
背景の色変えられますので
それで
黒以外
黒だとちょっと
サイトのデザインによるんですけど
寂しいので
なんか色を付けておいてください。
これも複製ですね。
次がメルマガの登録フォームですね。
もうちょっと講習でいきます。
無料メルマガ登録はこちらからですね。
無料は強調しているわけなんですけど
はい
会社名では
ただいまメルマガジンの新規登録を
募集中です。
登録いただけると
こういう情報が
配信
得られますみたいな感じですね。
メールアドレスのみで
OKですよっていう
こういう例文ですね。
動画を一時停止してですね。
ちょっと考えて
打ち込んでみてください。
これは特に
なんかメモ帳とか
そうですね。
メモ帳に一旦書いていただいてから
こちらにコシペでもいいですね。
消すときに
ちょっとコツがいるんですけど
ここをクリックして
ここをクリックする
すると
全体ですね。
今これは
なんでしょうね
子供の要素にいるので
どんどん親の要素に移動したいので
ここですね。
ここをクリックして
ここをクリックして
全体を
親の要素までいく
子供の要素
親の要素があるっていうこと
ちょっと空目のときは注意してください。
あと他のもあるんですけど
なんかおかしいなと思ったら
そういう
構造になっていることを
思い出してみてください。
この状態で消します。
段落で
貼り付けですね。
ちょっと左に寄ってしまってて
気持ち悪いなと思ったら
中央にすると
なんかこう
すっきりします。
文章が短い場合ですね。
ここに関しては
ベンチマークEメールになりますので
HTMLと
埋め込みコードを取得した状態で
このカスタムHTMLに配置してください。
ボタンいらないので
今回は消します。
削除と
これも
子供の要素にいて
うまく削除ができなかったので
親の要素に移動
この状態で削除します。
あと注意喚起のこれですね。
アドレスGメールにしてくださいね
っていうものですね。
極端に届きにくくなってしまうため
キャリアのメールとか
このiCloud
やめてくださいね
っていうものですね。
で、次
最後ですね
お問い合わせフォームですね。
これはこっちを複製します。
これ上とか下に移動できるので
1:21:04
下に移動した上で
最後お問い合わせですね。
皆さんは実際にですね
こうやって打ち込んでください。
で、あとはここ
これ同じですね。
カラーム
で、これ消してください。
で、ここに文章を打ち込むと
お問い合わせフォームはいかになります。
これ中央に配置します。
あとはこれ
詳しく見るんですけど
お問い合わせフォームねっていう風に
これ皆さんは手打ちで打ち込んでください。
で、実際のお問い合わせフォームの方に指定すると
いった感じになります。
こんな感じですね。
あとは更新をクリックしていただいて
基本はバスティブもニューヨークっていう感じで
編集をしてみてください。
あとグループを使うとか
いろいろ細かいとこありましたけど
ゆっくりやってみてください。
それでは今回は
メニューの設定を解説していきたいと思います。
ある程度ページがですね
固定ページの方で
ページを作成できたら
メニューの設定をやっていきましょう。
こんな感じですね。
メニュー
グローバルメニューなんかといいますけど
メインとなるコンテンツを配置して
あとルールとかキーアップ系は
下の方に配置するといった感じになります。
なのでヘッダーとフッターに分けるっていう
そんな感じです。
外観のメニューをクリックしてください。
こちらから
まずヘッダーの方をやっていきます。
ヘッダーをメニューと入力して
メニューを作成
すべてのやつをやるとすべてのが出てきます。
最近のやつは出てこないのですべてですね。
まずは会社名とページをメニューに追加します。
チェックを入れて
メニューに追加するっていう簡単な作業です。
あとはプロフィール
選ばれる理由ですね。
あとは
お客様の声ですね。
あとはギャラリーとかですね。
これもしなかったらメニューから
メニューに追加しなくてもOKです。
作成自体ができていないと思うんで。
ブログ記事欄はこの後解説します。
あとよくある質問
あとお問い合わせですね。
この内容で作成してください。
プロフィールはこのように
改装にしてしまってもいいです。
こういうことですね。
カートラーを押せと出てくると
改装上にするには
1:24:01
ちょっとずらすっていう
副項目になっているのを確認ですね。
一旦保存します。
次にブログ記事一覧を作ります。
どういうものなのかといいますと
このように一覧となっている
っていう感じですね。
こういうのを設置できますので
すごく簡単にできます。
これはまず固定ページから
新規追加ですね。
ここにブログ記事一覧と入力してください。
そしたらここに
アーマリンクですね。
もしこれ出てこなかったら
一回下書き保存してください。
ここにブログと打ち込んでください。
これで公開ですね。
内容は中身は何も書かなくてOKです。
この状態で
表示設定をクリックします。
投稿ページのところに選択とあるので
ここにブログ記事一覧を指定します。
変更保存。
そうしましたら
外観メニューですね。
その中でブログ記事一覧
これをメニューに追加します。
保存。
サイトを見てみます。
あれですね。
ここにグローバルメニューとあるので
これをチェックを入れてください。
メニューを保存ですね。
これで確認します。
反映されているのが分かりますね。
ブログ記事一覧も少ないんですが
投稿数が1個しかないんですが
これが一覧となって表示されると
いった形になります。
こんな感じですね。
メニューは設置してください。
次フッターの方ですね。
ちなみに内容はですね
実際に作成できたものだけでいいです。
あとご自身の設置したいものに
合わせてください。
基本は会社名とか選べる理由とかですね。
ブログ記事一覧ですね。
こういうのはできるかなと思います。
あとよくある質問なんかも
難しくはないかなと思います。
ここはお任せします。
あとここですね。
先ほど解説したグローバルナビに
チェックを入れておいてください。
これですね。
グローバルナビとスマホの方ですね。
チェックを入れておいてください。
次フッターのメニューを作成していきます。
フッターとリンクします。
フッターメニューでメニューを作成。
フッターはですね
1:27:00
こういう会社概要とかプライバシーポリシーとか
特定小取引に基づく表記
それと再度お問い合わせフォームですね。
これを配置します。
フッターのところにチェックを入れてください。
メニューを保存ですね。
これでOKですね。
配置されましたね。
こんな感じですね。
メニューを使ってグローバルナビ
ヘッダーの方とフッターですね。
設定しておいてください。
01:27:34

コメント

スクロール