2005年7月31日
背景画像の表示
今回は、背景に画像を表示する方法について説明します。手順通りにすれば簡単にカスタマイズすることができますので、是非、チャレンジしてくださいね。
背景画像のカスタマイズ方法として、ページ全体の背景に画像を表示する方法を例にして説明します。
1. 画像ファイルのアップロード
背景画像(gifやjpegファイルなど)をサーバーにアップロードします。
画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。
2. CSS(スタイルシート)の編集
次に、「スタイルシート」を編集します。
デフォルト・テンプレートの場合、下記ように編集すると、ページ全体の背景に画像を表示することができます。
<スタイルシート>
下記のように修正します。
背景画像を指定するには、background-image というプロパティを使用します。値には、背景画像で使用するURLを指定します。
<スタイルシート>
下記のプロパティを使用すると、画像の並べ方や表示位置なども指定できます。
■ 背景画像の並び方を指定
<記述例>
■ 背景画像の表示位置を指定
<記述例>
■ 背景画像の固定配置を指定
<記述例>
背景画像の表示方法について、ページ全体の背景画像を表示方法を例として説明しましたが、バナー部分やサイドバー部分などで背景画像を表示する場合は、その該当クラスで、background-image プロパティを追加します。
MovableTypeで使用されているクラス、セレクタはMovableTyoeのスタイルシート解析を参考にして、背景画像を表示させたいクラスを編集してください。
以上、背景画像を表示する方法について説明しました。
ブログランキングに参加中です。応援お願いします。
| ページ全体の背景に画像を表示するには |
背景画像のカスタマイズ方法として、ページ全体の背景に画像を表示する方法を例にして説明します。
1. 画像ファイルのアップロード
背景画像(gifやjpegファイルなど)をサーバーにアップロードします。
画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。
2. CSS(スタイルシート)の編集
次に、「スタイルシート」を編集します。
デフォルト・テンプレートの場合、下記ように編集すると、ページ全体の背景に画像を表示することができます。
<スタイルシート>
| body { background-color: #8FABBE; } |
下記のように修正します。
| body { background-image : url("画像のパス"); ←追加 } |
| 背景画像の指定 : background-image |
背景画像を指定するには、background-image というプロパティを使用します。値には、背景画像で使用するURLを指定します。
<スタイルシート>
| body { background-image : url("画像のパス"); } |
| 背景画像関連の指定 |
下記のプロパティを使用すると、画像の並べ方や表示位置なども指定できます。
■ 背景画像の並び方を指定
<記述例>
| background-repeat : repeat-y; |
| 値 | 意味 |
| repeat | 背景画像は縦横タイル状に並べられます。 |
| repeat-x | 背景画像は横方向のみに繰り返して並べられます。 |
| repeat-y | 背景画像は縦方向のみに繰り返して並べられます。 |
| no-repeat | 背景画像は繰り返されずにひとつだけ表示されます。 |
■ 背景画像の表示位置を指定
<記述例>
| background-position : left top; |
| 値 | 意味 |
| 実数値+単位 (100px 50px) |
横方向と縦方向の開始位置を順にスペースで区切って数値で指定します。 単位にはpx・em・ex・in・cm・mm・pt・pcなどがあります。 |
| %値 (20% 30%) |
横方向と縦方向の開始位置を順にスペースで区切って割合で指定します。 |
| 左右の配置 (left | center | right) 上下の配置 (top | center | bottom) |
横方向と縦方向の開始位置を順にスペースで区切ってキーワードで指定します。指定する順序は問いません。 |
■ 背景画像の固定配置を指定
<記述例>
| background-attachment: fixed; |
| 値 | 意味 |
| fixed | 背景画像の位置を固定します。 |
| scroll | 背景画像を他の内容と共にスクロールします。 |
| 他の部分で背景画像を表示するには |
背景画像の表示方法について、ページ全体の背景画像を表示方法を例として説明しましたが、バナー部分やサイドバー部分などで背景画像を表示する場合は、その該当クラスで、background-image プロパティを追加します。
MovableTypeで使用されているクラス、セレクタはMovableTyoeのスタイルシート解析を参考にして、背景画像を表示させたいクラスを編集してください。
以上、背景画像を表示する方法について説明しました。
ブログランキングに参加中です。応援お願いします。
パーマリンク | 投稿者 りっち | 2005年7月31日 02:32
|
|
はてなブックマークに追加
|
Yahooブックマークに登録
関連記事
トラックバック
このエントリーのトラックバックURL:
コメント
コメントしてください
