2008年04月15日
★シンプルテンプレートをHack する！ -Case.5-
【第 19 話】 画像付きのバックナンバーを記事の下に表示したい！- 続編 -
★毎日一日一スカウトしてみたら、一年で365 モデルが誕生する。
★ところで、一年前に日本人のモデル探しの仕事を依頼してくれた広告代理店の人は、まだSL をやってるんだろうか？
★とりわけ、初代SEXY SS モデルのドイツの姉さまは、いまだにお色気度全開というワケでして俺の手には負えない始末。
・・・目の保養も済んだことだし、そろそろいつものヤツでもヤリますか？して、本日のお題は「画像付きのバックナンバーを記事の下に表示したい！」の続編です。マイアルバムから抜き取った画像のレイアウトやデザインの仕方についてもう少し見てみることにする。- by Lovely Wolf -
【シンプルテンプレートをHack する！関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e154857.html
# Case 2.<Web URL> http://lovelywolf.slmame.com/e156571.html
# Case 3.<Web URL> http://lovelywolf.slmame.com/e162253.html
# Case 4.<Web URL> http://lovelywolf.slmame.com/e206206.html
★前回は、「マイアルバム」のページでHTML ソースを取り出し、テンプレートカスタマイズ画面で「個別記事」を編集するところまでやった。使ったのは「シンプルテンプレート 2 カラム」で横幅固定のテンプレートだ。
・・・横に4 つ並べられるようだ。
★「シンプルテンプレート 2 カラム(幅100%)」の場合
hmmm...どうやら、こっちは別に何もしなくてもテンプレートの横幅に合わせて画像が表示されるようになっているようだ。・・・ってことは、横幅を指定してあげれば、お好きな数だけ画像を並べるられるってことか？
★前回、テンプレートに貼り付けたHTML ソースをもう一度見てみよう。
<style>
.album{
text-align:center;
}
.album_frame{
float:left;
text-align:center;
padding:5px 3px 10px 3px;
margin:5px 3px;
width:106px;
border-right:1px solid #888;
border-bottom:1px solid #888;
}
.album_image{
overflow:hidden;
width:100px;
height:125px;
}
.album_image img{
height:125px;
margin:auto;
}
.album_title{
overflow:hidden;
width:100px;
height:1.5em;
font-size:10px;
}
.album_title a:link,.album_title a:visited,.album_title a:hover,.album_title a:active{
}
.page_nav{
text-align:center;
}
</style>
<div class="album"><div class="album_frame">
<div class="album_image">
<a href="e162253.html" title="★シンプルテンプレートをHack する！ -Case.3- 2008/04/09 12:25:00" alt="★シンプルテンプレートをHack する！ -Case.3- 2008/04/09 12:25:00">
<img src="//img01.tec29.com/usr/lovelywolf/08040901-s.jpg" title="★シンプルテンプレートをHack する！ -Case.3- 2008/04/09 12:25:00" alt="★シンプルテンプレートをHack する！ -Case.3- 2008/04/09 12:25:00">
</a>
</div>
<div class="album_title">
<a href="e162253.html" title="★シンプルテンプレートをHack する！ -Case.3- 2008/04/09 12:25:00" alt="★シンプルテンプレートをHack する！ -Case.3- 2008/04/09 12:25:00">
★シンプルテンプレートをHack する！ -Case.3-</a></div>
</div>
・
・
・
・ （ここの部分は、画像付きの記事の数だけ繰り返しているだけ）
・
・
<br clear=all>
<div class="page_nav">
</div>
</div>
<style>
.album{
text-align:center;
width:５00px;
}
★では引き続き、並んでる画像の大きさでも変えてみますか？
・・・さわるトコロといえば、さきほどのソース部分にある。画像の縦、横のサイズを150 px ×150 px にしてみた。以下の赤字部分を修正するだけだ。
.album_frame{
float:left;
text-align:center;
padding:5px 3px 10px 3px;
margin:5px 3px;
width:156px;
border-right:1px solid #888;
border-bottom:1px solid #888;
}
.album_image{
overflow:hidden;
width:150px;
height:150px;
}
.album_image img{
height:150px;
margin:auto;
}
.album_title{
overflow:hidden;
width:150px;
height:1.5em;
font-size:10px;
}
・・・ってことで、ブログパーツなんか使わなくとも、なんとかなるというわけさ。
│Comments(0) │【シンプルテンプレート講座】
