小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

別ウィンドウを開かずにサムネイル画像を拡大表示する方法

最終更新日: 2015-08-06

同一ウィンドウ内での画像拡大の概要

同じページ内の画像を切り替え

「すぐ使えるCGI」を使って、画像をサムネイル(サムネイル、縮小版画像)で表示し、クリックすると別ウィンドウ(別窓)を開かずにページ内に拡大表示するページを作る方法をご紹介します。

ページ内に「メインの画像」を一つ表示し、その下(または右)に並べたサムネイルの画像をメインの領域に切り換えて表示していく方法です。

不動産物件情報や商品情報など、画像を多数掲載しながら同時にテキストでの情報も見比べたいというページに向いた構成です。

画像の切り替えはクリックした時の他、自動での切り替え(スライドショー、スライダー表示)を行う事も可能です。

同一ウィンドウ内での画像拡大表示組み込み済製品

以下の製品サンプルでは既にこの表示が組み込まれています。都合が合えば、ダウンロードして細部を調整して使って下さい。

不動産情報更新用ツール

商品情報・不動産情報管理向けCMS

不動産情報の更新ページを想定し、画像の拡大表示の他、地図項目の設定や追加項目の設定がしてあります。不動産だけでなく、一般的な商品情報更新などにも適しています。

詳細とダウンロード

このページで紹介するサムネイル画像拡大方法

このページで紹介するサムネイル画像の拡大方法は、「PikaChoose」という無料 JavaScript ライブラリを「すぐ使えるCGI」と組み合わせて利用します。

2種類の表示位置

サムネイル画像をメイン画像の下か右に配置

画像の表示位置はメイン画像の下にサムネイルを並べるパターンとメイン画像の右にサムネイルを並べるパターンがあります。デモはメイン画像の下にサムネイルを並べる設定になっています。

画像の数はいくつでも増やせます。

自動画像切り替え(スライドショー)とクリックでの手動切り替え

画像を自動的に切り替える(スライドショー、アニメーション)か、サムネイルをクリックした時だけその画像を拡大表示するかのどちらかを選択できます。

デモは自動で切り替える(スライドショー)の設定になっていますが、設定変更でクリック時のみに切り替えることができます(設定方法後述)。

設定方法

この方法はベースとして「すぐ使えるCGI」の「添付ファイル付 ウェブページ更新ツール 大容量版」(Ver. 4.8 以上)を使います。お手元にまだ製品が無い場合は、「ステップ by ステップガイド」の手順で設置して下さい。

また、下のボタンからも組み込み済製品をダウンロードして下さい。このファイルの中に設定に必要な部品ファイルが含まれています。

なお、下のボタンからダウンロードできる製品は「添付ファイル付 ウェブページ更新ツール 大容量版」に既にこの画像表示を組み込んだものですが、その他に、項目の追加や管理画面の変更がされています。項目を追加したくないような場合は、素の「添付ファイル付 ウェブページ更新ツール 大容量版」をダウンロードして画像の部分だけを下記の方法で調整して下さい。項目を追加してもよいような場合は、下のボタンからダウンロードして設置してしまった方が簡単です。

表示のデモ 管理画面のデモ

部品ファイルの確認

上記のボタンからリンクしたファイルに、以下のディレクトリが含まれています。これらのディレクトリを中身のファイルごと、設置した製品の対応する場所にアップロードして下さい。

webdir/css
webdir/js
webdir/images


記事用テンプレートファイルの編集

以下のテンプレートファイルをそれぞれ下記の通り編集して下さい。

なお、「テンプレート」などの用語がよく分からない場合は、先に「デザイン変更チュートリアル」をご覧下さい。「すぐ使えるCGI」のデザイン調整方法をご説明しています。

templates/article/article.html の編集

templates/article/article.html は以下の3か所のポイントを変更して下さい。

CSSファイルへのリンク

<head>と</head> の間のどこかに、以下のCSSリンク表記を追加追加して下さい。希望のデザインによってコードが違いますので、以下のいずれかを選んで追加して下さい。なお、href 属性に指定されている CSS ファイルは、ダウンロードした部品ファイルに含まれているものです。

<!-- 画像の下にサムネールを配置する時はこちら -->
<link type="text/css" href="css/bottom.css" rel="stylesheet">


<!-- 画像の右にサムネールを配置する時はこちら -->
<link type="text/css" href="css/without.css" rel="stylesheet">


画像とファイル部分の表示

画像とファイル部分は、元々の「<!-- ファイルの表示 -->」「<!-- 画像の表示」といった表示部分が以下のようになるように書き換えて下さい。

置き換え前のHTMLコード

<!-- ファイルの表示 -->
<ul>
<!-- attached files : generate from article_file.txt -->
%_file_list_%
</ul>

<div>
<!-- 画像の表示: generated from article_image_1.txt -->
%_article_image_1_%
</div>


置き換え後のHTMLコード

<!-- ファイルの表示 -->
<div class="pikachoose">
	<ul id="pikame">
	<!-- メイン画像の表示: generated from article_image_1.txt -->
	%_article_image_1_%
	<!-- attached files : generate from article_file.txt -->
	%_file_list_%
	</ul>
</div>


JavaScriptの追加

templates/article/article.html の</body> 終了直前に以下のコードを追加して下さい。なお、<script> タグの src 属性で指定されているファイルは、ダウンロードした部品ファイルに含まれているものです。

<script type="text/javascript" src="js/jquery-pikachoose-full.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(
	function (){
		$("#pikame").PikaChoose({

			autoPlay: true, /* 自動アニメーションをしないなら false */
			speed: 5000, /* 切り替わりのスピード(1個の画像あたりの時間) */
			animationSpeed: 600, /* 切り替わりの素早さ */

			showCaption: true, /* 画像説明を表示しないなら false */

			IESafe: false, /* IE6/7に対応させるなら true */

			thumbOpacity: 0.5, /* サムネールのぼやけ具合。0-1で数値が大きい方がくっきり  */
			hoverPause: true, /* マウスオーバーしてもアニメーションを止めないなら false  */
			stopOnClick: true /* クリックした後もアニメーションを続行するなら false  */

		});

	});
</script>

templates/article/article_file.txt の編集

templates/article/article_file.txt を開いて内容を以下で置き換えて下さい。

<li><img src="%_d_%/%_filename_escaped_%"><span>%_filetext_%</span></li>

templates/article/article_image_1.txt の編集

templates/article/article_image_1.txt を開いて内容を以下で置き換えて下さい。

<li><img src="%_d_%/%_filename_escaped_%"><span>%_imagetext_%</span></li>


管理画面用テンプレートファイルの編集

管理画面は、初期設定では「画像」と「ファイル」がアップロードできるようになっていますが、このページでご紹介している使い方では「ファイル」欄にも画像をアップロードして使います。初期設定のテンプレートのままでも更新作業は可能ですが、管理画面上で画像を見やすく表示するには、下記ページの方法で管理画面用テンプレートの更新も行って下さい。

ファイルアップロード欄に画像をアップロードする方法

初期設定のままで使用する場合は、「リンクテキスト」欄に画像のタイトルを入力して下さい。

変更の反映と確認

テンプレートの編集が終わったら、サーバに部品ファイルと編集したテンプレートファイルを上書きアップロードして、管理画面から画像を登録して表示確認を行って下さい。

スライドショー動作の調整とデザインカスタマイズ

基本的な設定が済んだら、画像表示に関して以下のような調整が可能です。

スライドショーを止める

メイン画像が自動で切り替わってしまうのを止めるには、templates/article/article.html を編集して下さい。

設定の変更

templates/article/article.html を開くと末尾近くに以下のような設定があります。

<script language="javascript" type="text/javascript">
$(document).ready(
	function (){
		$("#pikame").PikaChoose({

			autoPlay: true, /* 自動アニメーションをしないなら false */
			speed: 5000, /* 切り替わりのスピード(1個の画像あたりの時間) */
			animationSpeed: 600, /* 切り替わりの素早さ */

			showCaption: true, /* 画像説明を表示しないなら false */

			IESafe: false, /* IE6/7に対応させるなら true */

			thumbOpacity: 0.5, /* サムネイルのぼやけ具合。0-1で数値が大きい方がくっきり  */
			hoverPause: true, /* マウスオーバーしてもアニメーションを止めないなら false  */
			stopOnClick: true /* クリックした後もアニメーションを続行するなら false  */
		});
	});
</script>
上の初期設定では「true」になっている青字部分を「false」にして(下記例)保存して下さい。
autoPlay: false, /* 自動アニメーションをしないなら false */

反映と確認

templates/article/article.html を編集したら、サーバに上書きアップロードの後、管理画面一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。この操作により最新の設定を反映してページが再度書き出されますので、ブラウザのキャッシュをクリアした後再読み込みして表示を確認して下さい。

スライドショーが止まり、クリックした時だけ画像を切り替え表示するようになります。

スライドショーの速度を変更する

スライドショーの速度を変更するには、templates/article/article.html を編集して下さい。以下の2点が変更できます。

  • 1枚の画像が表示されている長さ
  • 画像の切り替わりの速度

設定の変更

templates/article/article.html を開くと末尾近くに以下のような設定があります。

青字の部分が1枚の画像が表示されている時間、赤字が画像が切り替わる時間(2枚の画像がぼんやりと重なっている時間)の長さです。それぞれ「ミリ秒」(1000分の1秒)単位での指定ですので、好みの長さに変更して下さい。下記例の初期設定だと、画像1枚を5秒(5000ミリ秒、青字)間表示し、0.6秒(600ミリ秒、赤字)掛けて切り換えます。

<script language="javascript" type="text/javascript">
$(document).ready(
	function (){
		$("#pikame").PikaChoose({

			autoPlay: true, /* 自動アニメーションをしないなら false */
			speed: 5000, /* 切り替わりのスピード(1個の画像あたりの時間) */
			animationSpeed: 600, /* 切り替わりの素早さ */

			showCaption: true, /* 画像説明を表示しないなら false */

			IESafe: false, /* IE6/7に対応させるなら true */

			thumbOpacity: 0.5, /* サムネイルのぼやけ具合。0-1で数値が大きい方がくっきり  */
			hoverPause: true, /* マウスオーバーしてもアニメーションを止めないなら false  */
			stopOnClick: true /* クリックした後もアニメーションを続行するなら false  */
		});
	});
</script>

反映と確認

templates/article/article.html を編集したら、サーバに上書きアップロードの後、管理画面一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。この操作により最新の設定を反映してページが再度書き出されますので、ブラウザのキャッシュをクリアした後再読み込みして表示を確認して下さい。

サムネイルの表示位置を変更する(メイン画像の右か下)

設定済の製品をそのまま使っている場合、初期設定ではサムネイルがメイン画像の下に表示されます。これをメイン画像の右に変更するには、templates/article/article.html を編集して下さい。

設定の変更

templates/article/article.html の<head> と </head> の間に下のような設定があります。

<!-- 画像の下にサムネールを配置する時はこちら -->
<link type="text/css" href="css/bottom.css" rel="stylesheet">

<!-- 画像の右にサムネールを配置する時はこちら -->
<!-- link type="text/css" href="css/right-without.css" rel="stylesheet" -->

初期設定ではメイン画像の下にサムネイルを表示するためのCSSファイルが有効で、右に表示するためのCSSファイルがコメントとして表示されています。これを変更し、右に表示する用のCSSファイルを有効にして下さい。

上の部分の変更例

下記例は、メイン画像の右にサムネイルを配置する設定です。

<link type="text/css" href="css/right-without.css" rel="stylesheet">

反映と確認

templates/article/article.html を編集したら、サーバに上書きアップロードの後、管理画面一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。この操作により最新の設定を反映してページが再度書き出されますので、ブラウザのキャッシュをクリアした後再読み込みして表示を確認して下さい。

メイン画像のサイズを変更する

メイン画像のサイズを変更するには、CSSファイルを編集します。この変更は、サムネイル画像の表示位置を決定しCSSファイルを選んだ後に行って下さい。

設定の変更:サムネイルを下に表示している場合

メイン画像の下にサムネイルを表示している場合は、webdir/css/bottom.css を編集して下さい。下記例のようなコードがありますので、赤字の部分を、アップロードする予定の画像の中で一番横長の画像に合せて変更して下さい。

/* 表示領域全体 */
.pikachoose {width: 510px; margin: 0 auto;}

/* 拡大画像部分 */
.pika-stage {background: transparent; border: transparent; padding: 0 0 0 0; text-align:center; width: 510px; height:340px;}
.pika-stage img{height:100%;}

画像のサイズを変更してセンタリング(画像の中央の位置)がずれてしまう場合は、コメントで「表示領域全体」と書いてある部分の青字の width 設定を変更して調整して下さい。

画像の縦横比が指定したサイズの縦横比と一致していない場合、高さを一定(指定されたheight)に揃え、幅は画像の縦横比に伴って変わります。画像によって幅が変わる場合、キャプションや前後リンクのボタンがメイン画像からはみ出てしまう場合がありますので、アップロードする画像の縦横比が一定でない場合は、いくつかテスト用の画像をアップロードしながら調整を行って下さい。

設定の変更:サムネイルを右に表示している場合

メイン画像の右にサムネイルを表示している場合は、webdir/css/right-without.css を編集して下さい。下記例のようなコードがありますので、赤字の部分を、アップロードする予定の画像の中で一番横長の画像に合せて変更して下さい。

/* 表示領域全体 */
.pikachoose {width: 700px; height: 300px; overflow: hidden; margin: 0 auto;}

/* 拡大画像部分 */
.pika-stage {background: transparent; border: transparent; padding: 0 0 0 0; text-align:center; width: 450px; height:300px;}
.pika-stage img{height:100%;}

画像のサイズを変更した時に、サムネイル領域と重なってしまったり離れすぎてしまった場合は、コメントで「表示領域全体」と書いてある部分の青字の width 設定を変更して調整して下さい。

画像の縦横比が指定したサイズの縦横比と一致していない場合、高さを一定(指定されたheight)に揃え、幅は画像の縦横比に伴って変わります。画像によって幅が変わる場合、キャプションや前後リンクのボタンがメイン画像からはみ出てしまう場合がありますので、アップロードする画像の縦横比が一定でない場合は、いくつかテスト用の画像をアップロードしながら調整を行って下さい。

反映と確認

変更したCSSファイルをサーバにアップロードし、ページを再読みして表示を確認して下さい。再構築は不要です。

サムネイルのサイズを変更する

サムネイルのサイズを変更するには、CSSファイルを編集します。この変更は、サムネイル画像の表示位置を決定しCSSファイルを選んだ後に行って下さい。

設定の変更:サムネイルを下に表示している場合

メイン画像の下にサムネイルを表示している場合は、webdir/css/bottom.css を編集して下さい。下記例のようなコードがありますので、サムネイル領域の幅は青字部分を、サムネイルの表示サイズは赤字の部分を望みのサイズに変更して下さい。

正方形でないサイズ設定も可能です。画像の縦横比がサムネイルで指定した縦横比と一致していない場合、指定サイズに入りきらない部分は切り取られて表示されます。

サムネイルが多数ある場合は、領域を縦に伸ばして全てのサムネイルが表示されます。

/* サムネイル領域 */
.pika-thumbs {margin: 17px 0 0 0; padding: 0;width:520px;position:relative;}

/* サムネイル */
.pika-thumbs li{width: 90px; height:90px; margin: 5px 5px 0 0;}

設定の変更:サムネイルを右に表示している場合

メイン画像の右にサムネイルを表示している場合は、webdir/css/right-without.css を編集して下さい。下記例のようなコードがありますので、サムネイル領域の幅は青字部分を、サムネイルの表示サイズは赤字の部分を望みのサイズに変更して下さい。

正方形でないサイズ設定も可能です。画像の縦横比がサムネイルで指定した縦横比と一致していない場合、指定サイズに入りきらない部分は切り取られて表示されます。

サムネイルは左から右、次いで上から下の順番に詰められて表示されますが、サムネイル領域(青字で幅設定)内に表示が収まりきらなかった分のサムネイルは隠れてしまいますので、運用上アップロードされる最大の画像数を考慮してサイズを調整して下さい。

/* サムネイル領域 */
.pika-thumbs {margin: 0 0 0 17px; padding: 0 16px;width:210px;position: absolute;top:0;right: 0;}

/* サムネイル */
.pika-thumbs li{width: 90px; height:90px; margin: 0 0 5px 5px;}

反映と確認

変更したCSSファイルをサーバにアップロードし、ページを再読みして表示を確認して下さい。再構築は不要です。

前後リンクのボタンの表示位置を変更する

前後リンクのボタンの表示位置を変更するには、CSSファイルを編集します。この変更は、サムネイル画像の表示位置を決定しCSSファイルを選んだ後に行って下さい。

編集するCSSファイル

メイン画像の右にサムネイルを表示している場合は、webdir/css/right-without.css を編集して下さい。メイン画像の下にサムネイルを表示している場合は、webdir/css/bottom.css を編集して下さい。設定方法はどちらのファイルも同じです。

前後リンクのボタンの位置の設定方法

CSSファイルに以下のようなコードがあります。「.pika-imgnav a.previous」で開始する行が左向き矢印のボタンの指定、次の「.pika-imgnav a.next」で開始する行が右向き矢印のボタンの指定です。

赤字で示した「top: 50%;」「left: 13px;」「right: 13px;」がそれぞれ、画像領域内(※)での「上から」「左から」「右から」の相対位置を指定していますので、設定を変更して位置を調整して下さい。

※画像領域は青字で示したクラスです。設定内容はサムネイルの表示位置によって少し異なります。

/* 拡大画像部分 */
.pika-stage {background: transparent; border: transparent; padding: 0 0 0 0; text-align:center; width: ***px; height:***px;}

 :(途中省略)

/* 前後リンク */
.pika-imgnav a.previous {background-image: url(../images/prev.png);background-repeat: no-repeat; height: 22px; width: 21px; top: 50%; left: 13px;cursor:pointer;}
.pika-imgnav a.next {background-image: url(../images/next.png);background-repeat: no-repeat; height: 22px; width: 21px; top: 50%; right: 13px;cursor:pointer;}

表示を削除する場合

前後リンクのボタンを表示しない場合は、上記2行の部分を以下のように設定して下さい。

/* 前後リンク */
.pika-imgnav a.previous {display: none;}
.pika-imgnav a.next {display: none;}

反映と確認

変更したCSSファイルをサーバにアップロードし、ページを再読みして表示を確認して下さい。再構築は不要です。

前後リンクのボタンの色を変更する

前後リンクのボタンの色を変更するには、CSSファイルを編集します。この変更は、サムネイル画像の表示位置を決定しCSSファイルを選んだ後に行って下さい。

編集するCSSファイル

メイン画像の右にサムネイルを表示している場合は、webdir/css/right-without.css を編集して下さい。メイン画像の下にサムネイルを表示している場合は、webdir/css/bottom.css を編集して下さい。設定方法はどちらのファイルも同じです。

前後リンクのボタンの色の設定方法

CSSファイルに以下のようなコードがあります。初期設定ではボタンの色は白ですが、コメントとして表示されている行を有効にすると、ボタンの色が変更されます。

/* 前後リンク色選択 */
.pika-imgnav a.previous, .pika-imgnav a.next{
	/* 色の選択(いずれかを選んで入れ替え) */
	background-position: 0 0; /* white */

	/* background-position: 0 -31px; */ /* green */
	/* background-position: -25px -31px; */ /* blue */
	/* background-position: -50px -31px; */ /* red */
	/* background-position: -75px -31px; */ /* orange */
	/* background-position: -100px -31px; */ /* dark */
	/* background-position: -125px -31px; */ /* black */
	/* background-position: 0 0; */ /* white */
}
例えばオレンジ色のボタンにするには、「/* orange */」の行の設定をコピーして使って下さい(下記例)。
/* 前後リンク色選択 */
.pika-imgnav a.previous, .pika-imgnav a.next{
	/* 色の選択(いずれかを選んで入れ替え) */
	background-position: -75px -31px;

	/* background-position: 0 -31px; */ /* green */
	/* background-position: -25px -31px; */ /* blue */
	/* background-position: -50px -31px; */ /* red */
	/* background-position: -75px -31px; */ /* orange */
	/* background-position: -100px -31px; */ /* dark */
	/* background-position: -125px -31px; */ /* black */
	/* background-position: 0 0; */ /* white */
}

反映と確認

変更したCSSファイルをサーバにアップロードし、ページを再読みして表示を確認して下さい。再構築は不要です。

キャプション表示を消す

画像の「キャプション」は、デモでメイン画像の右下に表示されている画像の説明テキストです。管理画面で「画像タイトル」欄に入力した内容が表示されます。この表示を消す場合は、templates/article/article.html を編集して下さい。なお、消さずにデザインを変更する方法は別にご説明します。

templates/article/article.html を開くと末尾近くに以下のような設定があります。

<script language="javascript" type="text/javascript">
$(document).ready(
	function (){
		$("#pikame").PikaChoose({

			autoPlay: true, /* 自動アニメーションをしないなら false */
			speed: 5000, /* 切り替わりのスピード(1個の画像あたりの時間) */
			animationSpeed: 600, /* 切り替わりの素早さ */

			showCaption: true, /* 画像説明を表示しないなら false */

			IESafe: false, /* IE6/7に対応させるなら true */

			thumbOpacity: 0.5, /* サムネイルのぼやけ具合。0-1で数値が大きい方がくっきり  */
			hoverPause: true, /* マウスオーバーしてもアニメーションを止めないなら false  */
			stopOnClick: true /* クリックした後もアニメーションを続行するなら false  */
		});
	});
</script>
上の初期設定では「true」になっている青字部分を「false」にして(下記例)保存して下さい。
showCaption: false, /* 画像説明を表示しないなら false */

反映と確認

templates/article/article.html を編集したら、サーバに上書きアップロードの後、管理画面一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。この操作により最新の設定を反映してページが再度書き出されますので、ブラウザのキャッシュをクリアした後再読み込みして表示を確認して下さい。

キャプションが削除されます。

キャプションのフォントサイズ、色を設定する

キャプションのフォントサイズや色を変更するには、CSSファイルを編集します。この変更は、サムネイル画像の表示位置を決定しCSSファイルを選んだ後に行って下さい。

編集するCSSファイル

メイン画像の右にサムネイルを表示している場合は、webdir/css/right-without.css を編集して下さい。メイン画像の下にサムネイルを表示している場合は、webdir/css/bottom.css を編集して下さい。設定方法はどちらのファイルも同じです。

キャプションのフォントサイズと色の設定方法

CSSファイルに以下のようなコードがあります。下記の設定のうち、下地の設定は青字部分を変更して下さい。下の例だと色は黒(rgb=000)で透明度が65%、枠線の色が「#141414」です。フォントサイズは「11px」(黒太字部分)を変更して下さい。文字色は、「#fafafa」(赤字部分)を変更して下さい。

/* キャプション */
.pika-stage .caption {position: absolute; background: rgba(0,0,0,0.65);  border: 1px solid #141414; font-size: 11px; 
			color: #fafafa; padding: 10px; text-align: right; bottom: 15px; right: 15px;}
	.pika-stage .caption p {padding: 0; margin: 0; line-height: 14px;}

反映と確認

変更したCSSファイルをサーバにアップロードし、ページを再読みして表示を確認して下さい。再構築は不要です。

画像番号のフォントサイズと色を設定する

画像番号は、メイン画像の左下に表示されている番号です。この部分のフォントサイズや色を変更するには、CSSファイルを編集します。この変更は、サムネイル画像の表示位置を決定しCSSファイルを選んだ後に行って下さい。

編集するCSSファイル

メイン画像の右にサムネイルを表示している場合は、webdir/css/right-without.css を編集して下さい。メイン画像の下にサムネイルを表示している場合は、webdir/css/bottom.css を編集して下さい。設定方法はどちらのファイルも同じです。

画像番号のフォントサイズと色の設定方法

CSSファイルに以下のようなコードがあります。下記の設定のうち、下地の設置は青字部分を変更して下さい。下の例だと色は黒(rgb=000)、透明度が65%です。また、文字色は、「white」(赤字部分)を変更して下さい。「#xxxxxx」などの色番号でも指定できます。フォントサイズは「11px」(黒太字部分)を変更して下さい。

/* 画像番号 */
.pika-counter{position: absolute;bottom: 15px;left:15px;color:white;background:rgba(0,0,0,0.65);font-size:11px;padding:3px;-moz-border-radius: 5px;border-radius:5px; width: 2em;}
なお、ページ番号の表示を削除するには、以下のように編集して下さい。
.pika-counter{display: none;}

反映と確認

変更したCSSファイルをサーバにアップロードし、ページを再読みして表示を確認して下さい。再構築は不要です。

さらに詳しく