00:00
はい、今回のこの動画では、ワードプレスの固定ページを使った、このような簡易的なオプトインページを作成していきたいと思います。
はい、ではまず、 こちらのダッシュボードから固定ページ、新規追加をクリックしてください。
はい、で、そうしますと、固定ページの編集画面に行くかと思います。
で、まずはこちらのタイトルを入力してください。
はい、で、入力が終わりましたら、しばらくするとこのようにパーマリンクが表示されますので、こちらを変更します。
多分何も設定していない状態ですと、このデフォルトのまま、タイトルが反映されてしまいますので、こちらを半画A数字のものに、このような形でシンプルなもので結構ですので、入力をお願いします。
今回はテストオプトにしていますけど、オプトでも結構です。
で、こちらOKを押してください。
編集を押しますと、このように編集することができます。
はい、で、こちらビジュアルとテキストとあるのですが、このビジュアルの方にタブをクリックしてください。
で、まずはこのテキストの入力をお願いします。
こちら、内容に合わせて、このようにベネフィットなどを入力してください。
今回は簡単なものをこのように入力しています。
はい、で、入力終わりましたら、テキストの入力終わりましたら、続いてフォームの設定に入っていきたいと思います。
フォームは今回、MailChimpを使って解説いたします。
はい、まずはこのリストの中から、今回使いたいリストをこのようにクリックしてください。
はい、続いてこのSignupFormsをクリックしてください。
で、HTMLコードを取得したいので、こちらをクリックしてください。
で、こちらがコードになりますので、こちらをコピーしてください。
はい、で、このテキストの方に貼り付けを行っていきます。
はい、で、このテキストの、ご入力いただいたテキストの下のあたりに、はい、このように貼り付けを行っていきます。
で、貼り付けを行いましたら、このMailChimpですとスクリプトの、JavaScriptのコードがありますので、こちらを消していきます。
03:06
このスラッシュ、スクリプトから、このスクリプトから、このスラッシュ、スクリプトまで、こちらを消してしまってください。
はい、で、この状態でビジュアルに戻っていただきますと、このように反映がされています。
で、目字の方が英語になってしまっているので、こちらを変更します。
はい、で、こちらのテキスト、いらないので消してしまってください。
で、登録ボタンの方、これ英語になってしまっているので、こちらの変更を行います。
こちらはテキストにしていただいて、はい、こちらがボタンのコードになるのですが、このように、クラスボタンという風になっていて、
ネーム、サブ、サブスクライブズという風になっていて、タイプ、サブミット、こちらの、こちらのコードがあることを確認してください。
で、こちらのバリューの方がテキストの変更になりますので、こちらのバリューイコールないないという箇所を変更してください。
今回は登録するという形になります。
はい、で、こちらを変更しますと、このように反映がされます。
はい、ちょっとコードを扱うので難しいですけど、こちらのタイプイコールないないの部分がサブミットになっていることを確認してください。
で、テキストを変更するにはこのバリューのところを変更するという形になります。
はい、で、続いて、またビジュアルに戻っていただいて、次は画像の挿入を行っていきたいと思います。
こちらのメディアを追加からファイルをアップロードすることで画像を取り込むことができます。
で、アップロードしましたらこのように選択していただいて、固定ページに挿入をクリックしてください。
あとはこのように配置を自由に変えていただいて、
最後にこの固定ページの属性の箇所にサイドバーをなくす項目がありますので、こちらをクリックしてください。
06:00
こちらはテーマによるので、もしかしたらない場合はないテーマもあるかと思うので、そこら辺はご了承ください。
で、最後に下書きとして保存をクリックしていただいて、この状態でプレビューボタンを押してください。
で、これちょっとずれてしまったので修正したいと思います。
先ほどお名前のところがずれていたので、こちらをちょっと一段下に下げていただくと解消されるかと思います。
はい、これでオフトウィンページの簡易的なオフトウィンページですけど完成できました。
今回は以上になります。
今回のこの動画ではこちらのホームのオフトウィンページのホームのデザインの役割のあるCSSのコードの設定方法について解説します。
ではまずプラグインを導入したいので、ダッシュボードからプラグイン新規追加をクリックしてください。
こちらにこのようにシンプルカスタムCSSと入力してください。
このように検索結果に表示されますので、今すぐインストールを押していただいて必ずインストール後は有効化も行ってください。
有効化を行いますと外観からカスタムCSSと出てきますのでこちらをクリックしてください。
こちらにこのカスタムCSSをここに入力してくださいとあるのでこちらの下にでも貼り付けを行ってください。
コード自体は差し上げますのでダウンロードしてこちらにコピーをお願いします。
最後にカスタムCSSの更新を忘れなくクリックしてください。
マンガチ、設定が反映されない場合はテーマの編集からこのようにスタイルシート、スタイルCSSとあるのでこちらを編集していきます。
こちらいろいろコードが書かれているんですけど一番下に移動していただいてこのようにコードを貼り付けるという風にしてください。
09:11
必ず一番下に貼り付けを行ってください。
最後にファイルの更新を忘れなくクリックしてください。
あとはテーマによったりするのですがこの外観をカスタマイズのとこから
これはエマノンテーマですけどこのように追加CSSという形でCSSを編集できるような作りになっているテーマもありますのでこちらもお試しください。
今回は以上になります。
今回のこの動画ではこちらのフォームのHTMLコードの編集方法について解説します。
ではまずこのようにテキストエディターで解説を行っていきます。
こちらだと狭くて編集がしづらいのでテキストエディターで編集を行っていきます。
ではまずこちらがダウンロードしていただくコードになります。
こちら差し上げたコードになります。
軽く簡単に説明しますとこの括弧があるのですがこちらの括弧で始まりこちらの括弧で終わるという形になります。
これがHTMLコードになります。
このクラスというのがあるかと思うのですがこちらでWeb上のデザインの役割を持っているCSとCSSと連携をしているという形になります。
こちらのクラスの名前というEbookFromTitleという形でこちらでCSSと連携を行っている形になります。
こちら少し難しいですがこちらのクラスでCSSと連携を図っているということを覚えておいてください。
あとはこのテキストなんですけど申し込みはこちらからこちらをお好きな形で変更お願いします。
こちらのテキストになります。
あとは特に編集する箇所といえばこのホームのご自身のメール配信システムとのホームの連携の設定になっていきます。
12:06
今回はこのMailChimpで解説を行っていきたいと思います。
まずこのリストから今回オプトインページに使用したいリスト名をクリックしてください。
こちらの選択した設定するリストにオプトインページのメールアドレスの登録があった場合こちらに追加していくという形になります。
まずはこのサインアップホームをクリックしていただいてこちらからHTMLコードを取得します。
こちらをコピーしていただいてこちらに貼り付けを行ってください。
こちらも同様にテキストエディターなどに貼り付けを行ってください。
こちらのホームのコードを変える形になるのですがこちら少し難しいんですけどこのホーム反隔スペースアクションの箇所を変更する形になります。
こちらMailChimp少し複雑ですけどホーム反隔スペースアクション
こちらをコピーしていただいてコントロールSとかコマンドSでテキストエディター検索機能が付いているかと思いますのでそちらを利用して検索を行ってみてください。
ホームアクションで見つからない場合はホームで探してみてください。
こちらが該当する箇所なんですがこちらをコピーします。
だいたいこちらで始まりホームアクションないないという形になっていて
こちらの逆向きのカッコで終わりますのでこちらを必ずコピーしてください。
今回のこの動画ではワードプレスのElementorというプラグインを使用してこのようなオフトウィンページを作成していきたいと思います。
ではまずワードプレスのダッシュボードに移動していただきこちらのプラグインから新規追加をクリックしてください。
15:03
こちらにこのような形でElementorと入力していただくと検索結果に表示されます。
こちらを今すぐインストールを押していただいてインストール後は必ず有効化も行ってください。
無事有効化がされましたこのようにElementorという項目で出てきますのでこちらを確認してください。
続いて固定ページの方で作成していきたいと思いますので固定ページ一覧をクリックしていただいて
こちらの新規追加をクリックしてください。
新規追加をクリックしていただきますとこのように固定ページの編集画面に行きます。
そちらでこのようにElementorで編集という風に出てきますのでこちらをクリックしてください。
その前にまずこのタイトルとパーマリンクですね。
タイトルを入力しますとパーマリンクが表示されますのでこちらをこのようにシンプルなもので結構ですので
オプトですとかオプトインページですとかそのような形で両文字で簡単に入力してください。
こちらシンプルなもので結構です。
あとこちらテーマによったりするのですがこちらの固定ページのサイドバー無しを選択してください。
その状態で下書きとして保存を必ずクリックしてください。
ではElementorの編集画面に行きたいと思います。
こちらのElementorで編集をクリックしてください。
こちらの画面で編集を行っていくことができます。
ではまずこちらが出ていない場合はまずこの新しいセクションを追加でワンコラムのものを選択してください。
まずこちらに要素がこのようにたくさんあるのですがこの中からこのコラムをドラッグ&ドロップで持ってきてください。
18:00
こちらに持ってきてください。
コラム数を増やしたいのでこちらのコラムからプラスをクリックしてください。
そうしますとこのようにコラム数が増えます。
こちらのものをこのようにずらしていただいて40%設定してください。
こちらこのように矢印が出てきますのでそちらで移動することができます。
このように40で33というふうに。
こちら見えないのですが26.7というふうになっていますのでこちらを確認してください。
続いてこのテキストエディターをこのように挿入したいのでテキストエディターをこのように持ってきてください。
こちら普段お使いのワードプレスの編集画面ととても似ていて
こちらの鉛筆マークを押しますと編集画面に行くことができます。
こちらにテキストを入力していきます。
ビジュアルとテキストとあるのですがビジュアルの方が簡易的にテキストを編集することができますので
ビジュアルで慣れていない方はこちらで編集をお願いします。
少し画面が小さいですけどこちらで普段通りのものを使用することができます。
このような形でテキストを入力してください。
このメール講座ではこのようにないないというベネヒットがありこのような解説を行っていますという内容になります。
こちら必ず保存を押してください。
続いて画像をこのようなダミー画像を挿入したいと思いますので
こちらを押していただいて
コラムの下の画像をこのようにトラッカーのロックで持ってきてください。
こちらで画像の挿入ができます。
こちらからファイルをアップロードからご自身のパソコンにある画像をアップロードしていただいて
アップロードしましたらこのようにライブラリーの中に追加されます。
21:00
こちらの中から画像を選択していただいて
メディアの挿入をクリックしてください。
これで画像の設定が完了しました。
続いてホームの設定になります。
ホームはhtmlの要素を使って作成していきます。
こちらにhtmlのコードをこのように埋め込んでいきます。
こちらのコードに関してはサイトの方でダウンロードできるようにしておきますので
そちらをダウンロードしてください。
こちらで同様に保存を押してください。
続いてこの目次とプロフィールの設定を行っていきたいと思います。
こちらも新しいセクションの追加でこのワンコラムのものを選択してください。
こちらも同様にコラムをこのように持ってきていただいて
こちらの幅を調整してください。
こちら67にしてほしいんですけど
なかなか合わない場合は66.9でも
0.1の微差ではそんなに見た目に大きな差はできなくて
違和感もないので66.9でも結構でございます。
こちら本来では67ですけど
上手い具合に調整ができないこともあるかと思いますので
この場合は66.9でも結構でございます。
では続いてこの
もう一度テキストエディターを持ってきていただいて
こちらのテキストにコードを貼り付けます。
こちらのコードもサイトの方でダウンロードをしてください。
このように目陣の項目が下がってしまってバランスが悪くなってしまう場合は
こちらに見出しがありますのでこの見出しをこのように
ブラック&グラフでこの目陣項目の上に持ってきてください。
24:04
テキストをこのように入力していただいて
こちらはテーマによってはちゃんとした表示になるかと思うんですけど
こちらでお使いのテーマは微調整が必要ですので微調整を行っていきたいと思います。
こちらでテキストの色をこちらのスタイルで
タイトルのテキスト色を変更することができます。
3333と入力していただいて
続いて行の高さでこのように幅を変えていきます。
この窓はちょっと寄りすぎていますので
こちらを中央に配置したいと思います。
こちらはテーマによってはきちんと表示されるかと思いますので
微調整する場合はこちらをご参考にしてください。
続いてこの目陣がいらなくなったので切ってしまいます。
あとは項目の編集なのですが
こちらは普段お使いのワードプレスと同じ要領でテキストを編集してください。
最後に保存をクリックしてください。
続いてなんですがこのプロフィールの項目を作成したいと思います。
こちらもテキストエディターから
テキストエディターをドラッグ&ドロップで持ってきてください。
編集画面に入っていただいてテキストを選択してください。
こちらもコードを差し上げますのでコピー&ペーストでお願いします。
こちらちょっと分かりづらいんですが
このように画像の編集ができますので
画像を変えることができますのでメディアを追加から
27:02
ファイルをアップロードからパソコンから画像をアップロードしていただいて
写真を選択していただき固定ページに挿入していただくと画像を変えることができます。
なのでこちらの画像は消してしまっても結構です。
続いてこちらテキストの編集になります。
こちらでお名前を変更してください。
あとはこちらでプロフィールを変更してください。
こちらサンプルとして差し上げますのでこちらをコピー&ペーストして編集してみてください。
こちらも同様に保存をしてください。
このままですとプロフィールの線がないのでボーダーの設定をしていきたいと思います。
もう一度このように編集画面に行っていただくと
コンテンツ、スタイル、詳細とあるので詳細をクリックしてください。
こちらからパディングということでパディングを設定します。
こちらを大体10ピクセルに設定してください。
続いてボーダー。
こちらをボーダータイプということで1本線に設定してください。
幅を1ピクセル。
色なんですがこちらをDDDDDに設定してください。
ボーダーの丸みを5ピクセルに設定してください。
こちらまでボーダーの設定が終わりましたら保存をクリックしてください。
最後にこちらのフォームの設定を行います。
こちらも同様に新しいセクションを追加で1カラムのものを選択していただいて
フォームですのでHTMLをこのようにドラッグ&ドットで持ってきてください。
こちらでコードを差し上げますのでコピーしていただいて保存を押してください。
30:11
フォームに関してはまた別動画で解説をいたします。
またこのフォームのデザインで少しCSSを設定する必要があるのですが
そちらも別動画で解説いたします。
またCSSのコードは同様に差し上げますのでそちらをコピーしていただいて
編集して設定していただく形になります。
では最後に保存を押した状態で一度クリックした状態で
この×印を押してください。
こちらで固定ページを実際にプレビュー画面で見ることができます。
このダッシュボードへこちらを押しますと
このようにダッシュボードに戻ることができます。
編集が終わりましたらこの公開ボタンをお忘れなく押してください。
今回の動画は以上になります。