【Elementorを使ったWordPressサイト制作⑦】セクションの作り方その3
記事コラム
こんにちは、webデザイナーのLeycoです。
「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。
前回に引き続き、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。
今回は、Elementorでセクションを完成させます。
webサイトを自作したいという方は、ぜひご覧ください。
（なお、今回の内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。
まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）
今回、作っているwebページのデザインはこちらです。
はじめに：ボタンの作り方をマスターしましょう
今回は「セクション①」のボタンを作っていきます。
ボタンもElementorなら簡単に作ることができます。
【ボタンの作り方①】ボタンを編集画面に追加します
まずは、左側のウィジェットメニューから「ボタン」を選びます。
（もしウィジェットメニューが見えない方は、「画像を編集」などと書かれている部分の右脇の９つの点マークをクリックしてください）
「ボタン」を追加する時には、コンテナの「＋」マークに向けてドラッグしてます。
前に作った画像とテキスト部分のコンテナに入らないようにするためです。
ボタンが編集画面に追加されました。
この画面のまま、ボタンの基本設定をしていきます。
設定項目はこちらです。
・「タイプ」：デフォルトのままで大丈夫です。他を選択すると、ベースカラーが変わります。
・「テキスト」：ボタンの中に入るテキストを入力します。
・「リンク」：リンク先を「https://~」から入力。入力ミスを防ぐため、コピー＆ペーストするのがベストです。
・「配置」：今回は中央揃えにしました。
また、デザインではアイコンを入れていなかったのですが、入れることも多いので、ここでアイコンの入れ方もご紹介しておきます。
・「アイコン」：一番右を選択するとアイコンギャラリーが表示され、ボタンに合ったアイコンを選ぶことが可能です。
右下の「挿入」をクリックすると、テキストの前にアイコンが追加されます。
今回は、アイコンをテキストの後ろに置きたいので、
・「アイコンの位置」：後
とします。
また、テキストとアイコンの間の余白を、「アイコン間隔」で調整しておきましょう。
【ボタンの作り方②】ボタンのデザインを編集します
次に、「ボタンの編集」の真下にある「スタイル」を選択して、ボタンのデザインを整えていきます。
設定項目は次のとおりです。
・「タイポグラフィ」：Noto sans JP Bold 18px
・「文字色」：今回はデフォルトの白のままです。
・「色」：#01406E
・「枠線の丸み」：すべて41px
・「パディング」：上下10px、右54px、左72px
(上下左右で数値が違うので、右側のチェーンマークをクリックしてはずします。)
また、これでセクションの最後になるので、下に余白を作っておきます。
「スタイル」の隣にある「高度な設定」を選びます。
「マージン」のチェーンマークをはずして、下だけ50pxにすると余白ができました。
【ボタンの作り方③】応用編：ホバーでのデザイン
これでボタンは完成しているのですが、最後に少しカスタマイズしておこうと思います。
webページでは、見る人に「これはボタン」ということをわかってもらうことが必要です。
そのため、マウスをホバー（上に乗せる）したり、スマホであればタップしたりした時に、ボタンの見た目が変わるようになっています。
ホバーのデザインの種類はさまざまありますが、今回は一番単純な「透明度を変える」パターンをご紹介します。
「高度な設定」から「スタイル」に戻って、「Text shadow」の下にある「マウスオーバー」を選択してください。
「色」の画面を開いて、一旦「#01406E」と入力します。
次に、透明度を一番下のスライダーで調節します。
一番右は透明度なし、左は透明度100%です。
マウスで動かしながら、右側の編集画面でお好きな色合いまで変えていきます。
これでホバー時にボタンが少し透明になる動きをつけることができました。
まとめ：これでセクションが完成しました！
それでは、最後にプレビューで確認してみましょう。
（「更新」の左隣の「目」マークです）
ホバーした時のボタンの変化も確認しておきましょう。
少しボタン色が薄くなりました。
これで「セクション①」は完成です。
ここまでご覧いただきありがとうございます。
「セクション②」も「セクション①」と同様に作ることができますので、トライしてみてください。
次は「セクション③」の作り方をご紹介していきます。
次回もどうぞよろしくお願いいたします。
