2005年9月16日
画像で作成した枠で囲む(CSSヴァージョン)
今回は、「画像で作成した枠で囲む(CSSヴァージョン)」方法について説明します。
画像を利用すると、下の完成サンプルのように、角が丸い枠で囲むことができます。今回は、CSSを利用して作成する方法を説明します。
■ 完成サンプル
では、エントリー部分を画像で作成した枠で囲む方法を例にして説明します。
1. 画像枠を作成する
まず、画像を使用して枠を作成します。
作成方法は、画像を利用した枠の作成(CSSヴァージョン)を参考にしてください。
2. 画像をアップロードする
作成した画像をサーバーにアップロードします。
画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。
3. CSS(スタイルシート)を編集する
次に、「スタイルシート」を編集します。下記の記述を追加します。
<スタイルシート>
横幅、画像URL、画像の高さは、使用する画像にあわせて、記入してください。
4. HTMLを編集する
次に、「メインページ」「カテゴリー・アーカイブ」「個別エントリーアーカイブ」「日付アーカイブ」を編集します。
編集方法は、各テンプレートの <MTEntries>~</MTEntries>で囲まれた部分(省略部分)を、挟むように記述します。
赤い文字が追加する記述です。
<メインページ、カテゴリ、個別エントリー、日付アーカイブ>
編集後は保存して再構築すると完了です。
テーブルヴァージョンと比べると、かなり記述が少なくて、すっきりしていますね。
ブログランキングに参加中です。応援お願いします。
画像を利用すると、下の完成サンプルのように、角が丸い枠で囲むことができます。今回は、CSSを利用して作成する方法を説明します。
■ 完成サンプル
|
||||||
| カスタマイズ方法(MovableType編) |
では、エントリー部分を画像で作成した枠で囲む方法を例にして説明します。
1. 画像枠を作成する
まず、画像を使用して枠を作成します。
作成方法は、画像を利用した枠の作成(CSSヴァージョン)を参考にしてください。
2. 画像をアップロードする
作成した画像をサーバーにアップロードします。
画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。
3. CSS(スタイルシート)を編集する
次に、「スタイルシート」を編集します。下記の記述を追加します。
<スタイルシート>
| .Box{ width:xxpx; background:url(画像(中央)URL) #ffffff repeat-y; } .BoxTop{ background:url(画像(上辺)URL) top left no-repeat; margin-top:0px; height:xxpx; } .BoxBottom{ background:url(画像(下辺)URL) bottom left no-repeat; margin-bottom:0px; height:xxpx; } |
横幅、画像URL、画像の高さは、使用する画像にあわせて、記入してください。
4. HTMLを編集する
次に、「メインページ」「カテゴリー・アーカイブ」「個別エントリーアーカイブ」「日付アーカイブ」を編集します。
編集方法は、各テンプレートの <MTEntries>~</MTEntries>で囲まれた部分(省略部分)を、挟むように記述します。
赤い文字が追加する記述です。
<メインページ、カテゴリ、個別エントリー、日付アーカイブ>
| <MTEntries> <div class="Box"> <div class="BoxTop"></div> (省略) <div class="BoxBottom"></div> </div> <br> </MTEntries> |
編集後は保存して再構築すると完了です。
テーブルヴァージョンと比べると、かなり記述が少なくて、すっきりしていますね。
ブログランキングに参加中です。応援お願いします。
パーマリンク | 投稿者 りっち | 2005年9月16日 16:00
|
|
はてなブックマークに追加
|
Yahooブックマークに登録
関連記事
トラックバック
このエントリーのトラックバックURL:
コメント
コメントしてください
