ginzi.com::blog

▼モブログ画像のサムネイル

1.moblog.uva.ne.jp にログインし、最後の画面まで next をクリック。

2.上記の画面に来たら
template → ⑧に↓

<div class=\"photo\">%(imagecontent)s</div>%(caption)s</p>\n<p class=\"rel\">

image template → ⑨に↓

<a href=\"%(imageurl)s\" onclick=\"window.open('%(imageurl)s','popup','width=240,height=320,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=100,top=100');return false\"><img src=\"%(imageurl)s\" class=\"photo\" height=\"160\" width=\"120\" align=\"top\" border=\"0\"alt=\"blog-photo\" /></a>

をコピペ。
以上の作業でモブログ画像のサムネイルは完了です。

ここで注意点をひとつ。

小枠テンプレートの場合、デフォルトスタイルで上から、タイトル → 本文 → 画像となってますが
→
上記のコードをペーストすることにより、タイトル→ 画像 → 本文の順になります。
モブログ画像をサイドバーに表示する為には、この配置が重要になります。

▼画像にフチ(枠)をつける
1.フチ画像をダウンロード&アップロード
ここからフチ画像をダウンロード。
その後、自分のサーバーに画像をアップロード⑳します。
※保存場所は次の作業で必要になりますので忘れないようにして下さい。例) /blog/images/

2.スタイルシートにコード記入
スタイルシートの適当なところに

/* 画像にフチ設定 */
div.img-fuchi {
background-image: url("⑳");
background-repeat: no-repeat;
background-position: bottom right;
margin: 25px 5px 10px 5px;
padding: 0px;
position: relative;
}

div.img-fuchi img {
background-color: #FFFFFF;
border: 1px solid #A9A9A9;
margin: -5px 5px 5px -5px;
padding: 4px;
position: relative;
vertical-align: bottom;
}

と記入して下さい。
⑳の場所はフチ画像を保存したところ。例) ./images/shadow_001.gif

3.コードを追加し画像にフチをつける

<div class="img-fuchi" style="width: ( 画像幅＋10 )px;">画像</div>

｢style="width: ( 画像幅＋10 )px;"｣ を記入するときに元の画像の幅に10足したサイズのコードで画像を括ってあげればフチが付くようになります。それから、自分の場合毎回手動でコードを追加してます。

例)下の画像のコードはこのようになります。

<div class="img-fuchi" style="width: 250px;"><img alt="DVC00018.JPG" src="http://ginzi.com/blog/images/DVC00018.JPG" width="240" height="320" /></div>

詳しい内容は参考サイトさんの方で説明されてますので、そちらを参考にして下さい。