WordPressのテーマビルダープラグイン「Elementor」のファンブログ

【連載】Elementorでホームページを作ろう!#1

Share on facebook
Share on twitter
Share on pocket
Share on pinterest
series_thumbnail

【連載】Elementorで ホームページ を作ろう!とは?

このシリーズでは、ゼロからホームページ完成までの基本の流れを紹介していく連載企画です!順番に記事をご覧頂き、作業して頂くだけホームページが出来てしまう!(・・・を目標に)皆さんと一緒に実際に ホームページ を作って行きたいと思います。途中寄り道もあるかもしれませんが、気長にお付き合い頂けると幸いです。

1回目のテーマは「ヘッダーを作る」

ホームページなどを作るとき、人によってどこから作り始めるかは色々だと思います。今回の企画テーマは「ホームページを作る」ですから、上から順に作って行きたいと思います。という訳で、今回はヘッダーの作り方を一緒に見て行きましょう!

※この記事を最初に見た方は下記の0回目の記事も是非ご覧下さい。

テーマを「Twenty Seventeen」に設定しよう!

Elementorの公式サイトでも下記テーマを推奨しております。Sydney/GeneratePress/Hestia/Astra/OceanWP/Zakra/Phlox/Tesseract/Sonaar/Neve/Ashe/そしてTwenty Sixteen今回はWordPressにデフォルトで入っている「Twenty Sixteen」を使ってみます。

teema_screen
1)テーマの変更は、WordPress管理画面の右にある「外観」を選択します。上の様なテーマを選択出来る画面が表示されます。

teema_select
2)「Twenty Sixteen」を見つけ「有効化」をクリック

teema_select2
3)有効になれば成功です。

固定ページを作って編集準備!

1)固定ページ>新規追加
elemento

2)タイトルをトップページにし、「Elementorで編集」をクリック
koteipage_elementor
これが、Elementorの編集画面です。
elementor_monitor

3)画面右したのギアアイコンをクリック
elementor_menu

4)ページレイアウトで「Elementorキャンバス」を選択
elementor_layout

すると・・・

elementor_monitor2

これで準備は完了です!

レッツ!!エレメンター(セクションの追加)

1)セクションを追加しよう!画面中央の+のアイコンをクリック

section_Insert

2)構造を選択します。(後で変更可能なので、とりあえず1列を選択)エクセルで言う列の追加
section_Insert2

3)右のライブ画面に青枠が出現!これを「セクション」と呼びます。
エクセルで言う行です。
section_Insert3
section_Insert4
(補足)分かりづらいのですが、グレーのアイコン枠が「カラム」と呼びます。

 

レッツ!!エレメンター(サイトタイトルやアイコンの追加)

1)サイトタイトルを「文字」にするか、「ロゴ(画像)」にするかは好みです。入れたい方を掴んで先程のセクション(青枠)へ置きます!<見出しの場合>
elemento

text_Insert
あとは、サイトタイトルを入力して出来上がりです。
(今回は画像の場合で進めたいと思います)<ロゴ(画像)の場合>

pict_Insert
いきなり画面に大きな画像が出ても慌てないでください。サイズは自由に変更できます!それでは早速画像を入れてみましょう!

2)右の編集画面の「Choose Your Image」をクリック
pict_Insert2

3)別画面が表示されます。右上のタブ「ファイルをアップロード」をクリック
imageInsert

4)「ファイルを選択」をクリックし、使いたい画像を選択。
elemento

5)アップロードされた画像を選択して、「メディアの挿入」をクリック
imageInsert3

6)画像が入りました!
pictureInsert3