【第13回】トップページのメイン画像の変更とスライドショー設定「ワードプレス作成講座」

LINEで送る
Pocket

トップページのメイン画像の変更方法

この記事では、トップページのメイン画像の変更とスライドショー設定という内容についてご説明致します。
動画で見る方は下記をご覧ください。

ホームページってトップページのビジュアルイメージで半分以上が決まるって言われるほど大事なのがメイン画像ですね。

そこにどのようなイメージ画像や写真を使っているか、あとどんなキャッチコピーとかリード文で表現されているか、ここっていうのは本当に力を入れて見せる方が望ましいところなのです。

僕は、結構この部分、頻繁に変えているのです。ですから、今これをご覧のあなたもWordPressのトップページのメイン画像ですね、キャッチコピーなんか色々変えていただいて、試して欲しいと思ってます。

第13回講座はトップページのメイン画像の変更方法です。スライドショーの設定方法も併せて、管理画面のほうからお伝えしていきたいと思います。

まずトップページのメイン画像っていうのがどのことかと言いますと、ここの黄色の枠で囲った大きな画像のことなんですね。

この画像の部分を僕は、「トップページのメイン画像」と呼んでいます。

ここにキャッチコピーとかリード文とかちょっとした文言なんかを載せておけば、この場合はパソコンとかタブレットで見た時にこの内容っていうのが目に飛び込んできますので、「こういうことされている会社さんなんだな」っていうことが一目で分かるようにしています。

また、僕自身の写真も左端に写っていますので、ここではこんな方が運営されているんだなとか、セミナーとかもされているのかなとか、そういったところもイメージで想像してもらえますので、ここは重要なところなのですね。

今、この状態というのがパソコンとがタブレットで見た感じなんですけれども、これはGoogleChromeのブラウザで、キーボードの「F12」ボタンを押しますと、、こういう感じでスマホでどう見えるかっていうのも出てくるんですね

スマホで見たときには、メイン画像は縦長で、スマホ用に別途画像を作っています。

こういう形で、文言的にはパソコン表記もスマホ表記も同じ文面なんですけれども、写真の配置とか文章の配置とかはパソコンで見た時とは違った配置にして、スマホで見やすいように加工してますので、この部分の設定を今回は見ていきます。

それと、この部分というのはスライドショーにもできますので、そのやり方も併せてお話を進めてまいります。

スライドショー設定の方法

はい、先ほどから見ていましたメイン画像の修正の部分ですけれども、こちらは管理画面の外観のカスタマイズっていうところを開きます。

そうしますと、下記のようにカスタマイズのプレビュー画面が出てきてですね、変更した内容が即座にプレビューで見ることができる機能が備わっています。

そしてトップページのメイン画像の修正ですが、画像入れ替えは、左メニューの下、「Lightningトップページスライドショー」のメニューから変更します。ここをクリックしますとスライドが画面が出てきます。

スライド効果には、「slide」と「fade」の2種類があります。

あと40000ミリ秒ってあるんですけれども、スライドショーを設定した時に40000ミリ秒っていうのは4秒のことです。これ80000秒にすると、8秒で一つのスライドから次のスライドに変わるという設定になるんですね。

もちろんスライド1だけに画像を設定しておけば、スライドショーにはなりませんので、ここにスライド画像を設定してあったとしても、ずっと同じ画像が表示されたままになります。

私の場合は固定的なスライドを、パソコン用とスマホ用で一つずつ設定している状態です。

こっちの実際画像は横長なんで、1900x600ピクセル、モバイル用は任意と書いてるのですが、これが私のサイズで言いますと、こちらの画像ですね、800x800の正方形の画像を入れています。

このメイン画像の変更と追加ですが、これはWordPressの管理画面の「外観」の「カスタマイズ」の「Lightningトップページスライドショー」っていう項目をクリックしたその画面が、今まさに見ていただいている画面になるということなんですね。

ここで、例えばスライドに入ってありますね。ここに画像を選択してもう一個別のスライドを入れると、このスライドちょっと試しに入れてみますとパソコン用だけですね、推奨サイズとサイズは違うんですけれども、入れるとこういう感じでスライドショーとしてここに矢印が出ていますのでここをクリックしたらどういう感じでスライドするかっていうのは見えるんですね。

スライドショーはこういう感じで設定します。

これも今スライド効果が「slide」なんですけれども「fade」っていうスライド効果にすると、プレビューで事前に見せてくますので分かりやすいですよね。こういう感じです。

前の画像が消えて後の画像が後からじわっと出てくるとそういう変化を出せるとですからまあこの今2種類ですけれどもこういう変化でどちらでも変化を出せるとでもちろんこのメイン画像ですねこれをクリックしたら特定のページに飛ばしたいとかサービス内容とか商品の画像を作ったとじゃあその商品の画像をクリックしたときにその商品ページに飛ばしたいなんていうときはこちらにスライド画像リンク先urlっていうのがありますんでここにurlのアドレスを入れるんですね

例えば会社概要にそのスライドをクリックしたら飛ばしたいということでしたらこの会社概要を開けてそこのアドレスをコピーしまして先ほどのカスタマイズの画面に戻りましてスライドのリンク先にコピーペーストするとこれだけでこの1枚目のこのスライドですねこのスライドにリンクが出来ましたとこれわかりますがね

あの手の形指の指のこういう形になっててこれがリンクがあるって言うことを表してるんですねクリックしますと会社概要に飛びましたと

この部分をクリックすると会社外のページに飛ぶとそういうことになります

それでもちろんひとつ目の画像は指のマークが出てリンク先のページができているんですけれどももう一つ別の次のスライドに言うとこっちはリンクがないですね

リンクがないのでマウスカーソルも矢印のままという状態になっています

こういう形で使う理由れるんですね

ここの設定のところですねトップページスライドショーを設定のところで代替テキストスライドにかぶせる色うすらとか上にかぶせたりね例えばスライドにかぶせる色をでしたらこうやって色を選んで何パーセントでかぶせるかっていうような設定をすると今この画面のスライドが暗くなりましたよね

色々使えるカスタマイズ画面

こういう感じで色を暗くしたり明るくしたりちょっと調節できるようなそういう機能もついています。

ではと正スライドタイトルとかスライドテキストとかボタンを表示させる場合のボタンの文字とか、このあたりは細かくはちょっと説明は省きますけれども、実際に触っていただいてですね、確認していただければ面白いんじゃないかなと思います。

こんな感じでこのテーマのカスタマイズのところですねいろいろな内容を色々な修正とがカスタマイズができますしここっていうのがホームページWordPressでこのテーマでホームページを作っていく上で一番肝となる部分なんですね

ですからここは基本的にはもうほとんど使うことになりますので色々開けてですねこれを開けてここは何が設定できるのかっていうのを見ていていただくと面白いんじゃないかなとでまたね色々ご自身で使い方の幅が広があっていきますのでぜひあのここを色々を触ってみてくださいね

いろいろな修正ができてホームページの運営も楽しくなってくると思いますのでぜひ心配しても良いと思いますのでここはね色々触って失敗してもすぐに戻せますんでスキルアップに繋げていただければ良いのかなと考えています

はいということで第13回講座はウェブロードのサイトを使ってトップページのメイン画像の変更方法とかアドスライドショーの設定の方法外観のカスタマイズの画面ですね色々修正したり変更したりサイトを充実させることができるいろいろな機能がこのカスタマイズの画面に詰まっていますので触っていただくといいんじゃないかなと思います

では今回はここまでになります。本日もご視聴いただきましてどうもありがとうございました。

Follow me!

The following two tabs change content below.

山口 敦

代表取締役株式会社ウェブロード
毎日のように全国各地からいただく色々な中小・小規模事業者様のWebサイト運営・改善方法や、ホームページに関する問題点について、Web活用アドバイスのメールのご返信をしています。もちろん無料ですし、やり取りは1回で完結します。 様々な事業者様のWebサイト活用のお悩みや問題点を知ることで、弊社クライアントの制作・運営に活かせて頂いております。Win-Winの関係ですので、ご遠慮無くメールフォームからご質問ください。 プロフィール

WordPress作成講座の動画一覧

WordPressの作成や運用方法の講座【40代以上初心者向け「ワードプレス作成講座」】をYou Tubeの弊社チャンネル内で開講しております。WordPressに関心のある方はこちらからチャンネル登録(無料)を行っておいてくださいね。

ワードプレス作成講座への入塾(無料)You Tubeウェブロードチャンネル

動画内で紹介している有料テーマ
Lightning Pro

動画内で紹介しているレンタルサーバー エックスサーバー

弊社サービスをお考えの方は下記の動画もご覧いただき、Webの方向性や相性が合いそうか事前にご確認をお願い申し上げます。

※投資・広告・提携話等、営業メール・電話は一切お断りさせて頂いております。その場合、お返事致しませんのでご了承願います。

必須お名前
必須ふりがな
必須メールアドレス
任意貴社名
任意電話番号
必須お問い合わせ項目を選択してください WordPress制作運営代行サービス保守管理サービスサイト企画・改善コンサルティング(スポット)求人応募その他
必須内容を詳しくご記入ください

株式会社ウェブロードのプライバシーポリシーに同意する。プライバシーポリシー