ゲマステ!- 新作ゲームレビュー, マイクラ, ゲームMOD情報まとめ

ゲーマーズステーション | ゲームを中心に、動画・ブログ制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介

機種別ハイスコア(80点~)タイトルを見る

機種別ハイスコア(80点~)タイトルを見る

HP・ブログ関連 セール・お役立ち情報

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

2019年4月12日

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

[blogcard url="https://fukafuka295.jp/homepage-slideshow-kantan/"]

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

 

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

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

 




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

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

職業ユーチューバーにオススメ!

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・カード

当サイトからの入会で
初年度の年会費0円(無料)

20歳から入手可能な金属製ゴールドカード

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・ゴールド・カード

当サイトからの入会で
初年度年会費0円(無料) 3万ポイント

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

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

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

 

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

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

 

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

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

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

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

<link rel="stylesheet" href="cocoen.min.css">

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

 

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

<div class="container">

<div class="cocoen">
<img src="../images/hp/XXX.jpg">
<img src="../images/hp/○○○.jpg">
</div>
</div>

<script src="../js/cocoen.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
new Cocoen();
});
</script>

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

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

 

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

 

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

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

<div class="cocoen" style="width:500px !important;">
<img src="../images/hp/XXX.jpg">
<img src="../images/hp/○○○.jpg">
</div>
</div>

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

 

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

この記事をシェアする

関連コンテンツ

Amazon売上ランキング(毎時更新)
  • ニンテンドースイッチ
  • PS4
  • PS5
  • XSX|S
  • PCゲーム関連
  1. ゲーム機本体
    発売日 : 2019年08月30日
    価格 : ¥32,970
    最安値 : ¥29,000
  2. ゲームソフト
    発売日 : 2019年10月18日
    価格 : ¥7,573
    最安値 : ¥6,300
  3. ゲーム機本体
    発売日 : 2019年08月30日
    価格 : ¥32,978
    最安値 : ¥29,350
  4. ゲームソフト
    発売日 : 2021年07月16日
    価格 : ¥5,580
    最安値 : ¥5,210
  5. コントローラー
    発売日 : 2017年03月03日
    価格 : ¥6,645
    最安値 : ¥6,645
  6. ゲームソフト
    発売日 : 2021年07月15日
    価格 : ¥5,682
    最安値 : ¥5,300
  7. ゲームソフト
    発売日 : 2018年12月07日
    価格 : ¥6,609
    最安値 : ¥6,609
  8. ゲームソフト
    発売日 : 2017年04月28日
    価格 : ¥5,553
    最安値 : ¥5,210
  9. ゲームソフト
    発売日 : 2018年06月21日
    価格 : ¥3,273
    最安値 : ¥2,820
  10. ゲームソフト
    発売日 : 2020年11月19日
    価格 : ¥5,564
    最安値 : ¥4,770
  1. ゲームソフト
    発売日 : 2021年10月28日
    価格 : ¥4,318
    最安値 : ¥4,318
  2. ヘッドセット
    発売日 : 2017年07月20日
    価格 : ¥6,670
    最安値 : ¥6,670
  3. ゲーム機本体
    発売日 : 2018年07月01日
    価格 : ¥39,900
    最安値 : ¥36,000
  4. ゲームソフト
    発売日 : 2021年08月02日
    価格 : ¥10,000
    最安値 : ¥10,000
  5. ゲームソフト
    発売日 : 2021年10月28日
    価格 : ¥9,460
    最安値 : ¥9,460
  6. ゲームソフト
    発売日 : 2020年11月09日
    価格 : ¥10,000
    最安値 : ¥10,000
  7. ゲームソフト
    発売日 : 2021年09月09日
    価格 : ¥7,182
    最安値 : ¥7,182
  8. コントローラー(ハンドル・ジョイスティック)
    発売日 : 2017年02月23日
    価格 : ¥9,200
    最安値 : ¥8,800
  9. プレイステーション4
    発売日 : 1970年01月01日
    価格 : ¥2,100
    最安値 : ¥2,100
  10. アクセサリーキット
    発売日 : 1970年01月01日
    価格 : ¥2,150
    最安値 : ¥1,948
  1. ヘッドセット
    発売日 : 2017年07月20日
    価格 : ¥6,670
    最安値 : ¥6,670
  2. ゲームソフト
    発売日 : 2020年11月09日
    価格 : ¥10,000
    最安値 : ¥10,000
  3. コントローラー(ハンドル・ジョイスティック)
    発売日 : 2021年06月10日
    価格 : ¥7,139
    最安値 : ¥7,500
  4. アクセサリーキット
    発売日 : 1970年01月01日
    価格 : ¥2,150
    最安値 : ¥1,948
  5. ヘッドセット
    発売日 : 2020年08月18日
    価格 : ¥10,980
    最安値 : ¥9,004
  6. ゲームソフト
    発売日 : 2020年11月09日
    価格 : ¥1,100
    最安値 : ¥1,100
  7. ゲームソフト
    発売日 : 2020年11月09日
    価格 : ¥5,000
    最安値 : ¥5,000
  8. ヘッドセット
    発売日 : 2020年09月17日
    価格 : ¥15,650
    最安値 : ¥15,650
  9. ヘッドセット
    発売日 : 2019年08月29日
    価格 : ¥10,900
    最安値 : ¥10,900
  10. ゲームソフト
    発売日 : 2020年11月09日
    価格 : ¥3,000
    最安値 : ¥3,000
  1. 周辺機器・アクセサリ
    発売日 : 2021年09月14日
    価格 : ¥12,000
    最安値 : ¥12,000
  2. 周辺機器・アクセサリ
    発売日 : 2020年11月10日
    価格 : ¥6,241
    最安値 : ¥6,241
  3. 周辺機器・アクセサリ
    発売日 : 2020年11月10日
    価格 : ¥5,998
    最安値 : ¥5,320
  4. 周辺機器・アクセサリ
    発売日 : 2020年11月10日
    価格 : ¥4,745
    最安値 : ¥4,745
  5. 周辺機器・アクセサリ
    発売日 : 2020年12月24日
    価格 : ¥36,448
    最安値 : ¥36,448
  6. 周辺機器・アクセサリ
    発売日 : 2021年02月23日
    価格 : ¥6,473
    最安値 : ¥6,473
  7. バッテリー・充電器
    発売日 : 1970年01月01日
    価格 : ¥2,899
    最安値 : ¥2,899
  8. ゲームソフト
    発売日 : 2021年07月27日
    価格 : ¥6,208
    最安値 : ¥6,208
  9. 周辺機器・アクセサリ
    発売日 : 2021年03月16日
    価格 : ¥20,800
    最安値 : ¥19,500
  10. 周辺機器・アクセサリ
    発売日 : 2021年05月11日
    価格 : ¥7,128
    最安値 : ¥7,128
  1. ゲーミングマウス
    発売日 : 2019年06月27日
    価格 : ¥7,900
    最安値 : ¥7,980
  2. ゲーミングマウス
    発売日 : 2020年08月07日
    価格 : ¥12,900
    最安値 : ¥12,900
  3. PCゲーム
    発売日 : 2018年11月26日
    価格 : ¥2,862
    最安値 : ¥2,862
  4. ゲーミングマウス
    発売日 : 2021年02月25日
    価格 : ¥16,082
    最安値 : ¥15,920
  5. ゲーミングキーボード
    発売日 : 2019年11月14日
    価格 : ¥12,204
    最安値 : ¥9,500
  6. ゲーミングマウス
    発売日 : 2020年12月22日
    価格 : ¥16,082
    最安値 : ¥13,900
  7. ゲーミングマウス
    発売日 : 2019年03月26日
    価格 : ¥3,800
    最安値 : ¥3,800
  8. PCゲーム
    発売日 : 2019年07月02日
    価格 : ¥2,552
    最安値 : ¥2,552
  9. ゲームパッド
    発売日 : 2013年04月19日
    価格 : ¥1,892
    最安値 : ¥1,290
  10. ゲーミングマウスパッド
    発売日 : 2016年04月01日
    価格 : ¥2,800
    最安値 : ¥2,800

-HP・ブログ関連, セール・お役立ち情報
-, , , , , , , , , , , ,

Copyright© ゲマステ!- 新作ゲームレビュー, マイクラ, ゲームMOD情報まとめ , 2021 All Rights Reserved Powered by AFFINGER5.