FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

画像の上に文字等を重ねる

背景に画像を設定した場合、その上（手前）に文字等を表示することは簡単です。
ですがimgタグの画像の上（手前）に文字等を重ねて表示する場合は少し工夫が必要です。

「position: relative;」の内側にある「position: absolute;」は、
「position: relative;」を基準とした相対位置に表示されることを利用します。

HTMLの任意の箇所に、下記のように画像と文字を加えます。

<div id="layer_base">
<img src="画像URL" />
<div id="layer_1">文字１</div>
<div id="layer_2">文字２</div>
</div>

画像URLや文字はお好みにあわせて設定してください。

そしてスタイルシートに以下を加えます。

#layer_base {
position: relative; /* 基準となる位置 */
width:1000px; /* 基準の幅 */
height: 300px; /* 基準の高さ */
}

#layer_1 {
position: absolute; /* 基準からの相対位置 */
top: 10px; /* 上からの位置 */
right: 10px; /* 右からの位置 */
}

#layer_2 {
position: absolute; /* 基準からの相対位置 */
bottom: 10px; /* 下からの位置 */
left: 10px; /*左からの位置 */
}

基準値の幅や高さ、そして各相対位置はお好みにあわせて設定してください。
基準位置の上下左右どこからでも相対位置を指定できます。

これで画像と文字を重ねて表示することが出来ます。

関連記事

[ 2009/10/12 01:40 ] カスタマイズ共通カスタマイズ | TB(0) | CM(13)

≪ メニューバーのドロップダウンにカテゴリを表示 | HOME | プラグイン３のレイアウト (lightframe) ≫

[ 6447 ]

記事にまでしてくださって有り難う御座います(´；ω；`)
本当に感謝します。

[ 2009/10/12 09:32 ] [ 編集 ]

[ 6451 ]

マウスを乗せた時の背景画像も、変更できますか？

[ 2009/10/12 17:14 ] [ 編集 ]

[ 6457 ] > DARKENさん、uixさん

> DARKENさん
お役に立てて良かったです＾＾

> uixさん
できます。

[ 2009/10/12 23:47 ] [ 編集 ]

[ 6463 ] 質問です。

横メニューバーにマウスを乗せたときにTOP画像の位置に画像を表示させたいのですが、何処にこれ↓を入れればいいのでしょうか？

<div id="layer_base">
<img src="http://blog-imgs-32.fc2.com/a/q/u/aquatimez0224/20091013174925286.png" />
<div id="layer_1">TOP画</div>

これ↑がそもそも間違っていたらご指摘お願いします。

[ 2009/10/13 18:06 ] [ 編集 ]

[ 6466 ] > AquaTimez0224さん

「メニューをマウスオーバーするとタイトル背景が変わる」カスタマイズを施したようですね。
http://10plate.blog44.fc2.com/blog-entry-245.html

それであれば更にこちらのカスタマイズを施してみてください。

SEOを考慮したランダムなタイトル画像
http://10plate.blog44.fc2.com/blog-entry-190.html

これでお望みの動きになると思います。
万が一に備えてバックアップをとってから挑戦してください。

[ 2009/10/13 21:02 ] [ 編集 ]

[ 6467 ]

時間のある時でいいので、ご教授ください。

[ 2009/10/13 21:48 ] [ 編集 ]

[ 6472 ] > uixさん

こちらの記事を参考にしてください。

メニューをマウスオーバーするとタイトル背景が変わる
http://10plate.blog44.fc2.com/blog-entry-245.html

[ 2009/10/15 00:04 ] [ 編集 ]

[ 6479 ]

たくさん質問があるのですがよろしいでしょうか;;;
まずブログを見ていただくとわかるのですが
http://gachadaikogameblog.blog88.fc2.com/
何度もいじくっていたら
右側のカテゴリの枠が記事に重なってしまいました。。。
それと、このサイトで紹介されている「なんでもスクロール」
にRSSを入れたのですがこのスクロールには枠とタイトルがつけられますかね?
もう一つなのですが都合によりスペシャルリンクという
リンク欄を追加したいのですがどのようにしたらいいか
わかりますでしょうか;;

どうかお願いします。

[ 2009/10/15 11:38 ] [ 編集 ]

[ 6481 ] ▼Gachadaikoさん

＞右側のカテゴリの枠が記事に重なってしまいました
環境設定→ブログの設定→アカマイ設定
「利用しない」→更新　1週間待つ

＞スクロールには枠とタイトルがつけられますかね
http://10plate.blog44.fc2.com/blog-entry-316.html#comment6480
の通り、プラグイン3を使えばプラグイン1や2と同じくタイトルを入れる部分があります。
スクロールに枠を付けるなら

<div style="height:80px;
width:○○px;
border:1px solid #cccccc;
～
の1行を入れます。

＞都合によりスペシャルリンクというリンク欄を追加したいのですが
【別枠リンク集の作り方】
http://10plate.blog44.fc2.com/blog-entry-7.html

[ 2009/10/15 12:45 ] [ 編集 ]

[ 6487 ] > 初心者さん、ちゃんさん

> 初心者さん
全てちゃんが教えてくれた通りです。

> ちゃんさん
いつもありがとうございます m(__)m

[ 2009/10/16 00:35 ] [ 編集 ]

[ 6494 ] ＞ちゃんさん

本当にありがとうございます。。。。
感謝です。

[ 2009/10/16 08:35 ] [ 編集 ]

[ 7850 ]

この画像の部分を、画像ではなく背景色に設定できないでしょうか・・？

ブログの一番上の部分だけを白くして、その部分にアクセスカウンターなどを設置したいと考えているんですが・・・。

[ 2010/01/12 23:18 ] [ 編集 ]

[ 7856 ] > ルートさん

このタグで囲めばその背景は白くなります。

<div style="background-color:#ffffff">～</div>