【エレメンター講座 第７回】
オリジナルのホームページを簡単制作！
【ワードプレス】
この記事は、動画の音声を書き起こしたものです。
誰でも簡単にホームページが作れちゃう、エレメンター講座の第７回です。
今回は、前回に引き続きオリジナルホームページの各ウィジェットいじっていきます。
それでは早速、ワードプレスの固定ページを開いてみます。
左メニューの固定ページをクリックして、トップページこちらですね、こちらを別タブで開きます。
これが制作中のトップページです。
前回は一番上のヘッダ―部分とトップ画像、そして営業時間と電話番号、ここまで設定していきました。
今回はその下のポラロイドカメラ写真が並んでいるような、こちらのセクション。
こちらに説明文とタイトルを入れていじっていきたいと思います。
動画がかなり長くなると見づらいようなので、今回はこちらの写真のような演出のこちらのセクションだけをいじっていきます。
その前にこちらの前回いじった色の修正をしていきます。
こちらまずメニュー、SNSですね。
こちらの色、こちらの色をホバーした時、こちら色が変わらないですね、こちらサブカラー、ここに金色「＃CC9933」です。
これでマウスオーバーすると中の白がゴールドっぽい色になります。
そしてこのマウスオーバーの背景の色、これをちょっと薄くしてやると、もうちょい濃く、それかかなり薄く、スイッチオンになった的な、こんな感じでいいでしょう。
そしてこの下の背景の色、ここもちょっと変えます。
セクションのスタイル、ここで色が設定されていますね。
これを「＃000022」に変えてみました。
そして最後にこちらのメニュー、メニューの色を設定したのはこちらのダッシュボードに戻ってみます。
そしてサイトをカスタマイズ。
こちらのメニューはテキストで暫定的なメニューを作ってみたので、これはリンクカラーになっています。
このリンクカラーを設定したのが、ダッシュボードからのカスタマイズ、そして「追加CSS」で設定しました。
これの色をちょっといじります。
青がかなり明るかったので、ここを、それでホバー、マウスの電池が終わりかけているので上手くできません。
これで公開、今回色を変えたこちらも概要欄に貼っておきます。
使われる方はそちらをコピペして貼り付けてください。
これで一回読み込み、再読み込みをしてみます。
こちらで先ほどのCSS、変更したカラーが、こんな感じで変更されています。
こちらですね、リンク、そしてホバーした時のカラーを変えてみました。
とりあえずこんな感じで設定して、今回のテーマであるこちらのほうの設定に移っていきます。
今回は一応ハウスメーカーという設定なので、今回はこちらの使う画像をメディアライブラリィに用意しておきました。
こちらを取り入れていきます。
こんな画像を使ってみます、そしてこちらのポラロイド写真のよになっています。
これがちょっとズレてます、これはどこでズラしているのかというと、画像の高度な設定をみても数値変わっていません、カラムのほうを見てみます。
入れ物であるカラムの編集から高度な設定、これでマージンが―40に設定されたいます。
こちらで上にズラしているということになります。
もう一度、画像の編集に戻って、そしてここの枠線、画像の編集、高度な設定の枠線、ここをクリックすると直線、そして幅が15、これが白の部分の設定になります。
直線の15、これを無しにしてみるとこんな感じで、周りの枠がなくなります。
直線で、直線だけれども幅を15とかなり広く設定しているので、これによってポラロイド写真のような雰囲気の枠が出来上がっています。
そしてこの枠線、写真ぽく見せているこの枠線の周りに影、シャドーがかかっています。
こちらのシャドーはどこで設定されているかというと、こちら設定されている場合には青になっているんですけれども、こちら青になっていないですけれども、これをクリア、クリアすると消えます。
こちらで設定さています、こちらのシャドーの設定は、この水平、垂直、これを数値を変えることによって、共に６にすると斜めから光がかかっている感じ、こちらのシャドーが厚くなっています、こちらが薄くなっています。
斜めからの光源がある感じです、これでプラス、マイナスで設定していきます。
これですかねデフォルト設定が、ぼかしが20ですね、この「ぼかし」も数値を上下することによって、こちらの滲み具合が変わってきます。
そしてこちらのタイトル、説明文、こちらを変えていきましょう。
こちらの見出しを編集画面、コンテンツ、タイトルに事前に用意しておいたタイトルを貼りつけてみます。
そして説明文の編集、テキストエディター、コンテンツ、こんな感じですね、洗練された外観。
そしてスタイル、こちらの書体がデフォルトにしても変わらないので、Noto Sans JP、こちらがGoogleフォントのゴシックです。
17くらい、こちらもそして洗練された内観、こちらの色は、色をちょっと変えてみます。
SNSのカラーで使ったゴールド、これで設定完了したタイトルとテキストエディターを再度設定しないように貼り付けていきます。
そして２番目の画像を選択していきます。
メディアライブラリィから選択、またはファイルをアップロードしてください。
そしてタイトルとテキスト文を入れていきます。
タイトルの編集、そしてテキストエディタ、こちらの文章は事前に用意しておきました、そちらを貼りつけています。
こんな感じですね。
そしてこの下、タイトル、テキストエディターの編集。
こちらが４行目になっちゃってます、他は３行で収まっていますけれども、こちらが４行になっているので、カラムの編集から高度な設定、ここのパディングで左を19あけていますにで、こちらを少し減らしてみます。
これで３行に収まりました。
そしてこちらの３つ目の画像、これを用意しておいた画像を挿入して、さあこれで今回は出来上がりとなります。
皆さんご覧になっている方々はご自分の作りたい画像、タイトル、説明文を用意してこちらにはめ込んでいってください。
さあこれで今回は以上となります。
次回の動画ではこちらのプライスのコーナーですね、こちらの設定をしていきます。
はい、それでは以上となります。
有難うございました。
