WordPressプラグイン「Elementor」の使い方〜iPhoneのサイト模写を例に解説〜

wordpress-elementor-apple-top.001 WEB制作

WEBデザインに興味があるけれど、htmlやCSSはあまり分からない・・・

画像データをサイトに反映したいけど、やり方が分からない・・・

このように悩んでいませんか?

WordPressのプラグイン「Elementor」を使えば、面倒なコーディングをせずに、自由にサイトをカスタマイズすることができます。

例えばiPhoneのサイト(下画像)を作ることができます。

iPhone SEのWEBサイト

実際に使われているような本格的なサイトもElementorを使えば作ることができちゃいます!

今回は、 Elementorの使い方を実際のサイトを模写しながら解説していきたいと思います。

例として、上図のiPhone SEのサイト(画像セクション部分)を作っていきます。

↓元サイトはこちら

iPhone
iPhone 12 Pro、iPhone 12 Pro Max、iPhone 12、iPhone 12 mini、iPhone SE。世界で最もパワフルなパーソナルデバイス、iPhoneの魅力のすべてを紹介します。
スポンサーリンク

テーマ・プラグインのインストール

まずは、Wordpressでテーマとプラグインをインストールしましょう。

テーマは「Sydney」が使いやすいです。

なぜかというと、ページの全幅表示が簡単にできるからです。

インストール方法は過去記事にまとめています。

Wordpressテーマ「Sydney」を導入する方法〜デモサイトのインポートまで〜
Wordpressテーマの1つである「Sydney」は、手軽におしゃれなサイトを作成できることから、企業や個人事業主のサイト制作によく使用されています。デモサイト(公式)はこちらしかしこのテーマは海外製のため、初めて使...

続いて、「Elementor」をインストールしていきます。

ダッシュボードから、プラグイン→新規追加ページに移動し、検索欄に「elementor」と入力すると出てくるので、インストールしておきましょう。

wordpress-gk-portfolio-customize3.001
elementorのインストール

続いて固定ページを作成し、テンプレートはFrontpageにします。

wordpress-elementor-apple.002
固定ページの編集

これで準備は完了です。

要素の配置

それでは早速Elementorでサイトを作成していきましょう。

まず、ページの一番上にセクション追加ボタン(赤色の+ボタン)があるので、それをクリックしてカラム構造を決定します。

wordpress-elementor-apple.003
セクションの追加

今回は、画像とテキストの2カラムを選択します。

wordpress-elementor-apple.004
カラム構造の選択

ここまでできたら、左側のメニューから要素をドラッグ&ドロップします。

wordpress-elementor-apple.005
要素の配置

画像に関しては、元のサイトをスクショして貼り付けます。

↓元サイト

iPhone
iPhone 12 Pro、iPhone 12 Pro Max、iPhone 12、iPhone 12 mini、iPhone SE。世界で最もパワフルなパーソナルデバイス、iPhoneの魅力のすべてを紹介します。

画像を貼り付けたら、下の画像のような感じになります。

wordpress-elementor-apple.006
画像の配置

スタイルの調整

要素が揃ったので、続いて各要素のスタイルを調整していきましょう。

各要素別にスタイルの設定の仕方を見ていきます。

背景

まず背景ですが、元サイトの背景色に合わせるようにしましょう。

背景色は、見たい要素の上で右クリック→検証で確認することができます。

wordpress-elementor-apple.007
背景色の確認1

検証をクリックすると、サイトのコードが出てきます。

wordpress-elementor-apple.008
背景色の確認2

styleタブのbackgroundに表示されている、「#」から始まるコードが色コードです(今回の場合は#131313)。

色コードを確認できたら、セクション上の選択ボタンをクリックし、左側のメニューボタンでスタイル→背景→普通→クラシック→色の項目で、先ほど確認した色コードを入力します。

wordpress-elementor-apple.009
背景色のカスタマイズ

背景が図と同じ色になれば編集成功です。

テキスト

文章については任意で入力します。

入力したら、左側のメニューで配置、文字色、書体、サイズなどをそれぞれ変更していきます。

wordpress-elementor-apple.010
テキストのカスタマイズ

最後に詳細項目でマージンやパディングなど、配置の微調整を行って終了です。

wordpress-elementor-apple.011
テキストのカスタマイズ2

ボタン

ボタンに関しては多少のコツが必要です。

角が丸いボタンは、ボーダー丸みを調整して作るすることができます。

wordpress-elementor-apple.012
ボタンのカスタマイズ

背景や文字色についても変更しておきましょう。

形がないボタンに関しては、ボタンの背景色をセクションの背景色と合わせることにより作ることができます。

wordpress-elementor-apple.014
ボタンのカスタマイズ2

また、ボタン横についているアイコンは、ボタンのコンテンツ項目から選択し、つけることができます。

wordpress-elementor-apple.013
ボタンのカスタマイズ3

ここまでできたら、スタイルの調整は終了です。

まとめ

元サイトと制作したサイトの比較

完成形を下の図に示しておきます。

左側が元サイト、右側が作成したサイトです。

ちなみに、今回紹介した方法と同様の操作で別のセクションも作りました。

元サイトとの比較

Elementorを使えば、お手軽に本格的なサイトを作れます。

しかもコーディングは一切無しです!

あなたもElementorを使いこなして、WEB制作・デザインを効率よく進めていきましょう!

お知らせ

当ブログでは、ホームページ制作サービスを行っております。

ドメイン取得からサイト制作後の管理まで全て対応可能です。

お店やポートフォリオサイトの立ち上げでお困りの方は、ぜひご相談ください。

部分的なカスタマイズなど、些細なご相談だけでも大丈夫です。

当ブログ、専用サイトからでもご連絡いただけます。

最後まで読んでいただきありがとうございました。

コメント

タイトルとURLをコピーしました