このは屋 職人 2022.04.17

    WordPressプラグインElementorの使い方 – コードの知識が一切必要なし!素⼈でも思い通りのページを作れる方法

    ホームページビルダーといえば、⾃分でやりたい派の⽅には最適なソフトです。実はWordPress上でも、ホームページビルダーのような感覚でページを作成する事ができます。それを実現してくれるのが、WordPressプラグイン『Elementor』です。

    記事を読む 読了目安 4 分 / AI時代の自作と内製化
    WordPressプラグインElementorの使い方 – コードの知識が一切必要なし!素⼈でも思い通りのページを作れる方法
    AI × DIY × Small Business 読んで終わりではなく、自分の商売に戻す。

    記事の最後で、ネット集客を自分で整えるための無料テンプレートを受け取れます。

    Theme職人
    Updated2022年4月17日
    Next Step記事の末尾で無料テンプレートを受け取れます
    目次
    このは屋 | WordPressプラグインElementorの使い方 - コードの知識が一切必要なし!素⼈でも思い通りのページを作れる方法
    このは屋 | WordPressプラグインElementorの使い方 - コードの知識が一切必要なし!素⼈でも思い通りのページを作れる方法
    このは屋
    (生成AI×デジタルマーケティングスクール)
    スモールビジネス特化の学び舎。スモールビジネスオーナーに向けて、ネットから集客する方法、オンラインで商売する方法、労働集約型から知識集約型へ移行する方法、安定した継続的な収入源を確保する方法…etc。悔いの無い生涯を謳歌する為の、鼻歌まじりの商売と生涯を、ワンストップで、トータルにサポートしている。

    素⼈でも思い通りのページを作れるホームページビルダーとは?

    ホームページビルダーというソフトがあることをご存知ですか?

    ホームページビルダーとは?

    1. HTML
    2. CSS

    などのWebサイトを構成するプログラミング⾔語を熟知していなくてもホームページが作成できるソフトです。

    このソフトを使⽤することで、ドラッグ&ドロップで要素を配置し、Webページを作成することができます。

    家電量販店に⾏くと販売しており、⾼くても約3万円ほどです。

    このは屋 | WordPressプラグインElementorの使い方 - コードの知識が一切必要なし!素⼈でも思い通りのページを作れる方法

    約3万円でWebページを作成できてしまうと、Web制作会社に外注するよりも低価格で作成できてしまう事になりますね。

    ⼤変魅⼒的です。

    確かに凝ったデザインや微調整をするにはプログラミング⾔語の知識が必要になります。

    「⾃分でWebページを作成できるようになりたい!」と思い⽴ったとしても、プログラミング⾔語を習得するのには相当な時間がかかります。

    ですが、今⽇ではシンプルなWebページであれば専⾨的知識なしでもご⾃分で作成可能になりました。

    まさに⾃分でやりたい派の⽅には最適なソフトです。

    そんなホームページビルダーのような感覚でWordPress上でもページを作成する事ができます。

    それを実現してくれるのが、WordPressプラグイン『Elementor』です。

    WordPressプラグイン『Elementor』とは?

    Elementorプラグインとは、無料でホームページビルダー機能が使えるプラグインです。

    どのテーマを使⽤していても、固定ページ・投稿ページ問わずに編集が可能です。

    特徴は以下になります。

    1. ドラッグ&ドロップで要素を追加できる
    2. カラム幅も調整できるので⾃由なレイアウトができる
    3. レスポンシブ対応(スマホ対応)…etc

    これでなんで無料なのか不思議なくらい⾼性能なプラグインです。

    注意点として、以下をご確認ください。

    1. WordPress4.5バージョン以上
    2. PHP5.4バージョン以上

    これを満たしてないケースはほとんどないのでご安⼼いただきたいですが、万が⼀インストールできなかった場合は上記理由が考えられます。

    WordPressについては、放っておいたとしても⾃動更新されますが、PHPについてはご契約サーバーでバージョンをご確認ください。

    また、プラグインをうっかりオフにしてしまうと編集内容が消えてしまう恐れがあるので注意が必要です。

    『Elementor』の使い⽅

    インストール⽅法

    このは屋 | WordPressプラグインElementorの使い方 - コードの知識が一切必要なし!素⼈でも思い通りのページを作れる方法

    インストールはすごく簡単です。

    1. WordPress管理画⾯→プラグイン→新規追加
    2. 検索窓に「Elementor」と⼊⼒
    3. 検索結果から⼀番上のものをインストール
    4. インストール後は必ず同時に有効化
    5. サイドバーにElementorが表⽰されたら、インストール完了

    設定はデフォルトのままで⼤丈夫ですので、さっそく編集ができます。

    このは屋 | WordPressプラグインElementorの使い方 - コードの知識が一切必要なし!素⼈でも思い通りのページを作れる方法

    編集⽅法

    ページは編集ページ・固定ページどちらでも編集できます。

    今回は、固定ページでご説明いたします。

    固定ページ → 新規追加 → Elementorで編集

    をクリックしてください。

    すると、編集画⾯に移動します。

    「新しいセクションを追加」をクリックすると、カラム(列)を選択できます。

    ワンカラムから分割したカラムまで選択できますね。

    このは屋 | WordPressプラグインElementorの使い方 - コードの知識が一切必要なし!素⼈でも思い通りのページを作れる方法

    後から幅の変更も可能となっています。

    主な使い⽅は、左サイドバーから「テキスト・画像・⾒出し」といった要素をドラッグ&ドロップで追加する事するだけ。

    テキストは、いつものブログ作成をする投稿と同じような編集画⾯ですので、簡単にテキスト編集が可能です。

    カラムの調整も点線にカーソルを持っていくと「→」に変わりますので、左右に移動する と変更可能です。

    このは屋 | WordPressプラグインElementorの使い方 - コードの知識が一切必要なし!素⼈でも思い通りのページを作れる方法

    画像もこの通り簡単に配置できます。

    リンクを指定できるので、デザインしたボタン画像などを配置してもいいかもしれないですね。

    要素はこちらでは紹介しきれないぐらい豊富ですので、ご⾃⾝の⽬で確かめてください。

    ⽇本語化されていますので、迷うことなく編集ができるかと思います。

    最後に「保存」ボタンの押し忘れに注意です。

    Elementorプラグインの活⽤例

    これで、ある程度⾃由にページ作成ができますね。

    活⽤⽅法は

    1. トップページ作成
    2. ランディングページ作成
    3. オプトインページ作成

    など多岐に渡ります。

    サイト訪問者から⾒られるトップページを作成すると、サイトへの印象も変わります。

    設定⽅法は、固定ページでお好みのトップページを作成し、表⽰設定から作成したページを選択します。

    トップページの設定

    このは屋 | WordPressプラグインElementorの使い方 - コードの知識が一切必要なし!素⼈でも思い通りのページを作れる方法

    1. WordPressの管理画⾯(ダッシュボード)から設定をクリック
    2. 表⽰設定から「フロントページの表⽰」を「固定ページ」にチェック
    3. フロントページから作成した固定ページ名を選択

    シンプルなデザインページを⾃由なレイアウトでトップページを作成したい⽅にはオススメなプラグインとなっています。

    画像を使⽤することでデザインの幅が広がるので、WordPressっぽくないページを作成したい⽅はぜひ導⼊してみてください。

    Free Web App 読むだけで終わらず、少し触ってみる。

    無料ウェブアプリで、AIと一緒に考え、整理し、作る感覚を試せます。現在地や次に取り組むことを確認してみてください。

    無料ウェブアプリを見る
    Free Template Kit 読んだ内容を、実際の商売に落とし込む。

    ランディングページ、ブログ、広告、メール。AIと一緒に作り、直し、育てるための型を、まずは手元に置いてください。

    無料テンプレート全13種を受け取る
    GET THE KIT
    まずは、型を手に入れる。

    このは屋は、スモールビジネスが外注業者に依存せず、AIと一緒に自分の商売を作れるようになるための学び舎です。記事を読んで終わりにせず、手を動かすための型を受け取ってください。

    ランディングページ・ブログ・広告・メールまで対応 使い方の解説動画付き AIと一緒に磨くための実践テンプレート
    無料テンプレート全13種の内容イメージ

    無料テンプレート全13種を受け取る

    メールアドレスを入力して送信してください。すぐに受け取り方法をご案内します。

    送信後、無料テンプレート全13種の受け取り方法をメールでお送りします。
    ※「@icloud.com、@me.com、@mac.com等のアドレス」および携帯アドレスは、メールが届かない場合があります。できればGmailアドレス、またはパソコンのメールアドレスをご登録ください。入力間違いを防ぐため、コピー&ペーストでの入力をおすすめします。同業者の方のお申し込みはご遠慮ください。
    無料テンプレートを受け取る
    Next Action 読んだら、型で試す。
    無料テンプレートを受け取る
    このは屋

    スモールビジネスが、AIとテンプレートを味方に、自分の商売を自分で育てるための学び舎です。

    About

    このは屋とは 進め方ガイド 会社概要

    Learn

    無料テンプレート セミナー集 無料ウェブアプリ一覧

    Policy

    利用規約 個人情報保護方針 特商法表記

    Contact

    お問合せ よくある質問 トップページ
    © このは屋合同会社
    利用規約 個人情報保護方針 特商法表記 お問合せ