画像一覧表示!wordpressの画像をタイル状に並べる

wordpress-imagelineup

画像がタイル状にずらっと並んでいるアーティストページやショッピングサイトを見かける事があると思う。そんなページを作成する。

画像をタイル状に並べる準備をする

画像をタイル上に並べるにはstyle.cssを使用する。以下のコードをstyle.cssの下部に追加しよう。

/* サムネイル画像をタイル状に並べる */
ul.boxline {
    padding-left: 0!important;
    text-align: left;
    margin: 0 0 15px;
}

ul.boxline li {
    width: 170px;/* 画像枠の幅 */
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    word-wrap: normal;
    font-size: 12px;
    line-height: 1.2;
    margin: 0;
    padding: 2px;
}

ul.boxline li img {
    display: block!important;
    border: 1px solid #d0a600!important;
    height: 165px!important;/* 画像の高さ */
    width: 165px!important;/* 画像の幅 */
    margin: 2px!important;
    padding: 2px!important;
}

画像枠の幅、画像の高さ、画像の幅は自由に変えて欲しい。

今回は記事部分の横幅が540pxである時に、一列に3つずつ画像を並べていくように設定してある。

具体的に説明すると、記事部分の横幅が540px。そこで少し横幅に余裕を持たせるように540pxから30pxを引いて510px。それを一列に並べる画像数の3で割った値が170px。

ようするに、

(540-30)/3=170px

これが”画像枠の幅“だ。

画像の幅“は、画像枠の幅より少し小さくして画像同士がくっつかないようにするため165pxにしてある。また正方形の画像をタイル状に並べて綺麗に見せるため”画像の高さ“も165pxにしてある。

また、記事部分の横幅の変更方法は、

TwentyTwelve・全体のカスタマイズ

の”コンテンツ全体、記事やサイドバーの幅の調整をする“を参照して欲しい。

これで準備が整った。

画像をタイル状に並べる

実際に”記事の投稿画面“で記事に画像を貼り付けよう。そして、テキストエディタを使って貼り付けた”画像のコード“を”boxlineクラス属性を持った<ul>タグ“そして”<li>タグ“で囲む。

具体的にはこのようになる。

<ul class="boxline">
	<li>画像のコード1</li>
	<li>画像のコード2</li>
</ul>

これは2つの画像をタイル状に並べた時の例だ。このようにしてたくさんの画像をタイル状に並べる事ができる。

これは6つの画像をタイル状に並べた時の例だ。

wordpressの画像をタイル状に並べる

これで画像をタイル状に並べる事ができた!