【Elementor 講座 第9回】スライダー画像等の編集を解説【Word Press】

【Elementor 講座 第9回】
スライダー画像等の編集を解説
【Word Press】

この記事は、動画の音声を書き起こしたものです。

 

誰でも簡単に、ホームページが無料で作れちゃう、エレメンター講座の第9回です。

 

今回は引き続き、スライダーウィジェット等の編集をしていきましょう。

 

オリジナル・ホームページの編集動画になってから、一つのセクション、一つのコーナーを解説しているので、それぞれ動画が長くならないとうに、10分以内にいにしたいですね。

 

ご視聴されている方々の貴重なお時間を無駄にしないように、サクサク、出来れは5、6分で説明し終えるように頑張っていきます。

 

ということで、もう制作中のエレメンター編集ページを開いてあります。

 

こちらですね、こちらが制作中のホームページです。

 

今回は、プライスの下のこちらです。

 

こちらがスライダーになっています、ここのコーナーを編集していきます。

 

その前にここのプレビュー、目みたいのマークをクリックするとプレビュー、プレビューを見てみます。

 

プレビューを開いてみて、前回編集したこのプライス、ページ内リンクをクリックしてみますと、この文字のギリギリに飛ぶようになっちゃっている、これちょっとかっこ悪いので、ここを最初に直したいと思います。

 

さあこちらで、まずここのタイトルの部分ですね、見出しの高度な設定、ここのパディングを少し開けてあげます。

 

パディングの上を50、そうするとここ、ページ内リンクのメニューアンカーとタイトルのあいだに間が空きました。

 

それだとここの上も空いているので、50分、空けた分をセクションのここから引いてあげます。

 

セクションの編集から、ここもパディングで100が入っていますから、この上を50にしてあげます。

 

さあこれで一旦、もう一度プレビューを見てみます。

 

そしてこちらのプライスをクリック、そうするとこの様な感じですね。

 

これだと綺麗にページ内リンクの間が空いて、タイトルも見えるようになりました。

 

はい、それではこちらの、今日のテーマであるこちらのコーナーを編集していきます。

 

まずタイトルと説明文、そしてこちらの画像ですね、こちら画像スライダーになっていますけれども、こちらの貼り付けは編集でカットして、貼りつけた後にまたご覧いただきます。

 

さあこれでタイトルと説明文、そしてこちらの画像だけ貼り付けられました。

 

こちらのセクション全体の構造はどうなっているかというと、こちらプラスが無いもの、こちらはプラスがある大きな枠であるセクションですけれども、こちらプラスがないインナーセクションです。

 

インナーセクションが一つ、二つ、三つと入っています。

 

こちらは大きな枠のセクションの中に、セクションのカラムが一つ、ワンカラムなんですけれども、ワンカラムの中にインナーセクションという内部セクションを入れて、こちらインナーセクションをツーカラムの構造にしている。

 

このツーカラムのインナーセクションを、三つ縦に並べているという構造になっています。

 

そして今回画像をこちら入れました、そして次こちらを入れたいと思います。

 

こちらスライダーですね、スライダーこちらで選択されます。

 

これは使わないので一度消して、そしてギャラリーに追加をクリック。

 

事前に入れておいた画像を3枚いれます、チェックボタンが3つ付いているので、3つともギャラリーに追加されます。

 

こちらで順序を変えられます、クリックしてこんな感じですね、このように変えられます。

 

そして挿入、これでスライダーになってます。

 

スライダーレフト、こちらのドロップダウンから変えられます。

 

そしてここがトランジション所要時間、こちらは移りかわる時間です。

 

ここで設定できます、こんな感じでいいですかね。

 

そしてこちらの上の部分は、こちらのカラムで、背景の画像から設定されています。

 

そしてここのウィジェット、ここは何が入っているかというと、スペーサーが入っています。

 

スペーサーでここの高さを380で設定しています。

 

これを小さくしてやると、こんな感じで縮んでいきます。

 

こちらを380元に戻して、そしてこの一番下、こちらが動画の編集、動画のウィジェットが入っています。

 

 

動画を使われる方はこのままでいいんですけれども、今回は動画を使わずに、これを消して、こちらと同じスペーサーを貼りつけてあげます。

 

そしてカラムのこちらで、上と同じように背景画像を設定していきます。

 

画像を選択して挿入、こんな感じですね。

 

さあこれでタイトルと、タイトルはプラグインを入れた、フォントのプラグインでこちら明朝体が適用されているんですけれども、こちらの下のほう、こちらはGoogle フォントの書体がプラグインで設定されていないですね、こちらは個別に設定してあげます。

 

Noto Serif JP、そして大きさ、太さ、これも同じように設定していきます。

 

さあこれで説明文のテキストの設定を完了しました。

 

でこちらは2行目が空いているのでこちら、揃えが中央揃えになっているようです。

 

こちらを左揃えに、ほかのところも左揃えにしておきます。

 

そしてこのタイトルですね、これをもうちょっと字を大きく。

 

見出しを編集、スタイルから書体で、こちらがサイズです。

 

26くらいにしますか、スタイル、書体、スタイル、書体、どうでしょう。

 

こちらは金色、上のほうで使った金色がやや濃いので、ちょっと下のほうに移って、これは最初から設定されたこちらの金色ですけれども、このままちょっとした変化で、このままの色を使っていこうかなと思います。

 

そしてここに線が見えます、これは区切り線ですね。

 

こちら、必要であれば使ってもいいですし、今回は真ん中で揃えて、こんな感じですかね。

 

これをでは、貼りつけていきます。

 

そしていたないものは選択して消してあげてください。

 

さあどうでしょう、これで今回は完成となりました。

 

一度プレビューで見てみましょう。

 

こちらの下、これがですね、ここは余裕があるんですけれども、ここが狭いのが気になります。

 

こちらの下も同じですけれども、これを少し余裕を持たせようかなと思います。

 

こちらはセクション、セクションの高度な設定をみると、ここですね、パディングで上の空間を90、したがこちら100、ここの空間を100で設定しています。

 

これそれぞれ50づつ、上が140、下も50プラスすると150、これでプレビューをもう一度見てみます。

 

どうでしょう、これでちょっとゆったりした感じのページの演出になりました。

 

これで今回は、いいかなと思います。

 

それでは一度作業が終わったら下書きを保存、これはもう公開してあるので更新を押します。

 

皆さま、公開前の場合は下書きを保存を押してください。

 

さあこれで10分以内に収まったでしょうか、ちょっと越えちゃったかもしれないですけれども。

 

次回はこちらのセクションの下、こちらですね、アワーサービスとなっています、こちらのセクションの編集を行ってみます。

 

それでは今回は以上となります、有難うございました。

 

 

変わってゆく社会に、足りないものを思いついたら、まずは作ってみる。
Webサイト制作やランディングページ制作。動画制作、ドローン空撮などなど。未来に関することの全般がお仕事です。

「 IT×行政書士 」をキャッチフレーズに、地方自治体の地域活性化を ITの面からサポート応援していきます。
退職代行サービスや古物商許可申請の代行を、全国対応しています。

FLISCO jam Design
テキストのコピーはできません。