【エレメンター講座 第11回】
いよいよ最後のフッター編集です
【ワードプレス】
この記事は、動画の音声を書き起こしたものです。
初心者でも簡単に無料でホームページが作れちゃう、エレメンター講座の第11回目です。
今回も編集中のホームページの一番下の部分、フッター部分を編集していきます。
エレメンターの基本的な構造をおさらいしながら、新しいプラグインを入れて、こちら、めっちゃ使えるアドオンを入れて、そちらの解説もしていきます。
そちらワードプレスをベースに、こちらの動画を11回までご覧いただくと、オリジナルのホームページが、エレメンターというプラグインを使って編集できるようになります。
そちらの動画をご覧になっていない方のために、こちらですね、再生リスト、こちらのURLを概要欄に貼っておきますので、こちらにアクセスしていただいて、この「エレメンター講座」、こちらに全部の動画をまとめています。
そして「すべて再生」をクリックしていただくと、1からご覧いただけるようになっています。
さあ、それではエレメンターの編集画面に向かいます。
こちらが現在編集しているオリジナル・ホームページの、エレメンター編集画面になります。
そして今回は一番下、こちらは前回動きをつけました。
こちら一番下のフッター部分ですね。
ちょっとまだフッターっぽくないんですけれども、こちらの編集をして、フッターを完成していきます。
今回もこちらの画像やテキストは時短のため、サクサクいくため貼り付けてみます。
はい、それではこちらの画像とテキストを貼り付け終わりました。
それでは、こちらの画像を最後に貼りつけてみたいと思います。
こちらはウィジェットの画像で貼り付けてあるのではなくて、こちらスペーサーですね、ウィジェットはスペーサーが入っています。
これはカラムの背景で画像が入っているようです。
カラムのスタイル、こちらで画像が選択されています。
それでは入れたい画像を選択して、メディアを挿入。
これで、こちらのテキストと画像が入れ終わりました。
それでは、エレメンターの基本的な構造をおさらいしたいと思います。
こちらのセクション、セクションという大きな入れ物のなかに、こちらのカラムが2つ入っています。
カラムというのも小さな入れ物、カラムの中にこちらのウィジェット、こちらアイコンボックスですけれども、こちらのウィジェットが入る。
ウィジェットというのは、各種いろいろあります。
このような構造になっています、そしてこれは、この間の白い線、白い線が入っているような作りになっています。
これちょっとこちらで、実際のプレビュー見てみると、このように白い線が入っています。
これはどこで設定されているのか、ちょっと見てみます。
こちらのカラム、カラムの高度な設定、これを見るとマージン、パディング。
マージンの左部分が、3になっています。
マージンというのは、カラムという入れ物の枠、枠の外側を設定するのがマージンです。
カラムという入れ物の、内側を設定するのがパディングということになります。
こちらのマージンですね、左が3になっています。
こちらの3が、こちらの白い隙間、白い線をつくっているようです。
これをちょっと数字を上げていくと、こちらの隙間が開いていきますね。
こちらを3ピクセル開けていたんですけれども、ちょっと今回分かりやすく、全体を6ピクセルくらいで開けてみたいと思います。
それでこちらの画像が、全体が綺麗に映っていないので、カラムのスタイル、こちらの背景画像、全部デフォルトになっていますけれども、こちらのサイズのところ、サイズのメニューからカバーにしてやります。
そうすると、こちらの全体が、こちらの枠に入るようになります。
それではここの6ピクセルに合わせて、他のところも合わせていきたいと思います。
こちらのカラムの高度な設定、こちらは右が、こちらですね3ピクセル、これを6にします。
じゃあこの上の部分はどこで設定しているのか、ここのカラムを見てもマージンは空いていません。
こちらのカラムを見ても空いていません、ということは、こちらのセクションで設定されているのかもしれません。
こちらのセクションを見ると上が3になっています、セクションでこちらのマージンを3に設定することで、このカラムでマージンを3に設定しても、カラムの枠はここからここまでなので、こちらの上の3ピクセルしか設定できません。
こちらはまた別の設定になります。
ここを全部いっぺんに設定するために、セクションのマージンを3ピクセルに設定しているということですね。
それではこちらを6に設定します、これで全部の枠が設定されました。
もう一度、こんな感じですね。
さあこれで、こちらのフォントのほうを揃えていきます。
そしてテキストのフォントを設定する場合、こちらのスタイル、スタイルからタイトル、こちらタイトルはこれになっているので、説明のところの書体ですね。
明朝体にしてみます。
それでこちら、テキストエディターのスタイル、そして書体、こちらは、太さが500、大きさもうちょい大きいほうがいいですね。
さあこんな感じで、さあこちらのほうです。
会社概要、こちらのフォントを変えましょう。
書体、でこちらがアイコンリストになっています。
こちらのテキストの部分、テキストはこちらのフォントですね。
こちらの書体、太さが400くらいにしておきます。
はいこれで大体、こちらあれですね、カラムの上下がやや広いかなという感じがしたら、こちらのカラムから高度な設定、こちらのパディング、マージンというのはカラムの外側の広さを設定しますけれども、こちらのパディングは、パディングとウィジェットまでの間の隙間を設定しています。
こちらの上下が120になっています。
これがやや広すぎるかなという感じなので、どちらも100、どうでしょう、どちらも上下を100にしてみます。
こちらを見るとやはりカラム、高度な設定、こちらのも上下がに設定されています。
こちらを両方とも100、さあこれで、こんな感じですかね。
こちらがちょっと、中央揃えになっていないので、左に依っています。
こちらを中央揃えにしちゃいましょう。
そうすると幅が広がっても、こんな感じですね。
はい、それでこちらのセクションのここを、先ほどの6に設定しておきます。
そしてこちらの下を設定しているのが、こちらのパディングになっています。
さあこれで、6ピクセル開きました。
これで一番したの部分の、こちらの設定にはいります。
それではこちらの設定をする前に、ダッシュボードに戻って、一つプラグインを入れたいと思います。
それではプラグインの新規追加をクリックします。
そして「elementor」と入力すると、エレメンターのプラグインより先に、こちら「Essential Addons for Elementor」こちらが出てきます。
こちらのプラグインをインストールします。
こちらのプラグインは、エレメンターのウィジェットを無料でいくつも増やすプラグインです。
こちらをインストールして、有効化を押します。
さあこれで、エッセンシャルのプラグインが入りました。
一度こちらを更新して、再読み込みしてみます。
インストールしたプラグインが、再読み込みして、こちらのエレメンター編集画面に適用されます。
さあこちらがエレメンターのウィジェット画面ですけれども、こちらにエッセンシャルアドオンズ、先ほど入れたプラグインのエッセンシャルのウィジェットがかなり多く、こちらの途中からは有料版のものもありますけれども、こちらの鍵マークですね、鍵マークの付いていない、ここから上は無料で全て使えるウィジェットです、かなりあります。
これが全部、無料で使えます。
このエッセンシャルのウィジェットの中から「ファンシーテキスト」、これを使いたかったので、こちらのプラグインを使いました。
こちらを入れてみます。
いまデフォルトでこのようにタイピングになっていますけれども、色々なアニメーションのテキストがこちらで使えます。
この元から入っているこれ、こちらは消しちゃいましょう。
ではこちらの、ファンシーテキストの設定をしていきます。
まずこちらの、上の「This is the」、タイピングされない部分ですね。
タイピングされない部分が上、それでこちらがタイピングされてこちらのテキストが3つ入れ替わっていきます。
そして一番最後の部分が、こちらになります。
一番最後の部分、これで設定していきたいと思います。
はいそれではこちらで、テキストを入れられました。
You Tuber、そしてこちらがサイト名。
このCの丸マーク、コピーライトマーク、これでサイトの著作権を主張できます。
それではこちらの背景の色、これを変えてみたいと思います。
セクションのスタイル、こちらで設定されています。
これをちょっと黒っぽい感じで、こんな感じで。
そして先ほどのファンシーテキストのスタイル、こちらの色を白にします。
こちらが前の色、ここがタイピングされているところの色ですね。
ソリッドカラー、これを白に。
そしてタイピングのカーソルがあるんですけれども、こちらのカーソルを白にするのがタイピング、こちらですね。
これも白にしてやります、そうするとこの点滅しているカーソルも出てきます。
さあこれで、ややここの上下を狭くしたいなということで、セクションの高度な設定、こちらで設定されていますね、上下30、30。
これの「まとめてリンク」を解いてあげて、ここを半分くらい、15でもいいかもしれないです。
どうでしょう、これでちょっと、こんな感じです。
これでフッターっぽくなったでしょうか。
さあ、これでもう一度、プレビューを別画面で開いてみます。
さあ、上から見るとこんな感じですね。
プライス、こちらは動きをつけています。
さあ、そしてこちらが今日つくったフッター。
ちょっと文字が太いですかね。
これをちょっと調整してみます。
書体、太さが600になっています。
文字の大きさも、400の20。
これでもう一度、プレビューを見てみます。
さあ、この一番下の部分ですね、こんな感じでとりあえずいいでしょうか。
さあ、これで今回は終わりとなります。
次回はこちら、いまこれPC画面で作っていますけれども、スマホやタブレットに合わせてレスポンシブ加工をしたいと思います。
こちらのページのレスポンシブ加工を、一番上から下までしたいと思います。
それでこちらのページが完了となりますね。
さあ、これで今回、作業が終わったので更新を押しておきたいと思います。
さあこれで次回はこのページがレスポンシブも終わって、すべて完了となりますので、次回の動画をお楽しみください。
それでは、有難うございました。