★ Let's become a Web Designer! 【プロフィール】 【商品一覧】 【よくある質問】 【お問い合わせ】
 

スライドショーの作り方

 
ホーム はじめに 講座の効果 作成実績 受講者の声 パーツ集 作成ソフトの選び方 作成ソフトの比較 ネットで収入
 
 
 はじめに
当サイトは、ホームページの作り方を覚える
ことができる動画を無料で公開しています。
動画でホームページの作り方が分かります。
 
ホームページの基礎知識
無料ホームページ作成 ホームページで知っておきたいこと
無料ホームページ作成 初心者のためのホームページ基礎講座
無料ホームページ作成 良いレンタルサーバの選び方と比較!
 
タグと用語集とテクニック
無料ホームページ作成 基本になる HTMLタグの書き方
無料ホームページ作成 ホームページ作成でよく使う用語集
無料ホームページ作成 ホームページで使えるテクニック!
 
 
 
  トップページ > ホームページ作成で使えるテクニック
 

画像が自動的に切り替わる「スライドショー」を表示する方法

画像が自動的に切り替わる「スライドショー」を表示する方法をお伝えします。

画像が自動的に、横にスライドしていくと、ホームページの見栄えがとても良くなりますよね。 具体的には、下記のような「スライドショー」になります。
(5秒ごとに切り替わります)

このスライドショーは、HTMLだけでは実現できないので、「jQuery(ジェイクエリー)」というものを使います。 ただ、コピペだけで、簡単に実現できるので、ぜひやってみてくださいね。




画像が自動的に切り替わる「スライドショー」を表示する方法の手順

 
手順1:スライドショーを表示したいページのヘッダー
(</head>の真上)に、下記のソースを入れる。



↑ソースが長かったので、枠に入れました。
 上記の枠内のソースをすべてコピーして、ヘッダーに貼り付けてください。

【注意】

ソースを入れるページは、スライドショーを表示したいページです。
そして、ソースを入れる場所は、ヘッダーの中で、</head>の真上に入れます。
ソースを入れる場所については、十分、注意してください。
(ヘッダーの中に入れないと、動かないです)



手順2:スライドショーを表示したい箇所に、下記のソースを入れる。

<div class="slider">
<img src="gazou1.jpg" width="500" height="300" alt="">
<img src="gazou2.jpg" width="500" height="300" alt="">
<img src="gazou3.jpg" width="500" height="300" alt="">
<img src="gazou4.jpg" width="500" height="300" alt="">
</div>

上記のソースを使うときは、「画像のファイル名」を変更してください。 現在は、「gazou1.jpg」などにしていますけど、この画像のファイル名を、表示させたいファイル名に変更する、という形ですね。

なお、上記のソースでは、4つの画像を順番に表示するようにしていますが、5つの画像を順番に表示させたい場合は、1行増やせば良いだけです。
(逆に、表示させたい画像を減らす場合は、1行消せば良いだけです)

あとは、スライドショーが正常に表示されていることを、確認してみてくださいね。


【注意】

「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、 HTMLファイル(index.htmlファイルなど)と同じ場所に、画像を保存するようにしてください。



ちょっとしたカスタマイズ方法

 

上記のソースでは、画像の大きさは、横幅(width)は500、縦幅(height)は300で固定しています。 もし、画像の大きさを変えたい場合は、width とheight で指定している数字を、変更してみてください。

あと、ヘッダーに入れるソースの「pause」で指定している数字を変更すれば、画像がスライドするスピードを変えることができます。 現在は、「5000」にしていて、これは「5秒」という意味になりますよ。




【よく読まれている関連記事】


【おすすめ外部コンテンツ】
 
会員制サイドビジネス講座
 
私がお金を稼ぐ理由 ~ お金を持ったときのメリット ~
 
インターネットで月20万円の収入を継続して稼ぐ方法
 
初心者用ホームページテンプレート
 

インターネットビジネスのすごさを認識してください
 
無料ホームページ制作講座の受講者の声
 
動画で覚える無料FX講座
 
ホームページが作れる能力は、最高の能力
 



当サイトで使用しているサンプルサイトを無料でダウンロード!

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
このサンプルサイトがあれば、 さらにホームページの作り方が分かりやすく なりますよ!

⇒ 当サイトで使用しているサンプルサイトの無料ダウンロードはこちら!



副業で月20万円の収入を、自宅の空いている時間で稼ぐための講座

ホームページを自分で作ることができれば、そのホームページで、実際に収入を得ることができます。 そこで、インターネットを使ったサイドビジネス (副業) で、 自宅にいながら、空いている時間で、月20万円の収入を得ていただくための方法 もお伝えしています。

1日1時間程度の空いている時間で、自宅にいながら、月数万円でも収入を得られたら、とても良いと思いませんか? これからは、 複数の収入源を持つこと がとても大切ですし、副業で毎月お小遣いを得られたら、すごく嬉しいですよね!

⇒ 副業で自宅にいながら、収入を得るための講座はこちら!



 
今スタートできるサンプル
サイトを無料ダウンロード
 
 
サイドビジネス講座
 
会員制サイドビジネス講座
 
初心者がホームページを自分で作れる能力を身につけて、 そのホームページをビジネスに活用する方法 をお伝えする、会員制のサイドビジネス講座です。

この講座は、 初心者がインターネットで収入を得られるようになること を目的として、運営しています。
 
 
 
HPテンプレート
 
自分で更新できる最短ホームページテンプレート
 
初心者が、簡単にホームページを作るための 「ホームページテンプレート」 です。

テンプレートと、たくさんのパーツ集をコピーして貼り付けるだけで、ホームページが完成する仕組みになっています。

さらに、 テンプレートの使い方はすべて動画で解説 しています。
 
ホームページのメリット
 
基礎講座と用語集
  ホームページ基礎講座
  HPでよく使う用語集
  HTMLタグの書き方
 
ホームページを作る前に
 
ホームページを作った後
 
インターネット副業
 
サイドビジネス・副業の始め方
 
初心者が、インターネットを使ったサイドビジネスで、 自宅にいながら収入を得る方法 を、すべて動画でお伝えするサイトです。

また、仕事ができるようになるノウハウや、 「最高の成長法」 などもお伝えしています。
 
 
メールマガジン
  メールマガジンの登録
 
リンク集
  当サイトへのリンク
  役立つホームページ
  お客様のホームページ
 
会社概要
 
- 特定商取引に基づく表記
 
- 個人情報保護ポリシー
 
- お問い合わせ先
 
 
NPO法人の推薦状
 
NPO法人の推薦状
 
当サイトは、NPO法人 「起業とキャリア支援センター」 様からの推薦を受けて、運営しています。
 
トップページプロフィール特定商取引法に基づく表記取り扱い商品一覧よくある質問お問い合わせ
 
 
Copyright © 動画で覚える無料ホームページ制作講座 All rights reserved.
 
by おすすめ副業ランキングサイト
^