WEBVTT

00:00:00.500 --> 00:00:11.410
はい、今回のこの動画では、ワードプレスの固定ページを使った、このような簡易的なオプトインページを作成していきたいと思います。

00:00:11.410 --> 00:00:21.130
はい、ではまず、 こちらのダッシュボードから固定ページ、新規追加をクリックしてください。

00:00:21.130 --> 00:00:26.970
はい、で、そうしますと、固定ページの編集画面に行くかと思います。

00:00:27.090 --> 00:00:35.990
で、まずはこちらのタイトルを入力してください。

00:00:35.990 --> 00:00:45.950
はい、で、入力が終わりましたら、しばらくするとこのようにパーマリンクが表示されますので、こちらを変更します。

00:00:45.950 --> 00:01:00.230
多分何も設定していない状態ですと、このデフォルトのまま、タイトルが反映されてしまいますので、こちらを半画A数字のものに、このような形でシンプルなもので結構ですので、入力をお願いします。

00:01:00.230 --> 00:01:05.910
今回はテストオプトにしていますけど、オプトでも結構です。

00:01:05.910 --> 00:01:09.790
で、こちらOKを押してください。

00:01:09.790 --> 00:01:14.830
編集を押しますと、このように編集することができます。

00:01:14.830 --> 00:01:25.070
はい、で、こちらビジュアルとテキストとあるのですが、このビジュアルの方にタブをクリックしてください。

00:01:25.070 --> 00:01:28.230
で、まずはこのテキストの入力をお願いします。

00:01:28.230 --> 00:01:36.740
こちら、内容に合わせて、このようにベネフィットなどを入力してください。

00:01:36.740 --> 00:01:44.090
今回は簡単なものをこのように入力しています。

00:01:44.090 --> 00:01:51.730
はい、で、入力終わりましたら、テキストの入力終わりましたら、続いてフォームの設定に入っていきたいと思います。

00:01:51.730 --> 00:01:59.490
フォームは今回、MailChimpを使って解説いたします。

00:01:59.530 --> 00:02:10.500
はい、まずはこのリストの中から、今回使いたいリストをこのようにクリックしてください。

00:02:10.500 --> 00:02:16.580
はい、続いてこのSignupFormsをクリックしてください。

00:02:16.580 --> 00:02:25.440
で、HTMLコードを取得したいので、こちらをクリックしてください。

00:02:25.440 --> 00:02:31.400
で、こちらがコードになりますので、こちらをコピーしてください。

00:02:31.400 --> 00:02:39.800
はい、で、このテキストの方に貼り付けを行っていきます。

00:02:39.800 --> 00:02:54.030
はい、で、このテキストの、ご入力いただいたテキストの下のあたりに、はい、このように貼り付けを行っていきます。

00:02:54.030 --> 00:03:06.810
で、貼り付けを行いましたら、このMailChimpですとスクリプトの、JavaScriptのコードがありますので、こちらを消していきます。

00:03:06.810 --> 00:03:27.160
このスラッシュ、スクリプトから、このスクリプトから、このスラッシュ、スクリプトまで、こちらを消してしまってください。

00:03:27.160 --> 00:03:33.120
はい、で、この状態でビジュアルに戻っていただきますと、このように反映がされています。

00:03:33.120 --> 00:03:41.640
で、目字の方が英語になってしまっているので、こちらを変更します。

00:03:41.640 --> 00:03:50.660
はい、で、こちらのテキスト、いらないので消してしまってください。

00:03:50.660 --> 00:03:57.340
で、登録ボタンの方、これ英語になってしまっているので、こちらの変更を行います。

00:03:57.340 --> 00:04:12.850
こちらはテキストにしていただいて、はい、こちらがボタンのコードになるのですが、このように、クラスボタンという風になっていて、

00:04:12.850 --> 00:04:29.380
ネーム、サブ、サブスクライブズという風になっていて、タイプ、サブミット、こちらの、こちらのコードがあることを確認してください。

00:04:29.380 --> 00:04:39.860
で、こちらのバリューの方がテキストの変更になりますので、こちらのバリューイコールないないという箇所を変更してください。

00:04:39.860 --> 00:04:46.870
今回は登録するという形になります。

00:04:46.870 --> 00:04:53.290
はい、で、こちらを変更しますと、このように反映がされます。

00:04:53.290 --> 00:05:03.890
はい、ちょっとコードを扱うので難しいですけど、こちらのタイプイコールないないの部分がサブミットになっていることを確認してください。

00:05:03.890 --> 00:05:12.890
で、テキストを変更するにはこのバリューのところを変更するという形になります。

00:05:12.890 --> 00:05:23.090
はい、で、続いて、またビジュアルに戻っていただいて、次は画像の挿入を行っていきたいと思います。

00:05:23.090 --> 00:05:31.940
こちらのメディアを追加からファイルをアップロードすることで画像を取り込むことができます。

00:05:31.940 --> 00:05:39.540
で、アップロードしましたらこのように選択していただいて、固定ページに挿入をクリックしてください。

00:05:39.540 --> 00:05:47.500
あとはこのように配置を自由に変えていただいて、

00:05:47.500 --> 00:06:00.740
最後にこの固定ページの属性の箇所にサイドバーをなくす項目がありますので、こちらをクリックしてください。

00:06:00.740 --> 00:06:09.460
こちらはテーマによるので、もしかしたらない場合はないテーマもあるかと思うので、そこら辺はご了承ください。

00:06:09.460 --> 00:06:24.440
で、最後に下書きとして保存をクリックしていただいて、この状態でプレビューボタンを押してください。

00:06:24.440 --> 00:06:34.340
で、これちょっとずれてしまったので修正したいと思います。

00:06:34.340 --> 00:06:47.870
先ほどお名前のところがずれていたので、こちらをちょっと一段下に下げていただくと解消されるかと思います。

00:06:47.870 --> 00:06:55.710
はい、これでオフトウィンページの簡易的なオフトウィンページですけど完成できました。

00:06:55.710 --> 00:06:59.830
今回は以上になります。

00:06:59.830 --> 00:07:14.630
今回のこの動画ではこちらのホームのオフトウィンページのホームのデザインの役割のあるCSSのコードの設定方法について解説します。

00:07:14.630 --> 00:07:26.420
ではまずプラグインを導入したいので、ダッシュボードからプラグイン新規追加をクリックしてください。

00:07:26.420 --> 00:07:38.430
こちらにこのようにシンプルカスタムCSSと入力してください。

00:07:38.430 --> 00:07:50.700
このように検索結果に表示されますので、今すぐインストールを押していただいて必ずインストール後は有効化も行ってください。

00:07:50.700 --> 00:08:02.070
有効化を行いますと外観からカスタムCSSと出てきますのでこちらをクリックしてください。

00:08:02.070 --> 00:08:13.070
こちらにこのカスタムCSSをここに入力してくださいとあるのでこちらの下にでも貼り付けを行ってください。

00:08:13.070 --> 00:08:18.070
コード自体は差し上げますのでダウンロードしてこちらにコピーをお願いします。

00:08:18.070 --> 00:08:26.410
最後にカスタムCSSの更新を忘れなくクリックしてください。

00:08:26.410 --> 00:08:48.300
マンガチ、設定が反映されない場合はテーマの編集からこのようにスタイルシート、スタイルCSSとあるのでこちらを編集していきます。

00:08:48.300 --> 00:09:11.200
こちらいろいろコードが書かれているんですけど一番下に移動していただいてこのようにコードを貼り付けるという風にしてください。

00:09:11.200 --> 00:09:16.200
必ず一番下に貼り付けを行ってください。

00:09:16.200 --> 00:09:23.200
最後にファイルの更新を忘れなくクリックしてください。

00:09:26.920 --> 00:09:36.940
あとはテーマによったりするのですがこの外観をカスタマイズのとこから

00:09:36.940 --> 00:09:54.940
これはエマノンテーマですけどこのように追加CSSという形でCSSを編集できるような作りになっているテーマもありますのでこちらもお試しください。

00:09:54.940 --> 00:09:58.940
今回は以上になります。

00:09:58.940 --> 00:10:07.940
今回のこの動画ではこちらのフォームのHTMLコードの編集方法について解説します。

00:10:07.940 --> 00:10:18.420
ではまずこのようにテキストエディターで解説を行っていきます。

00:10:18.420 --> 00:10:25.420
こちらだと狭くて編集がしづらいのでテキストエディターで編集を行っていきます。

00:10:25.420 --> 00:10:33.370
ではまずこちらがダウンロードしていただくコードになります。

00:10:33.370 --> 00:10:36.370
こちら差し上げたコードになります。

00:10:36.370 --> 00:10:52.940
軽く簡単に説明しますとこの括弧があるのですがこちらの括弧で始まりこちらの括弧で終わるという形になります。

00:10:52.940 --> 00:10:59.300
これがHTMLコードになります。

00:10:59.300 --> 00:11:17.560
このクラスというのがあるかと思うのですがこちらでWeb上のデザインの役割を持っているCSとCSSと連携をしているという形になります。

00:11:17.560 --> 00:11:31.560
こちらのクラスの名前というEbookFromTitleという形でこちらでCSSと連携を行っている形になります。

00:11:31.560 --> 00:11:39.560
こちら少し難しいですがこちらのクラスでCSSと連携を図っているということを覚えておいてください。

00:11:39.560 --> 00:11:49.940
あとはこのテキストなんですけど申し込みはこちらからこちらをお好きな形で変更お願いします。

00:11:49.940 --> 00:11:54.250
こちらのテキストになります。

00:11:54.250 --> 00:12:06.250
あとは特に編集する箇所といえばこのホームのご自身のメール配信システムとのホームの連携の設定になっていきます。

00:12:06.250 --> 00:12:16.250
今回はこのMailChimpで解説を行っていきたいと思います。

00:12:16.250 --> 00:12:27.070
まずこのリストから今回オプトインページに使用したいリスト名をクリックしてください。

00:12:27.070 --> 00:12:42.070
こちらの選択した設定するリストにオプトインページのメールアドレスの登録があった場合こちらに追加していくという形になります。

00:12:42.070 --> 00:12:53.540
まずはこのサインアップホームをクリックしていただいてこちらからHTMLコードを取得します。

00:12:53.540 --> 00:13:00.540
こちらをコピーしていただいてこちらに貼り付けを行ってください。

00:13:00.540 --> 00:13:10.140
こちらも同様にテキストエディターなどに貼り付けを行ってください。

00:13:10.140 --> 00:13:30.200
こちらのホームのコードを変える形になるのですがこちら少し難しいんですけどこのホーム反隔スペースアクションの箇所を変更する形になります。

00:13:30.200 --> 00:13:40.090
こちらMailChimp少し複雑ですけどホーム反隔スペースアクション

00:13:40.090 --> 00:13:57.860
こちらをコピーしていただいてコントロールSとかコマンドSでテキストエディター検索機能が付いているかと思いますのでそちらを利用して検索を行ってみてください。

00:13:57.860 --> 00:14:04.300
ホームアクションで見つからない場合はホームで探してみてください。

00:14:04.300 --> 00:14:16.700
こちらが該当する箇所なんですがこちらをコピーします。

00:14:16.700 --> 00:14:23.700
だいたいこちらで始まりホームアクションないないという形になっていて

00:14:23.700 --> 00:14:31.700
こちらの逆向きのカッコで終わりますのでこちらを必ずコピーしてください。

00:14:31.700 --> 00:14:43.330
今回のこの動画ではワードプレスのElementorというプラグインを使用してこのようなオフトウィンページを作成していきたいと思います。

00:14:43.330 --> 00:15:03.520
ではまずワードプレスのダッシュボードに移動していただきこちらのプラグインから新規追加をクリックしてください。

00:15:03.520 --> 00:15:24.330
こちらにこのような形でElementorと入力していただくと検索結果に表示されます。

00:15:24.330 --> 00:15:32.330
こちらを今すぐインストールを押していただいてインストール後は必ず有効化も行ってください。

00:15:32.330 --> 00:15:40.330
無事有効化がされましたこのようにElementorという項目で出てきますのでこちらを確認してください。

00:15:40.330 --> 00:15:51.860
続いて固定ページの方で作成していきたいと思いますので固定ページ一覧をクリックしていただいて

00:15:51.860 --> 00:15:54.860
こちらの新規追加をクリックしてください。

00:15:54.860 --> 00:16:08.610
新規追加をクリックしていただきますとこのように固定ページの編集画面に行きます。

00:16:08.610 --> 00:16:15.610
そちらでこのようにElementorで編集という風に出てきますのでこちらをクリックしてください。

00:16:15.610 --> 00:16:21.620
その前にまずこのタイトルとパーマリンクですね。

00:16:21.620 --> 00:16:29.620
タイトルを入力しますとパーマリンクが表示されますのでこちらをこのようにシンプルなもので結構ですので

00:16:29.620 --> 00:16:43.820
オプトですとかオプトインページですとかそのような形で両文字で簡単に入力してください。

00:16:43.820 --> 00:16:49.340
こちらシンプルなもので結構です。

00:16:49.340 --> 00:16:57.340
あとこちらテーマによったりするのですがこちらの固定ページのサイドバー無しを選択してください。

00:16:57.340 --> 00:17:03.340
その状態で下書きとして保存を必ずクリックしてください。

00:17:03.340 --> 00:17:06.340
ではElementorの編集画面に行きたいと思います。

00:17:06.340 --> 00:17:19.270
こちらのElementorで編集をクリックしてください。

00:17:19.270 --> 00:17:26.800
こちらの画面で編集を行っていくことができます。

00:17:26.800 --> 00:17:49.170
ではまずこちらが出ていない場合はまずこの新しいセクションを追加でワンコラムのものを選択してください。

00:17:49.170 --> 00:18:00.170
まずこちらに要素がこのようにたくさんあるのですがこの中からこのコラムをドラッグ&ドロップで持ってきてください。

00:18:00.170 --> 00:18:03.170
こちらに持ってきてください。

00:18:03.170 --> 00:18:12.860
コラム数を増やしたいのでこちらのコラムからプラスをクリックしてください。

00:18:12.860 --> 00:18:17.500
そうしますとこのようにコラム数が増えます。

00:18:17.500 --> 00:18:30.240
こちらのものをこのようにずらしていただいて40%設定してください。

00:18:30.240 --> 00:18:36.770
こちらこのように矢印が出てきますのでそちらで移動することができます。

00:18:36.770 --> 00:18:45.000
このように40で33というふうに。

00:18:45.000 --> 00:18:56.140
こちら見えないのですが26.7というふうになっていますのでこちらを確認してください。

00:18:56.140 --> 00:19:09.780
続いてこのテキストエディターをこのように挿入したいのでテキストエディターをこのように持ってきてください。

00:19:13.380 --> 00:19:21.380
こちら普段お使いのワードプレスの編集画面ととても似ていて

00:19:21.380 --> 00:19:28.750
こちらの鉛筆マークを押しますと編集画面に行くことができます。

00:19:28.750 --> 00:19:34.470
こちらにテキストを入力していきます。

00:19:34.470 --> 00:19:43.470
ビジュアルとテキストとあるのですがビジュアルの方が簡易的にテキストを編集することができますので

00:19:43.470 --> 00:19:48.470
ビジュアルで慣れていない方はこちらで編集をお願いします。

00:19:48.470 --> 00:19:54.470
少し画面が小さいですけどこちらで普段通りのものを使用することができます。

00:19:54.470 --> 00:20:07.860
このような形でテキストを入力してください。

00:20:07.860 --> 00:20:19.360
このメール講座ではこのようにないないというベネヒットがありこのような解説を行っていますという内容になります。

00:20:19.360 --> 00:20:22.360
こちら必ず保存を押してください。

00:20:26.080 --> 00:20:33.080
続いて画像をこのようなダミー画像を挿入したいと思いますので

00:20:33.080 --> 00:20:38.080
こちらを押していただいて

00:20:38.080 --> 00:20:43.080
コラムの下の画像をこのようにトラッカーのロックで持ってきてください。

00:20:43.080 --> 00:20:48.080
こちらで画像の挿入ができます。

00:20:48.080 --> 00:20:56.970
こちらからファイルをアップロードからご自身のパソコンにある画像をアップロードしていただいて

00:20:56.970 --> 00:21:00.970
アップロードしましたらこのようにライブラリーの中に追加されます。

00:21:00.970 --> 00:21:06.970
こちらの中から画像を選択していただいて

00:21:06.970 --> 00:21:10.970
メディアの挿入をクリックしてください。

00:21:10.970 --> 00:21:14.970
これで画像の設定が完了しました。

00:21:14.970 --> 00:21:21.430
続いてホームの設定になります。

00:21:21.430 --> 00:21:31.730
ホームはhtmlの要素を使って作成していきます。

00:21:31.730 --> 00:21:39.730
こちらにhtmlのコードをこのように埋め込んでいきます。

00:21:39.730 --> 00:21:46.730
こちらのコードに関してはサイトの方でダウンロードできるようにしておきますので

00:21:46.730 --> 00:21:51.870
そちらをダウンロードしてください。

00:21:51.870 --> 00:21:59.680
こちらで同様に保存を押してください。

00:21:59.680 --> 00:22:06.680
続いてこの目次とプロフィールの設定を行っていきたいと思います。

00:22:06.680 --> 00:22:15.180
こちらも新しいセクションの追加でこのワンコラムのものを選択してください。

00:22:15.180 --> 00:22:23.820
こちらも同様にコラムをこのように持ってきていただいて

00:22:23.820 --> 00:22:30.350
こちらの幅を調整してください。

00:22:30.350 --> 00:22:38.110
こちら67にしてほしいんですけど

00:22:38.110 --> 00:22:45.860
なかなか合わない場合は66.9でも

00:22:45.860 --> 00:22:51.860
0.1の微差ではそんなに見た目に大きな差はできなくて

00:22:51.860 --> 00:22:58.860
違和感もないので66.9でも結構でございます。

00:22:58.860 --> 00:23:03.860
こちら本来では67ですけど

00:23:03.860 --> 00:23:08.860
上手い具合に調整ができないこともあるかと思いますので

00:23:08.860 --> 00:23:15.860
この場合は66.9でも結構でございます。

00:23:15.860 --> 00:23:18.860
では続いてこの

00:23:18.860 --> 00:23:21.860
もう一度テキストエディターを持ってきていただいて

00:23:21.860 --> 00:23:30.300
こちらのテキストにコードを貼り付けます。

00:23:30.300 --> 00:23:39.340
こちらのコードもサイトの方でダウンロードをしてください。

00:23:39.340 --> 00:23:52.370
このように目陣の項目が下がってしまってバランスが悪くなってしまう場合は

00:23:52.370 --> 00:23:57.810
こちらに見出しがありますのでこの見出しをこのように

00:23:57.810 --> 00:24:04.180
ブラック&グラフでこの目陣項目の上に持ってきてください。

00:24:04.180 --> 00:24:17.400
テキストをこのように入力していただいて

00:24:17.400 --> 00:24:21.400
こちらはテーマによってはちゃんとした表示になるかと思うんですけど

00:24:21.400 --> 00:24:29.400
こちらでお使いのテーマは微調整が必要ですので微調整を行っていきたいと思います。

00:24:29.400 --> 00:24:45.090
こちらでテキストの色をこちらのスタイルで

00:24:45.090 --> 00:24:48.090
タイトルのテキスト色を変更することができます。

00:24:48.090 --> 00:24:59.500
3333と入力していただいて

00:24:59.500 --> 00:25:08.220
続いて行の高さでこのように幅を変えていきます。

00:25:08.220 --> 00:25:18.180
この窓はちょっと寄りすぎていますので

00:25:18.180 --> 00:25:23.580
こちらを中央に配置したいと思います。

00:25:23.580 --> 00:25:26.580
こちらはテーマによってはきちんと表示されるかと思いますので

00:25:26.580 --> 00:25:29.580
微調整する場合はこちらをご参考にしてください。

00:25:29.580 --> 00:25:41.660
続いてこの目陣がいらなくなったので切ってしまいます。

00:25:45.310 --> 00:25:50.820
あとは項目の編集なのですが

00:25:50.820 --> 00:25:59.340
こちらは普段お使いのワードプレスと同じ要領でテキストを編集してください。

00:25:59.340 --> 00:26:13.100
最後に保存をクリックしてください。

00:26:13.100 --> 00:26:21.100
続いてなんですがこのプロフィールの項目を作成したいと思います。

00:26:21.100 --> 00:26:25.100
こちらもテキストエディターから

00:26:25.100 --> 00:26:28.100
テキストエディターをドラッグ&ドロップで持ってきてください。

00:26:28.100 --> 00:26:35.750
編集画面に入っていただいてテキストを選択してください。

00:26:35.750 --> 00:26:42.750
こちらもコードを差し上げますのでコピー&ペーストでお願いします。

00:26:42.750 --> 00:26:52.620
こちらちょっと分かりづらいんですが

00:26:52.620 --> 00:26:56.620
このように画像の編集ができますので

00:26:56.620 --> 00:27:02.760
画像を変えることができますのでメディアを追加から

00:27:02.760 --> 00:27:10.710
ファイルをアップロードからパソコンから画像をアップロードしていただいて

00:27:10.710 --> 00:27:17.710
写真を選択していただき固定ページに挿入していただくと画像を変えることができます。

00:27:17.710 --> 00:27:21.710
なのでこちらの画像は消してしまっても結構です。

00:27:21.710 --> 00:27:31.630
続いてこちらテキストの編集になります。

00:27:31.630 --> 00:27:40.150
こちらでお名前を変更してください。

00:27:40.150 --> 00:27:46.100
あとはこちらでプロフィールを変更してください。

00:27:46.100 --> 00:27:53.930
こちらサンプルとして差し上げますのでこちらをコピー&ペーストして編集してみてください。

00:27:53.930 --> 00:27:59.390
こちらも同様に保存をしてください。

00:27:59.390 --> 00:28:09.470
このままですとプロフィールの線がないのでボーダーの設定をしていきたいと思います。

00:28:09.470 --> 00:28:17.320
もう一度このように編集画面に行っていただくと

00:28:18.320 --> 00:28:26.320
コンテンツ、スタイル、詳細とあるので詳細をクリックしてください。

00:28:26.320 --> 00:28:36.740
こちらからパディングということでパディングを設定します。

00:28:36.740 --> 00:28:46.100
こちらを大体10ピクセルに設定してください。

00:28:46.100 --> 00:28:52.680
続いてボーダー。

00:28:52.680 --> 00:29:02.710
こちらをボーダータイプということで1本線に設定してください。

00:29:02.710 --> 00:29:08.240
幅を1ピクセル。

00:29:08.240 --> 00:29:18.790
色なんですがこちらをDDDDDに設定してください。

00:29:18.790 --> 00:29:24.790
ボーダーの丸みを5ピクセルに設定してください。

00:29:28.380 --> 00:29:38.130
こちらまでボーダーの設定が終わりましたら保存をクリックしてください。

00:29:38.130 --> 00:29:42.130
最後にこちらのフォームの設定を行います。

00:29:42.130 --> 00:29:52.130
こちらも同様に新しいセクションを追加で1カラムのものを選択していただいて

00:29:52.130 --> 00:29:59.130
フォームですのでHTMLをこのようにドラッグ&ドットで持ってきてください。

00:29:59.130 --> 00:30:11.810
こちらでコードを差し上げますのでコピーしていただいて保存を押してください。

00:30:11.810 --> 00:30:20.350
フォームに関してはまた別動画で解説をいたします。

00:30:20.350 --> 00:30:29.350
またこのフォームのデザインで少しCSSを設定する必要があるのですが

00:30:29.350 --> 00:30:32.350
そちらも別動画で解説いたします。

00:30:32.350 --> 00:30:37.350
またCSSのコードは同様に差し上げますのでそちらをコピーしていただいて

00:30:37.350 --> 00:30:40.350
編集して設定していただく形になります。

00:30:40.350 --> 00:30:48.920
では最後に保存を押した状態で一度クリックした状態で

00:30:48.920 --> 00:30:51.920
この×印を押してください。

00:30:51.920 --> 00:30:56.920
こちらで固定ページを実際にプレビュー画面で見ることができます。

00:31:02.300 --> 00:31:06.300
このダッシュボードへこちらを押しますと

00:31:06.300 --> 00:31:10.300
このようにダッシュボードに戻ることができます。

00:31:10.300 --> 00:31:16.300
編集が終わりましたらこの公開ボタンをお忘れなく押してください。

00:31:16.300 --> 00:31:22.790
今回の動画は以上になります。