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

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

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

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

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

僕は、結構この部分、頻繁に変えているのです。ですから、今これをご覧のあなたも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.

山口 敦

代表取締役株式会社ウェブロード
2004年頃の会社員時代からブログ作成を始める。ブログ作成が楽しくなり、そのまま趣味が高じて2006年にホームページ制作で起業、2008年に株式会社ウェブロードを設立。現在は、個人・中小事業者のWordPressサイト制作を中心に、Web業界16年の知識と経験を生かして、小規模案件のみならず、大型案件のWebディレクターとしても活動中。 プロフィール

WordPress作成講座の動画一覧

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

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

動画内で紹介している有料テーマプラグイン

Lightning G3 Pro Pack

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

お問い合わせフォームはこちら

お電話の方はこちらをタップしてください。→ 0798-77-5520
(※営業電話が多いため、お電話は留守電となります。お問い合わせ内容を留守電に入れていただけましたら、折り返しお電話させていただきます。お急ぎの方はメールフォームをお使いください。

2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。













    投資・広告・提携・営業・売り込みメールやお電話は全てお断りしております。
    そのようなご連絡は恐れ入りますがお返事できかねますので何卒ご了承願います。

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意貴社サイトURL

    任意電話番号(ハイフン無し・半角数字)

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください