2004年12月09日

links-leftの見出しに画像を表示する

こんにちは。今回はlinks-left(記事の左側)の見出し部分に画像を表示させようと思います。

がその前に。
前回の記事を読んでくださった方は少しだけ訂正があるので(読まなくても問題ない程度です)よろしければご覧ください。間違いが多くてすみません(>_<)



今回の変更箇所は「#calender table{}」の中の「.calenderhead{}」と「.sidetitle{}」です。
.calenderhead{}」ではカレンダーの年と月を表す部分、「.sidetitle{}」ではそれ以外の部分(「新着記事」とか「カテゴリ」とか)に画像を表示させます。


.calenderhead{}」も「.calenderhead{}」も
前回と同様に表示させたい画像をアップロードしておき、
それぞれの中に「「background-image:url(バナー画像のURL);」という一文を入れるだけです。

他に何も指定しない場合は画像が枠内いっぱいまで縦横に繰り返し表示されます。
画像を繰り返し表示させたくないという人は続けて「background-repeat:no-repeat;」を(これで左端にだけでます)を、
画像の位置を指定したい人はさらに続けて「background-position:場所;」(場所部分にrightとかleftとかを入れてください)を加えてください。
他にも縦or横方向だけ敷き詰めとか
上、真ん中、下だけとかいろいろできるので
やってみたい人はCSSの解説サイトなどを覘いてみてください。


とりあえず画像以外特に指定なしにするとこう↓なります。


変更8・links-leftのタイトル部分に画像を表示しました

わかりにくいですが小さめの画像を使っているので縦横に連続して表示されてる状態です。
ちなみに今(2004/12/09)表示されているのはカレンダーは「繰り返さない」、他は「縦方向に連続表示」(微妙に枠より小さかったので)を指定した状態です。


今回はここまでです。読んでくださってありがとうございました(^-^)
タグ:CSS
posted by 四葉屋 at 16:33| Comment(0) | TrackBack(0) | CSSいじり | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/1244945

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。