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

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

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

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

僕は、結構この部分、頻繁に変えているのです。

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

第13回講座はトップページのメイン画像の変更方法です。

スライドショーの設定方法も併せて、管理画面のほうからお伝えしていきたいと思います。

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

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

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

「こういうことされている会社さんなんだな」っていうことが一目で分かるようにしています。

また、僕自身の写真も左端に写っています。

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

今、この状態というのがパソコンとがタブレットで見た感じです。

GoogleChromeのブラウザで、キーボードの「F12」ボタンを押しますと、スマホでどう見えるかが表示されます。

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

こういう形で、文言的にはパソコン表記もスマホ表記も同じ文面なんです。

しかし、写真の配置とか文章の配置とかはパソコンで見た時とは違った配置にして、スマホで見やすいように加工してますので、この部分の設定を今回は見ていきます。

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

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

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

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

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

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

あと40000ミリ秒ってあるんですけれども、スライドショーを設定した時に40000ミリ秒っていうのは4秒のことです。

これ80000秒にすると、8秒で一つのスライドから次のスライドに変わるという設定になるんですね。

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

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

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

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

ここで、例えばスライドに入ってありますね。

ここに画像を選択してもう一個別のスライドを入れると、どういう感じでスライドするかがプレビューで見えるのです。

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

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

前の画像が消えて後の画像が後からじわっと出てくるとそういう変化を出せます。

2種類ですけど、こういう変化を出せると、サービス内容など、別ページに飛ばしたいときはスライド画像のリンク先にそのページのURLを入れるんですね。

例えば会社概要にそのスライドをクリックしたら飛ばしたいということでしたら、この会社概要を開けてそこのアドレスをコピーして設定します。

スライドのリンク先にコピーペーストすると、これだけでこの1枚目のスライドにリンクが出来たことがわかります。

カーソルが指の形になってリンクがあることを表してるんですね。クリックしますと会社概要に飛びます。

この部分をクリックすると会社概要のページに飛ぶことになります。

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

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

トップページスライドショーを設定のところで、スライドに色を薄っすらと被せたり、スライドに被せる色を何パーセントで被せるかを設定すると、明るくしたり暗くしたりできます。

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

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

ではスライドタイトルとかスライドテキストとかボタンを表示させる場合のボタンの文字とかは、実際に触っていただいて確認していただければ面白いんじゃないかなと思います。

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

ですからここは基本的にはほとんど使うことになります。

色々開けて、ここは何が設定できるのかっていうのを見ていていただくと面白いです。

ご自身で使い方の幅が広がっていきますのでぜひ触ってみてくださいね。

ここは触って失敗してもすぐに戻せますので、スキルアップに繋げていただければ良いのかなと考えています。

こちらが最新情報です

WordPress講座
カスタムフィールドにプラグイン【WP Imp Exp】を使ってインポートする方法New!!
WordPress講座
ChatGPTとGoogle検索を使い分けるNew!!
01メルマガバックナンバー
人材採用は会社にとって非常に重要な仕事New!!
お知らせ
求人にご応募してくださる方へ(完全在宅・Web制作のパート社員募集中)
WordPress講座
フォーム入力内容をPDFに変換し自動返信するシステムの構築
WordPressのプラグイン
VK Filter Search Proの使い方 ー 基礎編 ー|WordPressの検索システムのプラグイン
Web制作の費用や相場
オウンドメディアによる制作・運営・管理と集客方法、成功事例
01メルマガバックナンバー
ページビュー数よりユーザー数を見よう
WordPressのプラグイン
Booking Packageの使い方|2024年最新 | 時間帯予約&宿泊予約に対応
01メルマガバックナンバー
テレワークで変わる働き方と人材採用
サイト運営ノウハウ
古い(10年以上経過した)レンタルサーバーは危険か?
WordPress講座
カスタムフィールドの簡単な作り方をご紹介!

投稿者プロフィール

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

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

(※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。)

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須お問い合わせ項目

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

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

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

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

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

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

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

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

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

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

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