①WordPress 管理者ページにアクセスします。
管理者ページのURLは、ロリポップ！の以下を参照
サイト作成ツール > WordPress簡単インストール > WordPressインストール履歴
②外観 > テーマ を開きます。
③「テーマを追加」をクリックします。
④「Hello Elementor」 を検索、インストールします。
⑤Hello Elementor の子テーマを設定します。
テーマは度々更新がかかり、それにより細かな設定変更が上書きされて消えてしまう場合があります。
そうならないように、子テーマを設定して、そちらに細かな設定を行い、親テーマ(本体)に更新がかかっても消されないようにします。
⑥Hello Elementor の子テーマは、GitHubからダウンロードできます。
⑦「Code」、「Download ZIP」とクリックし、ZIPファイルをダウンロードします。
⑧WordPressに戻り、外観 > テーマ を開きます。
⑨「テーマを追加」をクリックします。
⑩「テーマのアップロード」、「ファイルを選択」とクリックして、先ほどダウンロードしたZIPファイルをアップロードします。
⑪Hello Elementor の子テーマを「有効化」します。
⑫使わないテーマは削除しましょう。各テーマは選択後に「削除」をクリックして削除できます。
⑬ 以下のようになればテーマの設定は完了です。
WordPressサイト構築に必要なプラグインをインストールして、機能を追加していきます。
①管理画面で「プラグイン」を開きます。
②「プラグインを追加」をクリックします。
③まずは「Elementor」を検索し、「今すぐインストール」します。
Elementorは、デザイン性の高いWordPressサイトをコードを記載することなく、効率的に作成・編集できるツールです。ランディングページ作成では無償版だけで作成できます。
④インストールが完了したら「有効化」をクリックします。
⑤以下のプラグインも追加予定です。後ほどインストールします。
⑥元々インストールされているプラグインについて
固定ページを新規作成します。
①固定ページ＞固定ページ一覧 を開き、「固定ページを追加」をクリックします。
②「タイトルを追加」にタイトル（例：テスト）を入力後、「下書き保存」をクリックします。
③「Elementorで編集」をクリックします。
④ Elementorの編集画面が開けたら、歯車マークをクリックします。
⑤ 固定ページレイアウト：デフォルトを「Elementor Canvas」に変更します。
⑥これにより、Elementor で編集できるまっさらな画面が表示されます。
⑦右上の「公開」をクリックするとページが保存され、「固定ページを表示」で確認できます。
Elementorでのページ作成について、各ボタンを説明します。
(1)「＋」ボタンは、自分で一からページを作成するときに使用します。クリックすると、Flex Box か Grid を選択する画面になります。詳しくは後ほど説明します。
(2)クリックすると、以下のようなページが開きます。
※サンプルテンプレートは無償で使えるものと有償版があります。上手く活用すれば時短にもなりますが、このサイトでは使用しません。「テンプレート」については、後ほど説明します。
(3)AIでのサイト構築が行えます(ベータ版)。ここでは使用しません。
(4)「Templately（追加プラグイン）」 によるサンプルテンプレート集です。無償版と有償版があります。ここでは使用しません。
① (1)の「＋」をクリックすると、以下のような画面になります。どちらもページ内に分割した箱(枠)を設置します。
②試しに「Grid」を選択すると、等分割された枠が表示されます。
③６分割の枠をクリックしてみます。
コンテナ内に当分割された枠がいっぱいに配置されました。コンテナの大きさは変更可能です。後からコンテナ内の枠の数を増減させることもできます。
④コンテナ上部中央のタブの「X」をクリックしてGridで作成したコンテナを消去します。ちなみに各マークの機能は以下の通りです。
⑤ 今度は「Flex Box」 を選択してみます。以下のような枠の構成が表示されます。
⑥左側が小さい2枠の構成をクリックしてみます。
⑦以下のような Flex Box のコンテナができました。
⑧小さなコンテナの左上をクリックすると、コンテナを編集できます。右側のメニューで「％」を選択し、ページ内の横幅の割合を変更することができます。ここでは、35％にしておいてください。
⑨コンテナ内の「＋」ボタンをクリックすると、ウィジェットが表示されます。ドラッグ＆ドロップして追加します。
⑩画像をドラッグ&ドロップしてみます。
⑪Choose Image の画像部分をクリックします。
⑫画像の選択画面になるので、ここからクリックして画像を挿入します。
画像は事前に、メディア > ライブラリ からアップロードしておきます。アップロードしていない画像は、「ファイルをアップロード」タブから進み、「ファイルを選択」をクリック、ファイルを選択してアップロード後、「選択」して挿入できます。
⑬画像が挿入されました。
⑭画像の下に見出しを挿入してみます。
⑮挿入した「見出し」を右の鉛筆マークをクリックして編集します。以下から調整できます。
⑯続いて右側のコンテナも編集していきます。右側のコンテナの左上の「コンテナの編集」をクリックします。幅は全体で100％になるよう、65％にします。
⑰右側のコンテナの「＋」をクリックします。追加できるウィジェットが表示されますので、テキストエディターをドラッグ＆ドロップします。
⑱テキストエディターの内容はサンプル文が表示されますので、左のサードバー内のコンテンツで表示される枠内で内容を書き換えます。
⑲フォントのタイプやサイズ、行の高さや文字間隔などは、スタイル > Text Editor > Typography から調整します。
⑳「テキストエディター」の内容のかたまりとしての配置については、以下で調整できます。
