無料テンプレート74のギャラリー

無料テンプレート 74 の編集方法です。

ギャラリーとモーダルウィンドウについて

上の画像のように、写真とテキストを掲載できるギャラリーを作成しました。

商品紹介や作品紹介を想定して作成しました。

上の画像のように、写真をクリック（タップ）すると、大きな写真がモーダルウィンドウで表示されます。

ギャラリーの特徴

• 1枚目のサムネイルの横幅が、全ての枠の横幅になります。（サムネイルのサイズは揃えた方が綺麗です）
• 一番高い枠の高さが、全ての枠の高さになります。つまり、サムネイルのサイズが同じなら、最もテキスト量が多い枠の高さで統一されます。
• サムネイルのサイズは自由です。サンプルは、幅 350px 高さ 250px ですが、例えば 幅 250px 高さ 200px などでも構いません。
• 画面幅によって、列数は切り替わります。
• ギャラリー全体は、中央に配置されます。

モーダルウィンドウの特徴

• 写真は画面内に収まります。つまり、スマートフォンで閲覧している場合は小さく表示されますが、パソコンで閲覧している場合は大きく表示されます。（元の写真より大きく表示されることはありません）
• 白い外枠は自動的に追加されます。
• 戻るボタンと進むボタンは、タップしやすいように幅 100px 高さ 100px で作成しました。
• 戻るボタンと進むボタン以外の場所をクリックすると、モーダルウィンドウは閉じます。もちろん、バツボタンをクリックしても閉じます。
• モーダルウィンドウ機能は、オフにもできます。オフにして、サムネイルにリンクを設定することもできます。

モーダルウィンドウの編集方法は、以下の通りです。

<dl class="modal">

<dt><img src="images/candy-free-photo-thumbnail.jpg" alt="サムネイル1"/><p>飴のフリー写真素材です。クリック（タップ）すると、モーダルウィンドウで表示されます。</p></dt>
<dd><img src="images/candy-free-photo.jpg" alt="画像1"/></dd>

<dt><img src="images/konpeito-free-photo-thumbnail.jpg" alt="サムネイル2"/><p>金平糖のフリー写真素材です。</p></dt>
<dd><img src="images/konpeito-free-photo.jpg" alt="画像2"/></dd>

<dt><img src="images/jelly-beans-free-photo-thumbnail.jpg" alt="サムネイル3"/><p>ゼリービーンズのフリー写真素材です。</p></dt>
<dd><img src="images/jelly-beans-free-photo.jpg" alt="画像3"/></dd>

</dl>

<dt> ～ </dt> には、サムネイルを配置します。

<dt> ～ </dt> の <p> ～ </p> には、テキストを入力します。

<dd> ～ </dd> には、モーダルウィンドウで表示する画像を配置します。

<dt> のサムネイルをクリックすると、その下の <dd> に配置した画像がモーダルウィンドウで表示されます。

<dl class="modal"> ～ </dl> は、いくつでも増やすことができます。

つまり、1ページに複数のギャラリーを配置することもできます。

もちろん、ページが重たくなるのを避けるために、別ページにギャラリーを配置しても構いません。

モーダルウィンドウをオフにする方法（script.js の 13行目）
var modal_state = 1; // モーダルウィンドウ ON/OFF[1 = ON][0 = OFF]

モーダルウィンドウ機能をオフにしたい場合は、「1」を「0」に変更してください。

ブロックの増やし方について

ブロックの増やし方が、以前よりシンプルになりました。

ヘッダー（header）とフッター（footer）は、ブロックに含みません。

ブロックを増やしたい場合は、上から順番に番号を並べてください。

block.html のブロック3
<!-- ブロック3 START -->
<div id="block3">
<div class="content_even">
<div id="max_width3">
<article id="content3">
<div class="bg-text3">

<!-- 内容 START -->
<h1><img src="images/h1-icon.png" alt="飾り"/> ブロック3 <img src="images/h1-icon.png" alt="飾り"/></h1>
<p class="img_450_left"><img src="images/marshmallow-free-photo-450.jpg" alt="マシュマロのフリー写真素材1"/></p>
<p>ブロックは増やすことも減らすこともできますが、ブロックの番号は上から順番に並べてください。</p>
<!-- 内容 END -->

</div><!-- bg-text3 -->
</article>
</div><!-- max_width3 -->
</div><!-- content_even -->
</div><!-- block3 -->
<!-- ブロック3 END -->

ブロック3 をコピー＆ペーストして、ブロック4 を作成するとします。

ブロック3 をコピーして、ブロック3 とフッター（footer）の間に貼り付けます。

block.html にブロック4 を作成
<!-- ブロック4 START -->
<div id="block4">
<div class="content_odd">
<div id="max_width4">
<article id="content4">
<div class="bg-text4">

<!-- 内容 START -->
<h1><img src="images/h1-icon.png" alt="飾り"/> ブロック4 <img src="images/h1-icon.png" alt="飾り"/></h1>
<p class="img_450_right"><img src="images/marshmallow-free-photo-450.jpg" alt="マシュマロのフリー写真素材1"/></p>
<p>ブロックは増やすことも減らすこともできますが、ブロックの番号は上から順番に並べてください。</p>
<!-- 内容 END -->

</div><!-- bg-text4 -->
</article>
</div><!-- max_width4 -->
</div><!-- content_odd -->
</div><!-- block4 -->
<!-- ブロック4 END -->

数字の 3 を 4 に変更すると、ブロックのフェードイン（マウス環境のみ）が正しく動作します。

content_even と content_odd を交互にすると、背景色も交互になります。

img_450_left から img_450_right に変更すると、テキストの回り込みが交互になります。

<!-- --> の間はコメント（処理に影響がないメモ書き）なので、変更しなくても構いませんが、変更しておくとコードが見やすくなると思います。

ブロックのフェードインは、オフにすることもできます。（ブロックのフェードインは、マウス環境のみで動作します。タッチデバイスでは、最初からオフです。）

ブロックのフェードインをオフにする方法（script.js の 12行目）
var content_state = 1; // content の非表示・表示[1 = ON][0 = OFF]

フェードイン機能をオフにしたい場合は、「1」を「0」に変更してください。

当サイトの無料テンプレートがお役に立ちましたら幸いです。