ふかふか交易所 - ネットコンテンツから日々のお役立ち情報まで

ふかふか交易所 | ネットコンテンツや日々のお役立ち情報まで
RSSを購読する
follow us in feedly
トップ ゲーム 動画 HP・ブログ お金関係 お問い合わせ サイトマップ ページ下部へ

HP・ブログカテゴリ 新着記事

サイト内検索

現在の人気記事はコチラ!

ホーム > HP・ブログカテゴリー No.91 ~ No.100 > 記事No.91

2枚の画像を比較するのに便利な『比較用スライドショー』を超簡単に設置する方法を紹介!

← 前の記事

次の記事 →

画像比較スライドショー

以前の記事で、ホームページに普通のスライドショーを設置する方法について紹介しました。

参考:超簡単!ホームページにスライドショー機能を実装する方法(JQuery)


しかし今回紹介するスライドショーは、2枚の画像を比較したい時に非常に便利な『比較用スライドショー』です!(通称:Cocoen)


例えば以下のような2枚の画像を比べて見せたいとします。


ここで『比較用スライドショー』を導入すると、以下のように、カーソル操作で2枚の画像を見比べることができるスライドショーが設置できます。


実はこの『比較用スライドショー』は、たった数行のコードを貼り付けるだけで、超簡単に設置することができるのです。

今回はその方法について解説していきます!(゚∀゚)

"CSSファイル" と "JSファイル" のダウンロード

まずは以下のリンクより、比較用スライドショーを設置するのに必要なCSSファイルとJSファイルをダウンロードしてください。

※ダウンロードする際は、以下のリンクを右クリックし、『名前を付けてリンク先を保存』でデータを保存してください。


・CSSダウンロード:cocoen.min.css

・JSダウンロード:cocoen.min.js


ダウンロードした2つのファイルは、それぞれ任意のディレクトリにアップロードしてください。


コードのコピー&ペースト

続いて、スライドショーを呼び出すためのコードを貼り付けます。

まず、設置したいページの<head></head>内に以下のコードを貼り付けてください。


※ここで、『href="cocoen.min.css"』の部分は自身がCSSファイルを置いたディレクトリに変更してください。


続いて、比較用スライドショーを設置したい個所に、以下のコードを貼り付けてください。


※ここで、4,5行目の○○○・×××の部分は、表示させたい2つの画像の文字列に変更してください。

※また、9行目の『src="../js/cocoen.min.js"』の部分も自身がJSファイルを置いたディレクトリに変更してください。


以上でスライドショーの設置は完了です!
超簡単ですね!(゚∀゚)


スライドショーの大きさを変更したい場合

設置したスライドショーの大きさを変更したい場合は、上のコードの3行目に、以下のように追記してください。

※上記の1行目の "500px" をいじることで大きさを変更できます。


似たような画像を比較してもらいたい際には非常に使いやすいスライドショーです。設置もかなり簡単なので、是非試してみてくださいね!

比較用スライドショーは他にもたくさんありますが、おそらくコレが一番簡単なヤツだと思います

関連記事はこちら

▼管理人ピックアップ!

この記事を読んだ人はコチラも見ています

この記事に対するコメント

Comment Form is loading comments...

現在の人気記事はコチラ!

ご意見や質問などは気軽にメッセージフォームへ!


hp_blog_top
HP・ブログ制作ノウハウまとめ
movie_top
動画制作ノウハウまとめ
review_top
色んなもの・体験レビューまとめ
minecraft_top
マインクラフト記事まとめ

当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 HP・ブログ お金関係 お問い合わせ サイトマップ ページ上部へ