TOP

フォト画像を横3配列に指定するCSS指定解説...静的作動

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

 

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

 

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

 

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

 

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

 

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

 

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

 


 

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

 

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

 

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

 

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

 


 

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

 

横3列

 


 

導入方法
上例は、横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段で表示してますが、HTML記載を再追加で何段へも増やせます

 

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

 

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記載手順
シリウスをフォトコレクションサイトへカスタマイズ?
トップページ

画像をフォトギャラリー表示とするCSS記載手順関連解説
フォトギャラリー画像に枠内で拡大する動きを付けるカスタマイズ
シリウスサイトに配置したフォトギャラリー画像をクリックすると枠内で拡大する動きを付けるCSS追記をご確認ください