info
jugem用テンプレートを配布しています(ロリポブログでも使用可>>カスタマイズ必要箇所あり)。テンプレート一覧などかんたんにまとめてありますので上部メニューの"template"をクリックでご覧下さい。さらなる詳細はそれぞれエントリーにて個別に記載してあります。
記:2008/12/20
---
▼htmlにて:
<!-- recommend -->
<div id="menu06" class="menu06">
<!-- BEGIN amazon -->
<div class="menu_rec">
<dl>
<dd><a href="{amazon_url}" target="_blank"><img border="0" src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName}" class="amazon_pict" /></a></dd>
<dd><ul>
<li><a href="{amazon_url}" target="_blank">{amazon_ProductName}</a></li>
<li>{amazon_Creator}</li>
<li class="review">{amazon_comment}</li>
</ul></dd>
<dt>Recommend</dt>
</dl>
</div>
<!-- END amazon -->
</div>
<!-- /recommend/ -->
▼cssにて:
[A]
#menu02 dl, #menu03 dl, #menu04 dl, #menu06 dl { margin: 10px; }
[B]
#menu02 dl, #menu03 dl, #menu04 dl { margin: 10px; }
[C---utf公開カラー]
/* recommend ここから */
#menu06 dd {
font-size: 10px;
padding: 0;
text-align: center;
}
#menu06 li.review {
color: #555555;
padding-top: 5px;
text-align: left;
list-style-type: none;
}
#menu06 ul {
line-height: 150%;
margin: 0;
padding: 5px 10px;
list-style-type: none;
height: 65px !important;
overflow: auto !important;
}
#menu06 .menu_rec dl { margin: 10px 0px 10px 9px;}
.menu_rec {
width: 195px;
float: left;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-base-color: #a1c1d4;
scrollbar-face-color: #a1c1d4;
scrollbar-highlight-color: #a1c1d4;
scrollbar-shadow-color: #a1c1d4;
scrollbar-3dlight-color: #a1c1d4;
}
#menu_list_box .menu06 {
overflow: hidden;
}
#menu_list_box .menu06:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}
/*¥*/
* html #menu_list_box .menu06 {
height: 1em;
overflow: visible;
}
/**/
/* recommend ここまで */
[C---カスタマイズサンプル: def]
/* recommend ここから */
#menu06 dd {
font-size: 10px;
padding: 0;
text-align: center;
}
#menu06 li.review {
color: #888888;
padding-top: 5px;
text-align: left;
list-style-type: none;
}
#menu06 ul {
line-height: 150%;
margin: 0;
padding: 5px 10px;
list-style-type: none;
height: 65px !important;
overflow: auto !important;
}
#menu06 .menu_rec dl { margin: 10px 0px 10px 9px;}
.menu_rec {
width: 195px;
float: left;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-base-color: #a5b4c5;
scrollbar-face-color: #a5b4c5;
scrollbar-highlight-color: #a5b4c5;
scrollbar-shadow-color: #a5b4c5;
scrollbar-3dlight-color: #a5b4c5;
}
#menu_list_box .menu06 {
overflow: hidden;
}
#menu_list_box .menu06:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}
/*¥*/
* html #menu_list_box .menu06 {
height: 1em;
overflow: visible;
}
/**/
/* recommend ここまで */
[C---カスタマイズサンプル: soft]
/* recommend ここから */
#menu06 dd {
font-size: 10px;
padding: 0;
text-align: center;
}
#menu06 li.review {
color: #888888;
padding-top: 5px;
text-align: left;
list-style-type: none;
}
#menu06 ul {
line-height: 150%;
margin: 0;
padding: 5px 10px;
list-style-type: none;
height: 65px !important;
overflow: auto !important;
}
#menu06 .menu_rec dl { margin: 10px 0px 10px 9px;}
.menu_rec {
width: 195px;
float: left;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-base-color: #bbdddd;
scrollbar-face-color: #bbdddd;
scrollbar-highlight-color: #bbdddd;
scrollbar-shadow-color: #bbdddd;
scrollbar-3dlight-color: #bbdddd;
}
#menu_list_box .menu06 {
overflow: hidden;
}
#menu_list_box .menu06:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}
/*¥*/
* html #menu_list_box .menu06 {
height: 1em;
overflow: visible;
}
/**/
/* recommend ここまで */
[C---カスタマイズサンプル: pastel]
/* recommend ここから */
#menu06 dd {
font-size: 10px;
padding: 0;
text-align: center;
}
#menu06 li.review {
color: #888888;
padding-top: 5px;
text-align: left;
list-style-type: none;
}
#menu06 ul {
line-height: 150%;
margin: 0;
padding: 5px 10px;
list-style-type: none;
height: 65px !important;
overflow: auto !important;
}
#menu06 .menu_rec dl { margin: 10px 0px 10px 9px;}
.menu_rec {
width: 195px;
float: left;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-base-color: #c7d9d9;
scrollbar-face-color: #c7d9d9;
scrollbar-highlight-color: #c7d9d9;
scrollbar-shadow-color: #c7d9d9;
scrollbar-3dlight-color: #c7d9d9;
}
#menu_list_box .menu06 {
overflow: hidden;
}
#menu_list_box .menu06:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}
/*¥*/
* html #menu_list_box .menu06 {
height: 1em;
overflow: visible;
}
/**/
/* recommend ここまで */
---
>>Recommendの商品名の下にレビューが表示されるようにしてあります(※管理画面のオススメ商品リスト(サイド)にてレビュー(ひと言コメント)を書いた場合)。
>>商品名からレビューまでを高さを65pxに指定してあるのでそれを超えるとスクロールされます // 高さを変えたい方は上記[C]内にある#menu06 ul{〜}内のheightの数値を変更してください。
Comments