解決済
Ads By Google
サイドタイトルの横に画像を置きたい
サイドバー内の各タイトルの横にちょっとした小さなワンポイントの画像をおきたいのですが、
ＣＳＳで指定できますでしょうか。
ＣＳＳで無理ならｈｔｍｌで各ページ指定でも構いません。
回答よろしくお願いいたします。
2006-09-23 22:35の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。
回答(1)
1.
2006-09-24 01:04:31
考え方としては、.sidetitlebody{ } の中に画像を配置し、no-repeat と繰り返しを拒否します。通常は自然と左側に配置されますので、とりあえずは、これで画像がサイドカラムのタイトルの左側に表示されるはずです。
画像の高さの指定は必ずしておいて下さい。
具体的にはこうなります。↓
.sidetitlebody{
background:url('画像の置いてあるアドレス') no-repeat;
height:画像の高さpx;
}
ただし、このままではサイドタイトルと画像が重なってしまいます。ですから、サイドタイトルの表示位置を右側にずらす必要があります。.sidetitle{ } の中に、padding の指定があればそれを調整し、なければ新たに追記します。具体的にはこうです。↓
左から ○○px 右にずらしなさいという指示です。
羽音さんの質問に運営ブログのアドレス、またはご利用のブログテンプレート （ ジャンル、デザイン ） が記載されていない状態での質問ですので、答えられるのはここまでです。
うまくいかなかったり、引き続きご質問がある時は、
コメント欄にその旨を書き込み下さい。
画像の高さの指定は必ずしておいて下さい。
具体的にはこうなります。↓
.sidetitlebody{
background:url('画像の置いてあるアドレス') no-repeat;
height:画像の高さpx;
}
ただし、このままではサイドタイトルと画像が重なってしまいます。ですから、サイドタイトルの表示位置を右側にずらす必要があります。.sidetitle{ } の中に、padding の指定があればそれを調整し、なければ新たに追記します。具体的にはこうです。↓
padding-left:○○px;
左から ○○px 右にずらしなさいという指示です。
羽音さんの質問に運営ブログのアドレス、またはご利用のブログテンプレート （ ジャンル、デザイン ） が記載されていない状態での質問ですので、答えられるのはここまでです。
うまくいかなかったり、引き続きご質問がある時は、
コメント欄にその旨を書き込み下さい。
回答レベル : 回答
わかりました！
色々と本当に有難うございました★
Ads By Google
コメント(7)
#1. kozzy110
2006-09-23 23:40:55
これは、逆にＣＳＳで指定しないと
できない様な気がしますね。
HTMLをカスタマイズでは、不可能かも・・・。
#2. foissotté
2006-09-24 03:13:38
AQさん、大丈夫。その回答でたぶん問題ないと思います。
過去の質問から見に行ってきました。
#3. AQ
2006-09-24 08:53:47
#4. 羽音
2006-09-29 13:56:27
みなさん、ご親切でお優しい回答をありがとうございます。
こちらからのコメントが遅れすみません。
さっそく試してみました。できました！
位置などの細かい修正はこれからがんばってみます。
ついでで申し訳ありませんが、
同じ画像をサイドタイトルの両脇に置くことは可能でしょうか？
ブログアドレスはhttp://blog.livedoor.jp/haoto_/です。
よろしくお願いいたします。
#5. AQ
2006-09-29 17:07:10
＞ 羽音さん
このスレでの " ついで " はこれだけにしてね。
他の質問は新たな質問としてあげて下さい。
同じ画像をサイドタイトルの両脇に 置くことは可能でしょうか？
これは残念 (+_+) あの領域に２つの画像を並べる事はできません。ただし、サイドカラムのタイトルの背景画像として両脇にハートの画像を配した、透明 gif をご自身で作成できるのなら可能です。
羽音さんのブログのサイドカラムの幅は 200px 。
ですから、200px の幅で両サイドにハートをデザインした長方形の画像 （ 羽音さんのブログの場合は必ず背景を透明にして保存して下さい。） を作成して、上記回答と同じようにすれば、サイドカラムの両サイドにハートが設置してあるように見えます。
#6. AQ
2006-09-29 17:11:41
調整は後でするとコメントなさっていますのでお任せいたしますが、.sidetitlebody{ } の中に、height が２つ存在します。表示の不具合の原因になりますので、早く修正なさっておいたほうが良いでしょう。
質問内容が解決されたのであれば、この質問を解決済みとして閉じておいて下さいね。宜しくです (^^)
#7. AQ
2006-10-02 22:48:44
＞ 羽音さん
い～え。解決したのなら何よりです。
また何かあれば、いつでもナレッジを御利用下さい。
ベスト回答の評価、嬉しいです (^^)
