WOODSTOKr

一覧ページの画像の縦横比

ナルセ探偵事務所のアキラです。昨日の日誌は事件簿というより挨拶でした。今日は備忘メモ。
あなたもカスタマイズしたいと思っているなら、参考にしてください。

このサイトはおてもやんブログで用意されている「2カラム　青いインク」テンプレートを使っています。
一覧ページで、CDのカヴァーが並ぶようにしています。でも、そのままでは横幅が伸びた写真になってしまうので縦横の比率を同じになるようにカスタマイズ。
変更箇所は二箇所の数値。スタイルシートを読んでいくと、随分と後ろの方にブログ記事の本体部分の項目『/*blog*/』に『photo_box』というクラスを発見。画像ファイルの img に『photo_box』クラスが指定されていて、横幅（width）が250px（ピクセル）としてあるので、高さ（height）も同じに。これだけでは画像が枠から突き出てしまいます。それで枠も差分だけ高さにプラスして357pxにしました。

赤色で表示している部分です。途中のスタイルシートは省略しました。

/*ink_blue*/
@charset "UTF-8";

//省略//

/*container*/

//省略//


/*blog*/

.photo_box{
width :252px;
height :357px;
overflow :hidden;
margin: 7px 5px 5px 5px;
padding: 3px 12px 3px 12px;
border: 1px solid #CCCCCC;
float: left;
}
.photo_box img{
width :250px;
height :250px;
margin-top: 10px;
margin-bottom: 3px;
border: 1px solid #CCCCCC;
background-image: url(http://www.otemo-yan.net/_img/photo/ink_blue/point.gif);
background-repeat: no-repeat;
background-position: center center;
margin-right: auto;
margin-left: auto;
}
.photo_box h3.ptitle{
display :block;
width :230px;
height :13px;
font-size :12px;
overflow :hidden;
font-weight :normal;
margin-top: 10px;
margin-right: 7px;
margin-bottom: 10px;
margin-left: 10px;
}

.photo_box h2.pdate{
font-size :9px;
text-align: right;
}

こう変更した場合は、もちろんアップロードする画像は縦横比が同じにしなくちゃいけません。そうでないと、今度は縦に伸びて表示されることになるよ。(A)