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

スマホで高画質なPCゲームをプレイ可能!

事前登録で1~2ヶ月間無料 + 半年間の料金が半額に!

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" をいじることで大きさを変更できます。

 

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

ゲームも仕事も快適に!

2020年8月:最も人気なゲーミングPCはこちら

スマホで高画質なPCゲームをプレイ可能!
2020年7月末までの登録
最大61日間全ユーザー無料
2020年7月末までの登録で、最大61日間全ユーザー無料

関連コンテンツ

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

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

-HP・ブログ関連, ガジェット・ツール
-, , , , , , , , , , , ,

Copyright© ゲマステ!- Gamers Station , 2020 All Rights Reserved.