フォト画像のコレクション配列を横3列例です..レスポンシブ作動はPC画面を
狭めてご確認くださいね...

 

この配列は、フォトコレクションサイトとしての専用サイトを作るとき...
もしくは、ページ内でのフォトページ使えるかと思います..

 

また、当ページは、DEMOの意味合いでエントリーPでの表示、イチカラム仕様で表しておりますが、
2カラム採用の際は、記事幅も狭くなるので画像の横幅を狭め合わせ調整ください..

 

縦の配列は2段にしていますが、記載追加で幾段も追加は可能..
スマートフォンデバイスでは、縦一列に自動で並び替え...
横のスペースは画像のサイズを小さくすることで、広げられます

 

当解説では、ノーマル型、単にタイル形式に並べるだけ...で、あまり面白くないじゃん？
と、思われる例も多々あるでしょうね.....それぞれ考えましょか...

 

画像マウスオーバーでいろんな動きを付ける際は、CSSを追加としますが
関連ページで作動を含めての仕様は追加してまいります
巻末でご確認ください

 

当ページの解説は、親ページからの連動となっていますので、意味不明と思われましたら、
以下よりご確認願います
シリウスをフォトコレクションサイトへカスタマイズ？

 

---

 

エラー障害がございます
2017　0710
当スクリプトを導入した際、多くでは影響はないと思われますが、ページの
右下に現れる、戻りスクロールボタンの背景がＴＯＰフォントとずれる障害を
数日前に発見した次第...今まで気が付かずで申し訳ございません

 

この障害は、当サイト解説のページのトップに戻るスクロールボタンを取り付ける手順解説
を導入例でみられる症状...以外では多分影響はなし?

 

当サイトは、当ページのみのフォト表示なのでＣＳＳをスタイルシートの割り込みへの
記載ですので、他ページでは障害が関連しませんが、スタイルシート書き足しにしますと
サイト全体に現れます

 

現段階、原因がＣＳＳ指示記載と確認はできておりますが、如何せん難易な仕様で
障害対処ができて降りませんので、フォトサイト等を作成する際は他の戻りボタンをご使用ください

 

---

 

では、導入へと進みましょう...以下のレイアウトを見てください..

 

横3列

 

---

 

導入方法
上例は、横３配列ですが画像をサイズ小さくして幾つでも増やせます
しかし、見た目の限界もあるので調整は自己判断で...

 

CSSはとりあえず、後々のことをを踏まえて横5列まで配置できるよう各指定を組み込んでいます
これだけをCSSに入れとけば、数調整はHTMLだけでOK...なんですね
ですので、まとめて入れ込んでおいてください..

 

ステップ1

 

スタイルシートにCSS追加...ただし、当ページもそうですがエントリーページだけで
単独で発動させるなら、スタイルシートの割り込みに追加すればこと済みます

 

ここから
/*paddingとborder の幅を要素の幅と高さに含める*/
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.wrap{
width: 100%;
}
.contents-wrap{
padding-left: 20px;
width: 100%;
max-width: 1260px;
margin: 0 auto;
}
.contents-wrap > div{
float: left;
margin-bottom: 20px;
padding-right: 20px;
}
.contents-inner-3{
width: 33.33333%;
}
.contents-inner-4{
width: 25%;
}
.contents-inner-5{
width: 20%;
}
.contents-wrap:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.photogallery-3{
height: 200px;
background: #4EFFFF;
}
.photogallery-4{
height: 200px;
background: #4EFFFF;
}
.photogallery-5{
height: 200px;
background: #4EFFFF;
}
@media screen and (max-width: 960px) {
.contents-inner-3{
width: 50%;
}
.contents-inner-4{
width: 33.33333%;
}
.contents-inner-5{
width: 25%;
}
}
@media screen and (max-width: 764px) {
.contents-inner-3{
width: 50%;
}
.contents-inner-4{
width: 50%;
}
.contents-inner-5{
width: 33.33333%;
}
}
@media screen and (max-width: 480px) {
.contents-inner-3{
width: 100%;
}
.contents-inner-4{
width: 100%;
}
.contents-inner-5{
width: 100%;
}
}
ここまで～

 

スタイルシートCSSはこれで終わり

---

 

HTML記載...ページ内に書き足しますね

 

注意　画像のサイズは、縦横とも数値指定してください
でないと、バランスが取れません

 

上例は、当サイトの横幅が1000Pxなので以下にしてますが
style=height:200px;width:290px;
900Pxでしたら、画像の横サイズは250～60ほどが良いかと...

 

表示後の背景とのずれが見られる場合は、以下画像コードのサイズを
書き換え調整下さい

 

例は2段で表示してますが、ＨＴＭＬ記載を再追加で何段へも増やせます

 

画像コードのみ書き換えてください

 

3列例

 

<div class="contents-wrap">
<div class="contents-inner-3">
<div class="photogallery-3">
<img src="<% pageDepth %>img/pexels-photo-201872.jpg" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-3">
<div class="photogallery-3">
<img src="<% pageDepth %>img/nature-sunset-person-woman.jpg" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-3">
<div class="photogallery-3">
<img src="<% pageDepth %>img/pexels-photo-207962.jpg" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-3">
<div class="photogallery-3">
<img src="<% pageDepth %>img/pexels-photo-289222.jpg" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-3">
<div class="photogallery-3">
<img src="<% pageDepth %>img/pexels-photo-235514.jpg"style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-3">
<div class="photogallery-3">
<img src="<% pageDepth %>img/pexels-photo-24507.jpg" style="height:200px;width:290px;" alt="" />
</div>
</div>
</div>

 

 

---

 

横4列
<div class="contents-wrap">
<div class="contents-inner-4">
<div class="photogallery-4">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-4">
<div class="photogallery-4">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-4">
<div class="photogallery-4">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-4">
<div class="photogallery-4">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-4">
<div class="photogallery-4">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-4">
<div class="photogallery-4">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-4">
<div class="photogallery-4">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-4">
<div class="photogallery-4">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
</div>

 

 

横5列
<div class="contents-wrap">
<div class="contents-inner-5">
<div class="photogallery-5">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-5">
<div class="photogallery-5">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-5">
<div class="photogallery-5">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-5">
<div class="photogallery-5">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-5">
<div class="photogallery-5">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-5">
<div class="photogallery-5">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-5">
<div class="photogallery-5">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-5">
<div class="photogallery-5">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-5">
<div class="photogallery-5">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
<div class="contents-inner-5">
<div class="photogallery-5">
<img src="<% pageDepth %>画像コード" style="height:200px;width:290px;" alt="" />
</div>
</div>
</div>
</div>

 

---

 

お勧めカスタマイズ...動きを与える

 

画像をマウスオーバーで枠内に限りますが、拡大する動きを付け加えることで
サイトイメージの演出効果が増します...実感あり？
CSS指定手順を追加しております...
ただし、同じページに二つの実動例掲載はきついので以下関連記事に
追記しており...ご覧ください

 

---

 

スポンサーリンク

 

 

画像をフォトギャラリー表示とするCSS記載手順
シリウスをフォトコレクションサイトへカスタマイズ？
トップページ