【エレメンター講座 第10回】
重要!コンテンツを動かします解説
【ワードプレス】
この記事は、動画の音声を書き起こしたものです。
初心者でも簡単に、無料でホームページが作れちゃう、ワードプレスをベースとしたエレメンター講座の第10回目です。
今回もオリジナル・ホームページの各ウィジェットの解説をしていきます。
いよいよページの一番最後のほうです。
それでは編集ページを開いていきます。
こちらが制作中の、エレメンター編集画面になります。
それで今回はこちらですね、OUR SERVICES の部分、こちらタイトルと画像、そしてタイトルと説明文。
今回もサクサクいくために、こちら用意したタイトルと説明文の貼り付けはカットしていきましょう。
さあこれでタイトルと説明文、画像の二つまで貼り付けられました。
そして最後の画像を入れたいと思います。
こちら、画像ウィジェット、画像編集、そしてコンテンツ、ここのメディアライブラリィから適切な写真を選択して、メディアを挿入。こちらですね。
そしてこの画像が、これだけちょっと幅が長くなっています。
この画像だけ縦横比がこちら高いようなんですけれども、これを調整したいと思います。
画像の編集、真ん中のスタイルから「高さ」、両端はほぼ一緒のような感じなので、こんな感じですかね。
高さが228、これで一応この数値を両方の画像にも入れておきます。
画像編集からスタイル、これで画像の高さが合いました。
そしてこちらのタイトル、これはコピペしたものですけれども、こちらのタイトル、大きさ、太さがかなり900と太くなっているので。
そしてこちらのほうのタイトル、スタイルで、大きさ、28で合わせます。
そして説明文ですね、これが書体がNoto Sans JP 、Googleのフォントを使用します、ゴシック体です。
太さが500、16くらいですね、大きさ、サイズ、そしてこれが真ん中にきてますから中央揃えになっています、これを左揃え。
他の説明文も書体、16で、フォント、Noto Sans JP 、太さが500、エディター編集、スタイル、書体、まずフォントを選んでやって、Noto Sans JP 、16の太さが500、さあこれで揃いました。
こんな感じですね。そして、ここの区切り線。こちらまだ左揃えにしてなかったですね。こちら左揃え。これで揃いました。
そして次この区切り線です。ちょうどこの上のページもここがゴールド、マウスオーバーするとゴールド、金をちょっとアクセントのカラーに使っているので、ここと同じ金の色、これをコピペしてやります、これですね、これをコピーしてやります。
そして下の方の区切り線、区切り線のカラーに貼り付けてください。
うーん、これだとちょっと暗いですね。この上の、これくらいの明るさのほうがいい。
これだと明るすぎる、この元のほうがいいですね、元のにもどしました。
太さがちょっと太いので、まず幅を、これが1.5くらいかな、2くらいですかね。
こんな感じで貼り付けます。そしていらない方の区切り線を削除。さあ、これで整いました。
今回これだけだと覚えていただくことがちょっと少ないので、今回コンテンツを動かしてみたいと思います。これはとても重要です。
こちらタイトル、見出しの編集から高度な設定、そしてモーション効果をクリックしてください。
こちら、開始アニメーション、通常は最初なしになっていますけれども、こちら一番上、フェードイン、こちらのタイトルを見ていてください。いきます、クリックします。
こんな感じですね。例えばフェードインUP、下から立ち上がってきます。
フェードインLEFT、フェードインRIGHT、これ以外にも様々なアニメーションがあります。
これでコンテンツに動きをつけることができます。通常タイトルでシンプルに動かすとすれば、フェードインか、フェードインUP、こちらですね。
それでこれはスクロールしていくと、こちらが表示されたときにそくアニメーションが開始されるので、ちょっと余裕を持たせたいときには例えば、こちらのアニメーションの継続時間を「ゆっくり」、通常とゆっくりというのがあります。
そしてその一番下、アニメーション遅延、ここでディレイをかけられます。
300、500、1000といくらでも数値が変えられます。これによって、スクロールして表示されて、こちで設定した数値が経過してからアニメーションが発生するということになります。
そしてこちらのほう、もう一個、こちらも画像、タイトル、それぞれアニメーションをつけられるんですけれども、こちらの全体、丸ごとアニメーションを動かしたいというときは、こちらのカラム、カラム自体にもアニメーションをかけられます。
カラムの編集から高度な設定、モーション効果、同じようにこちらアニメーションがあります。
例えばフェードインRIGHT、こちらも、ゆっくり。こちらも真ん中、高度な設定、そしてモーション効果、こちらもフェードインRIGHT、そしてゆっくりにして、ここをちょっと時間差をつけます。
こちらの左は時間差をつけていないので、ここを500、そして一番右のカラム、高度な設定からモーション効果、ここのアニメーションも同じRIGHTにして、ゆっくりにして、ここに1000を入れてやります。
さあこれでどのような動きになるのか、一度プレビューを見てみます。
これで下の方にスクロールしていきます。こんな感じですね。
タイトルが立ち上がって、こちらのカラム全体が時間差によって、順番に動いていきました。
この様な感じで、何度も何度も自分で時間差をつけて試して、一番ほどよい感じにしたり、アニメーションの動きをよくしたり、何度も何度も数値を変えて、プレビューで確認で見てみる。
こういう繰り返しの作業が、Webページを作るときにはとても大切になります。
はい、それでは今回はこちらのセクションの解説は以上となります。
それでは次回の動画ではこちら、いよいよフッター、一番最後の部分ですね、フッターの解説になります。
それでは今回もこちら、公開されていない方は「下書きを保存」、こちら公開しているので「更新」を押しておきます。
それではこちらのURLは概要欄に貼っておきますねで、製作途中のページをご覧になってください。
それでは今回は以上となります、有難うございました。