新着記事
2007年09月21日

画像回り込みのカスタマイズ(Seesaaブログ)

Seesaaブログのテンプレートに何度も手を加え、カスタマイズし続けてています。
※元のテンプレートはライトグレー(左サイドバー)です。
今回のカスタマイズは…

画像にテキストを「回り込み」させたときに、画像とテキストの間に余白を設けるようにスタイルシートで指定
記事タイトルの背景画像を変更
記事欄の一番下に「人気ブログランキング」のバナーが自動で挿入するように、HTMLページを改変
デフォルトでは日付にh2(見出し2)タグが当てられていたのを外し、h3(見出し3)だった記事タイトルをh2に変更

以下にカスタマイズの仕方を説明します。

画像にテキストを「回り混み」させたときに、画像とテキストの間に余白を設けるようにスタイルシートで指定する

Seesaaブログでは画像の貼りこみ・レイアウトはボタンひとつで簡単に出来るようになっています。私は「レイアウト無し」か「左回り込み(画像の右側に文章を回り込ませる)」を選択し、「右回り込み(画像の左側に文章を回り込ませる)」にする場合はないので、「左回り込み」の場合だけの余白指定をしました。

メニューの〔デザイン〕→〔デザイン一覧〕からスタイルシートを開きます。以下のclass指定を加えます。場所はどこでも構いませんが、間違えないよう最後が良いでしょう。

.image{
margin-right : 20px;
margin-bottom : 5px;
}


class名「.image」は自由に変えて構いません(半角英数で)。
「margin-right : 20px;」というのは右側に20ピクセルのマージンという意味です。利用しているテンプレートのフォントの大きさとのバランスがあるので、数値はいろいろ変更してみてください。読みやすくするには、10px〜20pxが適当だと思います。
「margin-bottom : 5px;」で、(画像の)下に5pxの余白を指定していますが、この指定はしなくても構いません。利用しているテンプレートの行間が狭い場合や、画像の周囲の余白をゆとりをもって取りたい場合は加えます。数値もお好みで変更可能です。

「右回り込み」の場合の余白をしたいのなら、「margin-right : 20px;」は「margin-left : 20px;」になります。両方指定しておきたいなら、


.image_left{
margin-right : 20px;
margin-bottom : 5px;
}
.image_right{
margin-left : 20px;
margin-bottom : 5px;
}


上記のように別個に指定します。

スタイルシートでの指定が終ったら、記事の編集画面でhtmlでの指定をします。テキスト形式での編集画面で、画像の貼りこみをすると、タグが生成されて編集画面に書き込まれます。

<img src="(画像のURL)/image/07.09.21.gif"
width="***" height="***" border="0" align="left"
alt="△△△.gif" />


「alt="△△△.gif" />」の部分に「class="image"」を書き加えます。

<img src="(画像のURL)"
width="***" height="***" border="0" align="left"
alt="△△△.gif" class="image" />



「記事タイトルの背景画像を変更」「記事欄の一番下にランキングバナーを自動で挿入」「見出しタグを入れ替える」カスタマイズについては、次の記事で説明します。

※カスタマイズについて書いた過去記事
カスタマイズのための参考サイト(2007.03.18)
Seesaaブログのカスタマイズ(2007.03.17)
ファビコン設置(2007.03.05)
ブログでの画像の使い方(回り込みなど)(2006.11.08)
ブログのデザインカスタマイズ(2006.01.03)

拍手してくださるとうれしいです→ 拍手する

このエントリーをはてなブックマークに追加
posted by Masako at 17:00 | Comment(0) | TrackBack(0) | Seesaaブログのカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
最近のトラックバック