フォトギャラリー ページのカスタマイズ

先月のブログの「スタイルシートで写真装飾　その１？」では、【 みんカラ 】ブログで複数の写真を貼り付ける際などに、コンテンツ表示幅に合わせてリサイズ表示させたり、【 みんカラ 】のフォトギャラリーのページのように、「リサイズ表示した画像をクリックしたら元画像が開き、元画像をクリックしたらそのウィンドウを閉じる」ようにする方法を紹介しましたが、今回はフォトギャラリーのページの写真をコンテンツ表示幅いっぱいの大きさに表示させる方法を紹介します。
今回は、カスタムスタイルシートを使用している人限定の話になりますので【 みんカラ 】標準のスタイルシートを使用している方はご利用出来ませんのであしからず。

まずフォトギャラリーのページのスタイル変更するには、ログインしてマイページ ＞ スタイルシート ＞ スタイルシート詳細編集 ＞ 愛車紹介 のページに進みます。
■ ユーザーコンテンツ(愛車紹介)のページ下にある

ギャラリータイトル div.galleryTitle	background:#333; color:#eee; font-weight:bold; margin-bottom:1em; padding:3px 10px; clear:both;
ギャラリー作業日 div.workDate	text-align:right; padding-top:5px; margin-bottom:1em; width:100%; font-size:12px; background:#000 url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/line.gif) repeat-x top;
ギャラリー写真 div.galleryPhoto	width:50%; overflow:hidden; float:left; margin:0 0 15px 0;
ギャラリー本文 div.galleryMemo	width:50% float:right; margin:0 0 15px 0;

がフォトギャラリー ページのスタイル指定する部分です。

ギャラリータイトルというのは、投稿した各写真の上部にある１～８の数字がついた帯部分のスタイルを指定するところです。
ギャラリー作業日というのは、投稿日 : 2009年○月○日 部分のスタイルを指定するところです。
ギャラリー写真というのは、投稿した各写真部分のスタイルを指定するところです。
ギャラリー本文というのは、説明文 部分のスタイルを指定するところです。

上記の表は、「みんカラブラック」を基にした基本スタイルの例です。
通常、左半分に写真、右半分に説明文がくる様になっていますが、これをギャラリータイトルの下にコンテンツ表示幅に合わせたサイズの写真、その下に説明文が来るようにします。

まずは、ギャラリー写真の欄にあるfloat:left;とoverflow:hidden;を削除し、width:50%をwidth:110.7%;にします。
つぎに、ギャラリー本文の欄にあるfloat:right;を削除し、width:50%をwidth:100%;にします。
これで写真も説明文もコンテンツ表示幅に合わせたサイズに表示することができるようになると思います。
但し、こうする事でデメリットが生じることもあります。それはアップロードする画像の幅が580ピクセル以下の場合は元画像より引き伸ばして表示することになるので、その分画像が荒くなる事です。（幅580px以上のサイズでアップロードすれば問題はありませんが）

写真の表示サイズをもう少し小さくして左右の余白をつけたい場合は、ギャラリー写真の欄にtext-align:center;を追加し、width:100%;位にすると良いと思います。
説明文 部分の左右の余白をつけたい場合は、ギャラリー本文の欄のmargin:0 0 15px 0;をmargin:0 auto 15px;に変更して、width:90%;位にすると良いでしょう。

【 みんカラ 】のスタイルシート変更例

ギャラリータイトル div.galleryTitle	background:背景色; color:文字色; font-weight:bold; margin-bottom:1em; padding:1px 10px; clear:both;
ギャラリー作業日 div.workDate	text-align:right; padding-top:5px; margin-bottom:1em; width:100%; font-size:12px; background:背景色 url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/***/line.gif) repeat-x top;
ギャラリー写真 div.galleryPhoto	width:100%; margin:0 0 10px; text-align:center;
ギャラリー本文 div.galleryMemo	width:90%; margin:0 auto 15px;

※スタイル変更する前に変更前のスタイルシートをバックアップしておく事をお勧めします。（後で元のスタイルに戻し易いので）
やり方は、
マイページ ＞ スタイルシート ＞ スタイルシート詳細編集 ＞ スタイルの操作
■CSSファイル書き出し
書き出しのボタンを押して、保存されているスタイルをCSSファイルとして書き出します。
『custom.css』という名で保存されるファイルがそのスタイルシートです。
元のスタイルに戻したいときは、このファイルを読み込み、保存します。