Portfolio作品集（※タイプ１。lightbox版）
ここのサムネイル画像は、長方形であっても正方形にトリミングされるようになっています。
リンク（aタグ）を指定しないと画像が表示されないので注意して下さい。
もし、リンクを一切使わずサムネイルだけ出しておきたいなら、aタグをdivタグに置き換えて（<div>〜</div>）、style.cssの
.list-square .list aを、.list-square .list divにすればOKです。
lightboxの使い方
サムネイル画像をクリックすると、画面が暗転してポップアップが開きます。
海外で配布されているプログラムなので、カスタマイズなどには当サイトでは対応していません。ご自身でGoogle検索などかけてみて下さい。
画像を増やしたい場合
基本的にはご利用のテンプレートのhtml側のパーツをコピペして増やしてみて下さい。
以下のタグのようにポップアップで大きく表示される画像はaタグ内で読み込み、サムネイル画像（小さな画像）はimgタグで読み込まれています。
このテンプレートではどちらの画像も同じ画像を使っていますが、それぞれ別の画像を配置して頂いても構いません。
<a href="images/1.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="images/1.jpg" alt="">
</a>
グループ
data-lightbox="group1"
は、ポップアップで表示した場合に次の画像へ繋ぐグループの設定です。
「group1」部分は好きに変更して頂いて構いません。
同じグループ名がついている場合に次の画像へのリンク矢印が出ます。グループごとに見て欲しい場合はこのグループ名を変更しておくといいでしょう。
<a href="images/1.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="images/1.jpg" alt="">
</a>
ポップアップ時のコメント
data-title="タイトルをここに入れます"
は、lightboxで暗転表示された際に写真下に表示されるテキストです。
よく分からない場合は実際に設定して動作を確認してみて下さい。不要ならタグごと削除してもらえばOKです。
<a href="images/1.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="images/1.jpg" alt="">
</a>
lightboxを使う為に必要なタグ、ファイル類。
cssフォルダのstyle.css冒頭で読み込んでいる「lightbox.cssの読み込み」のブロック。
html下部で読み込んでいる「lightbox用jsファイルの読み込み」のブロック。
何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、上記のバージョンを変更して動作するか確認してみて下さい。
Portfolio作品集（※タイプ２）
最初の２つがリンクつき、文字あり。残りの２つがリンクなし、文字なし。
用途に応じて使い分けて下さい。