【エレメンター講座 第８回】
プライスのウィジェットを編集
【ワードプレス】
この記事は、動画の音声を書き起こしたものです。
初心者でも簡単に、無料でホームページが作れちゃう、エレメンター講座の第８回です。
今回もオリジナルホームページの編集をやっていきます。
そしてダッシュボードから固定ページ、そして現在制作中のページを別タブで開きます。
前回やった写真画像のようなセクションのその下、プライスのコーナーを編集していきます。
今回はこちらを編集した後、概要欄にページのURLを貼っておきますので、そちらで制作中のこのページをご覧になってください。
それではこちらのプライスのコーナー、こちらを編集していきます。
まずこちらの背景画像、背景画像をこちらですね、セクション編集、スタイル、ここで設定されています。
画像を選択、今回はハウスメーカーのホームページということなので、用意しておいたこちらの画像を選択して挿入します。
さあ、挿入されました。
この画像はページを上下にスクロールしても固定されています。
これはどこで設定しているかというと、セクション編集、スタイル、画像の下、添付というとこ、こちらが「固定」になっています。
こちらを選択の中から「スクロール」にすると、全体のページと同じようにスクロールします。
ここを「固定」にすると、こちらですね、ガラス越しに画像を見ているかのような、ホームページによくあるんじゃないかと思うんですけれども、これは一つこういうセクションを入れておくと、ページの変化になります。
そしてカバー、そしてタイトル、タイトルの上にこれちょっと一つウィジェットがありますけれでも、これはメニューアンカーです。
一番初めに作ったここのメニューですね、ここの「PRICE」をクリックすると、ここに飛ぶようにメニューアンカー、ここに飛ぶようにページリンクが作ってあります。
これは前の前の動画で作りました。
そちら見てない方は、ご覧になってください。
そしてタイトルの編集。
事前に用意しておいたタイトルを貼りつけました。
これ見づらいので、文字を白にしようと思います。
見出しを編集の真ん中のスタイル、文字色を白に。
これでもやや後ろの画像が明るいので見づらいなというところで、こちらの後ろの画像をもう一度、編集に戻ります。
セクションを編集の、背景のその下、背景オーバーレイ、こちらで黒っぽい色を選択してやると、このようにスモークを貼ったようになります。
こちらを、せっかく画像をちょっと変化をつけているところなので、画像が見えるように、そして文字が見える程度に設定してください。
こんな感じですかね。
そしてじゃあ、こちらの下のほう設定していきます。
こちらがプライスです。
これも事前に用意しておいたものを貼りつけていきます。
カラーは一旦、黒で。
そして文字を、ちょうどいいくらいに合わせておきます。
そしてその下ですね、こちらの３つのウィジェット、これは３つ共に画像ボックスというウィジェットです。
画像とタイトル、そして説明文を一緒に設定できるウィジェットがここに３つ並んでいます。
今回せっかく入っているので、これを使ってみます。
事前に用意しておいたタイトルを貼り付けます。
そしてこちらが画像、タイトルと説明文はこちらで設定します。
カラーは白で良くて、こちらの大きさですね、そして説明文、これは「お子さま１人～３人と ご夫婦の子育て家族」これ続きの文なので同じ書体にしてみます。
Noto Serif JP、太さも揃えます。
そしてここちょっと２行になっちゃたので、これパディングを設定していますね。
それなのでこちらの空間がかなり空いています。
ここをちょっと左右を減らして、５ポイントづつ減らして、ここを２行に納めました。
それではこちらの、字を設定したウィジェットをコピーして、貼りつけていきます。
CtrlキーのCでコピー、CtrlキーのVで貼り付けです。
そしてこちらはデリートキーで消していきます、右クリックの削除でも消せます。
そしてこの白のタイトルの上に、幅が空いています。
こちらは白そろっているけど、こちらが空いちゃってます、これはこちらが短くなった分、こちらが中央揃えになっているので空いたかなと思います。
カラムの編集を見ます、カラムの編集、垂直方向に整列、これを「上」にしておきます、これでこちら上に揃いました。
これで横の列のものよりも短くなっても、上揃えにしたので、これで揃いました。
そして後はこちらの真ん中ですね、こちらに区切り線を入れようかと思います。
こちら、まず見やすいように色を白にしてみます。
そしてこちらが幅です、太さです。
そしてこちらが目一杯、100になっているので、これで調整します。
真ん中揃えにしてあげて、中揃えで、ほど良い幅で、これでコピーして貼り付けてあげます。
こんな感じですね、それでは下のほうのテキストも貼り付けていきます。
これは事前に揃えておいたやつです。
揃えておいたものを、こちらに貼りつけています。
こんな感じですかね、これでちょっとプレビューで見てみます。
これがこの上がやや空きすぎかなというのもありますけれども、これをちょっと調整してみます。
ここの画像ボックス、高度な設定のパディング、上に30ピクセルあけてます。
この一番上はいいんですけれども、この二段目、三段目が30だとやや広すぎる感じなので、ここを20。
こちらも高度な設定、パディングの上を20。
これで、大体いいですかね。
これで左側は完成したかなと思うので、こちらを貼りつけていきます。
こちらのテキストの大きさやフォントを揃えたので、時短でカラムをコピーして、こちらに貼りつけていきます。
ただちょっと注意必要なのが、こちら右側ちょっと空いています。
カラムにポインター合わせてみると、右側やや間が空いています。
カラムの編集、高度な設定をみると、ここですね、マージン、右に20空けていますね。
こちらは左右にひらいています、真ん中は左右にひらいています。
10、10ですね、10、10に設定されています。
こちらはやはり逆で、左に20って感じですかね、高度な設定、左に20あいています。
こちらのカラムをコピーしてやっても、そこの部分だけ修正してやります。
さあこれで貼り付けて、先ほどの真ん中は、こちら左右が10づつになっていました。
こちらの一番右のものは、ここがセロで左に20。
これで最初の設定と同じになります。
それではこちらに、テキストのほうを貼りつけていきます。
事前に作っておいたテキストを貼りつけて、完成していきます。
これは事前に用意しておいたものです。
そして右の、こちらです、こちらも貼りつけていきます。
さあこれで貼り付けられました、ここだけちょっと改行されちゃっているので、こちらの画像ボックスの編集から高度な設定、こちらですね、こちらのパディングの左右。
ここちょっと、５ポイントでも減らないので、10ポイントづつ減らしてやって、これで完了です。
そしてこれだと３つとも変化が無くてつまらないですね。
例えばここらへんの、この白、これが真っ白でちょっとのっぺりしている感じ、これをこちらの背景、ここで設定されていますかね。
これをこちらが色相ですけれども、こちらで色を決めます、この下の黒の部分。
ここは透過です、こちらは不透明度100％一番右、一番左にもってくると透明度100％、ここで調整してやります。
少し不透明度を下げると、ちょっとソフトな感じになります。
こんな感じで、こちらの背景、こちらも左と同じ、例えば色を変えてやる、或いはこちらの後ろですね。
こちらの後ろの透明になっているグレーの部分、これはカラム、カラムで設定されているかなと思います。
カラムのこちらですね、この色をもうちょっと、これでこの３つの濃淡を変えてやっても、シンプルな変化はつけられます。
これはもう好みで、各自で作られるホームページの色やお好みに合わせてですね、こちらを変えて少しづつの変化をつけてください。
それでは今回はこれで以上となります。
終わった場合には、下書きの保存。
今回はこれで公開しておきます。
さあこれで公開しましたので、こちらの製作途中ですけれども、こちらを概要欄にURLを貼っておきます。
そちらから製作途中のページをご覧になってください。
それでは次回の動画ではこちらの下のほうですね、こちらスライダーになっています。
こちらの設定をしていきます。
それでは本日は以上となります。
どうも、有難うございました。
