2005-05-05 09:37:31

CSS編集してみました

テーマ:CSS編集

今、実は他にも2つブログを抱えているのですが、

どれもそのブログの個性がありますねー。



exciteが夫婦のメインブログなのですが、カスタマイズするには、

セクションの編集+CSS編集という組み合わせで

両方いじらなければいけらなくて、

どこに、何の記述がしてあるのか、慣れるまでは結構大変。

(といっても、まだよくわかってません)


それにスクリプトタグが使用禁止なので、

左右カラムでのツールを貼り付けるのも

制限があるんです。それがちょっと不満・・・。


スキンの種類は現在35個。あまり多くはないのですが、

アメブロと違い、すべてのスキンが編集可能なので、

気に入ったデザインがあれば、画像の入れ替えや、

色の変更程度で済んでしまいます。


あとは携帯からの投稿はOKだけど、

閲覧はまだサポートされてないのが不満その2。



もうひとつはBlogPet投稿専用のブログをseesaaに登録しました。

exciteにBlogPetを設置したのですが、

exciteでは投稿をしてくれないので

投稿させるためseesaaにブログを借りました。


記事書き込みのパレットは3社の中で一番使いやすいと思っています。

絵文字もOK。

スキンデザインは現在44種類ですが、デザインが結構好きです。


現在今年の

4月1日1時間限定公開のホリエモン「想定の範囲内」のスキン

を使用しています。


スキン公開には居合わせられなかったのですが、

どうしても「想定の範囲内」にしたくて

ソースを探り、いろいろ細かくいじってもうまくいかず・・・、

ええ~~い!全部貼り付けちゃえ!

と思って貼り付けてしまったら、、、できてしまいました。



そしてこちらアメブロ。

どうもスキンのデザインが・・・ということで、せっかくのお休みだし、

手を加えてみたいなぁと思い、何か解説してあるサイトがないかしら・・・

と思い巡っていたら、ありました!



こちら、ゆこさんのyuco*blog です。



もう素晴らしいです!

懇切丁寧にCSS編集の解説をされています。

私も変えてみました~(^-^)



一番苦労したのはヘッダのトップ画像の入れ替えでした。


・・・というのも・・・4月22日にまた新しいソースになっているみたいで、


-----------------------------------------------------
ameblo CSS Skin Settings
FileName:   common.css
Version:    2005.04/22
Skin for: all_skin
-----------------------------------------------------


ソース記述の位置など、微妙に変わっているようでした。



「カスタマイズ」という編集機能で

そこで簡単なカスタマイズはできるのですが、

そのままその機能を使うと、

トップ画像が「繰り返して」表示されてしまうんです。


それをひとつだけ表示させるのには、

CSSをいじらなければならなくなってしまうんですが、

さっそくゆこさんの記事を参考にさせて頂き、

CSSの上部の方にある、トップ画像設定部分を変えてみました。



/* ----------------------- header ----------------------- */
#header{
height: 225px;
background-image: url(画像URL);
background-color: #000000;  ←これは現在の色(黒)です。
background-repeat:no-repeat; ←もとの記述は「repeat-x」
}



ここのbackground-repeat:「no-repeat」と設定すると

画像が繰り返されなくなるはずなのですが

何回やっても画像が繰り返されて表示されてしまいます。。。


涙目になりながら、数時間格闘し、


「いや、こういう記述って、

結構最後の方にもう一度かかれていたりするかも。

プログラマの書き残し?コメント付け忘れかも・・・。

もしくはsub記述とかあったりして」


(実は半年VBプログラマ経験あり。私、記述書き直したあと、

もったいなくてコメントとして残しちゃったりしていました。^^; 

←自分と一緒にするなっ!笑)



なんて思って一番下の方の記述をみたら・・・


ありました!!!(T_T)


-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName:   type_b.css
Version:    2005.03/03
Skin for: peach
-----------------------------------------------------


ここにもレイアウト関連の記述がありました。

上の記述が、「common.css」と、commonになっているので

全スタイルシート共通部分で、

下の設定部分が、「type_b.css」ということで、

この「ピーチ」の独自のスタイル設定部分なんでしょうねぇ・・・



#header {
background-image: url(画像URL);
}
#header {
background-repeat:repeat-x;
}


ここの「repeat-x」(画像を繰り返します設定) を 

「no-repeat」(画像を繰り返しません設定) にして

初めて画像が繰り返されなくなることがわかりました。


こうして無事、第一次カスタマイズ終了。


あ、だんな様活動開始のようです。


尻切れですが、また改めて。。。



AD
いいね!した人  |  コメント(8)  |  リブログ(0)

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。