« デザイン変更中  | Main | 『サザエさん』のタマの声 »

September 12, 2004

ココログのCSSをベーシック、プラスで変更してみる 【4】
RSSTIMESをバナーに貼ってみる。

昨日からCSSをこねくり回してデザイン変更を続けているが、結局、カラムを2行編成にし、marginやらpaddingやらを調整しながら片手で飯を食い、バナーに画像を貼りつつ、今ご覧のような姿になり果てているのだが、突然、天啓のようにblogの更新時間を表示するRSSTIMESを貼ってみたくなって、いろいろ試行錯誤した末に何とか形になった。方法は下記のようにしてみたが、これが良い方法かどうかは極めて疑わしい。なにせ当方、ドがつく素人だからだ。

1. RSSTIMESのサイトで自分のblogのHTMLを取得する。方法はサイトに詳しく説明されている。私の場合、バナー画像の下、containerの巾一杯に表示したかったので、800pxの全巾に対して700pxを指定。
  高さは20pxの細い帯状にしてみた。(取得するとサイズは若干大きくなるようだ。)
2. それを丸ごとコピー、サイトのサブタイトル欄に貼り付ける。
3. 貼り付けたままだと、RSSTIMESがバナーと重なってしまうので、位置の指定を行う必要がある。
  これはCSSで規定する。そのために、サブタイトルのHTMLにクラスを指定。クラス名は"RSS"としてみた。
4. CSSにて、この新しいクラスを設け、絶対位置指定を行う。私の場合、画像の高さが200pxなのでそれに合わせると画像と重ならない。
(追記;この絶対位置指定では、bodyの原点=左上からの絶対位置を意味するため閲覧者のブラウザ表示幅に連動してしまい、containerの中での相対的位置が変わってしまうことが判明。シロウトでスミマセン。相対位置指定がこの場合正しいようです。下記に修正致しました。)

/* .RSS { position: absolute; top: 200px; left: 50px; position: relative; top: 138px; left: 34px; }*/

一応、これで表示されたようだが、真っ赤な色がハシタナイなどと言われたので、あとでこっそり修正するつもりだ。(追記2;その後、グレーに変更しました。)

« デザイン変更中  | Main | 『サザエさん』のタマの声 »

ウェブログ・ココログ関連」カテゴリの記事

Comments

Post a comment

Comments are moderated, and will not appear on this weblog until the author has approved them.

(Not displayed with comment.)

TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/21097/1414488

Listed below are links to weblogs that reference ココログのCSSをベーシック、プラスで変更してみる 【4】
RSSTIMESをバナーに貼ってみる。
:

« デザイン変更中  | Main | 『サザエさん』のタマの声 »

NAVIGATION

無料ブログはココログ

search


  • Google

thank you!