お蔵入り
３カラムの左側の下に画像を固定して貼りたい
３カラムの左側の下に画像を固定して貼りたいのですが画像が左側の真ん中に表示され画面を動かせば一緒に動いてしまいます・・・それとカレンダーの枠も消えてしまいました・・・
#blog{}
#left{
float:left;
width:170px;
background:url(画像) no-repeat fixed right bottom;
}
このようにしているんですけれども・・・
どこが間違っているのか分かりませんので教えて頂けないでしょうか
宜しくお願いいたします<(_ _)>
回答(1)
1.
CSS ではなく HTML に直接記述しなければなりません。
CSS に記述して調整する方法もありますけど、HTML 側に <div> でくくった領域をあらかじめ設けなければならず、それならば初めから HTML に直接記述した方が早いですよね。
管理画面に入って、カスタマイズ/管理 ＞ デザインの設定 ＞ カスタマイズ ＞ をクリックすると、CSS と4つ の HTML がでてきます。その HTML ４つともに新たな画像を表示させる記述を追加します。
追加記述する部分はこちらです。↓
<div id="left"> <div id="lefttop"></div> <div id="leftbody"> <$PluginList_A$> -- ここです。この部分です -- </div> <div id="leftbottom"></div> </div>
質問の内容を読み取ると、左カラム （ つまり A カラム ） の一番最後。そして、no-repeat fixed right bottom; （ つまり右より ） と考えられますが、あっているでしょうか？ 具体的にこういう記述をします。
<div id="left">
<div id="lefttop"></div>
<div id="leftbody">
<$PluginList_A$>
<div align="right">
<img src="画像アドレス" border="0" alt="画像に関する説明・タイトルなど" width="画像の幅" height="画像の高さ"></div>
</div>
<div id="leftbottom"></div>
</div>
リンクを併せて貼りたい場合は、
『 -- ここです。この部分です -- 』 のところをこうします。↓
<div align="right">
<a href="リンク先アドレス" target="_blank"><img src="画像アドレス" border="0" alt="画像に関する説明・タイトルなど" width="画像の幅" height="画像の高さ"></a></div>
続きはコメント欄 >>#2 へ ・・・
コメント(3)
えぇと･･少しわかりずらいので確認させてくださいネ。
>３カラムの左側の下に画像を固定して貼りたい
・左のサイドカラムの一番下に、画像を１枚はりたいということでしょうか？
>画像が左側の真ん中に表示され画面を動かせば一緒に動いてしまいます
・画面を動かせば一緒に動いてしまうとは？
差し支えなければブログのＵＲＬをお教えいただくと状況が確認しやすく、詳しい方からの回答がつくのではないかと思いマスが。
よろしくお願いします(＾＾)
もっと上下左右に微調整したいんだよ～ っていう場合には、やはりクラス属性を付けて、CSS で調整する方が良いでしょうね。こんな感じ↓
<div id="left">
<div id="lefttop"></div>
<div id="leftbody">
<$PluginList_A$>
<div class="leftgazou">
<a href="リンク先アドレス" target="_blank"><img src="画像アドレス" border="0" alt="画像に関する説明・タイトルなど" width="画像の幅" height="画像の高さ"></a></div>
</div>
<div id="leftbottom"></div>
</div>
そして、CSS のどの部分でも良いですから、そのクラス属性の指示を書き込みます。こんな感じ↓
.leftgazou{
text-align:right;
padding:上px 右px 下px 左px;
}
上右下左の部分に任意の数字を入れて調整して下さい。
意味は、上から ・・・ 何 px、右から ・・・ 何 px、という意味になります。
属性名の leftgazou は私が適当に付けました。
あなたの好きな属性名を使用しても良いですよ。
漢字やひらがなはダメですよ (^_^;)
半角英数文字でお願いします。
HTML も CSS も保存を忘れずに。最終的にはすべて再構築をしなければ全ページに反映されませんから、気を付けて下さいね。頑張って (^^)
