« シンデレラ通信0107 | トップページ | 紙の辞書 »

2004.01.07

スタイルシートを知りたい(4)

ところが,某O氏に

けいじばん【51】で

サブタイトルのところに
画像貼り付けってありなんだろうか?

とまたしても言われてしまったのだ.

この時点ではまだ安易に「貼り付ければいい」と単純に考えていたのだが,
その後,

IGAさんから
タイトルに画像を入れるための方法・・・

というわけで覚悟を決めて,タイトルに画像を入れることを考えることにした.

まず最初にやったのはもちろん,サブタイトルの後に貼り付けてみただけ.
ところがこれをやったら,タイトルのところがおかしくなってしまった.
両サイドの高さは変わらずに,真ん中のタイトルの部分だけが広くなってしまい,しかも両サイドに隠れた部分にまで文字や写真が入り込んでしまう・・・

サブタイトルに入れた写真はなんか半端なところに出ているし・・・

あらためて
IGAさんの書いてくださったことを必死になって読み始める.

「いかんともしがたい」のCSSを参考にしております.

#banner {
font-family: "MS Pゴシック", "Osaka", "ヒラギノ明朝 Pro W6", "trebuchet MS", "trebuchet", "verdana", "arial", "sans-serif";
height: 110px !important; /タイトル画像の高さの半分
text-align: left;
padding: 0px;
background-image: url("http://*****.cocolog-nifty.com/001/img/タイトル画像ファイル");
background-repeat: no-repeat;
}

まず最初に悩んだこと,
どうしてこんなにたくさんのフォントを入れるんだろう?

次のheight;のところで高さをどうして画像の半分にするんだろう?
(これはとりあえず考えないことにした)
!importantってどういう意味だろう?

text-align:left これは分かる.テキストは左寄せ

background-image: url("http://*****.cocolog-nifty.com/001/img/タイトル画像ファイル");
background-repeat: no-repeat;

これが一枚だけ画像を貼り付けるためのもの.

#banner a {
color: #333333;
text-decoration: none;
}

タイトルのところにaタグを使ったのはあったかなぁ?
とりあえず無視∥^O^∥
(実はこれを書いていて気がついた.タイトルはリンクしていた!!
  だから文字の色が変わらなかったんだ
  というわけで早速直してきた∥^O^∥)

この後も#banner h1 #banner h2の設定があったけれど,
とりあえず,marginは分かったのでそこだけ使ってやってみることにした.

もちろんここにたどり着くにはIGAさんを質問攻めにしたわけで・・・ありがとうございますm∥_ _∥m>IGAさん

それでもまだわかってない言葉がいくつもあるけれどもとりあえずやってみた.

と、画像が大きすぎるために画像が左のサイドバーに隠れてしまう.
というわけで適当に見当をつけて画像の高さを100pxに直してやってみたのが今の状態.

あっ,この他にリンク済みの色がリンクの色と違うと見づらいので同じ色になるように

a:visited {color: #E32E61;}

を付け加えておいた.

ということでここまではなんとかスタイルファイルを使えた\∥^O^∥/

ただ、cssファイルを外部に置くのではなく,まだmylistの中においてある.
そのほうがなんとなく訂正しやすそうなので・・・

外部ファイルにするときにはサブタイトルがいいのだろうか?

|

« シンデレラ通信0107 | トップページ | 紙の辞書 »

コメント

サブタイトルの内容はRSSに出力されるので、影響はほとんどないですが、余計なモノが出力されると、どんなRSS利用のツールに影響が出るか判らないと云うことで、私はマイリストに入れています。

投稿: Tiger | 2004.01.08 16:40

Tigerさん、ありがとうございますm∥_ _∥m

RSSがどういうものかもよくわかってないのですが,どっちでもいいとなるとマイリストのほうがRSS利用のツールにやさしいということですね.

マイリストに入れるよりサブタイトルに入れるほうがいいとされる理由は「早く読み込まれるから」かな?と思っているのですが・・・

投稿: Cos | 2004.01.08 17:43

Tigerさんのおっしゃったことが,現実に問題になったようですね・・・

投稿: Cos | 2004.01.10 00:06

はじめまして。いかんともしがたいです。
なんか、こう、css ファイルまで見られるとハズカティですな。わたしもけっこう人のは見るほうなんですが、見られるとやっぱりテレますね。しかも完全に独学なのでテキトーな記述が多いですし・・・。

フォントは 詩織 (siolli.cocolog-nifty.com)さんのとこで紹介されていたものをそのまま記述しています(すいませんその記事は見つかりませんでした)。

!important; についても書いておきます。
空白部分の高さを確実に確保するために記述しているのですが、実はわたしもよく解っていなくて(恥)、ある意味おまじないなのです。
詳しいことは下記のリンク先にわかり易く書いてありましたので時間のあるときにでも読まれてみてはいかがでしょうか。
http://www.tg.rim.or.jp/~hexane/ach/tocs/tocs08.htm

height: 110px /タイトル画像の高さの半分
については、べつに画像の高さの半分を意識したわけではなく、Windows や Mac のいろんなブラウザで html/css の解釈が違うのでいろんな環境でできるかぎり理想に近いモノを模索して試行錯誤の末出てきた数値なだけです。思わせぶりな数値になってしまってスイマセン・・・。

最後に、うちでは css ファイルへのリンクをサブタイトル部分に記述しているのですが、それは Cos さんが書かれているように少しでも早く読み込まれるようにです。うちはサイドバーが右側にしかないので、マイリストに入れるとどうしても html ファイルでみた場合下のほうになってしまうので。個人的に RSS リーダーを使っていないので、どのように問題があるのかは不明です・・・というか知りたくないんです・・・。

うちのサイトを参考にしてくださって大変光栄に思っています!これからもよろしくお願いします。長文失礼しました!

投稿: いかんともしがたい | 2004.01.10 06:10

いかんともしがたいさん、こんにちは。わざわざありがとうございますm∥_ _∥m

勝手に参考にさせていただきましたが,とても助かりましたm∥_ _∥m

なにしろ、スタイルシートなんてぜんぜん分からないし,html自体にしても自分が使うこと以外はさっぱり分かってないので,すごく助かりました.

このころはちょうどあちこちのスタイルシートをこっそり拝見して,訳がわからなくて頭がうにになっていたころです∥^O^∥

!important; についても書いておきます。
空白部分の高さを確実に確保するために記述しているのですが、

今のCosにはまだ難しくてよく分からないです・・・∥-_-∥
とりあえず,そのうちに分かるだろうと気体はしているのですが・・・

ただ,これがきっとBannerの部分を広げるためなんじゃないかと,おぼろげながら感じてはいます。(まるっきり違ったりして∥^O^∥

音楽関係も,スタイルシートも弱いCosですが,本当にありがとうございましたm∥_ _∥m

投稿: Cos | 2004.01.10 18:44

Cosさん、はじめまして。
ずっと以前からお邪魔しておりますのに、書き込みというか、ご挨拶をいたしませんで申しわけありませんでした。
Cosさんのこのエントリーを参考にして、うちのココログのTOPに画像を設置することができたのでした。
ここを発見できなければ、私にはできなかった作業です。
ありがとうございました。
その当時にTBなりコメントでご挨拶するべきだったと反省しております。m(__)m
今回、ご紹介させていただく記事を訂正追記しまして、ブログTOPとともに、この記事へもリンクを張らせていただきたいと思います。よろしくお願いいたします。

投稿: kuu | 2004.09.24 17:50

kuuさん、はじめまして。
どうぞおきになさらないでくださいm∥_ _∥m

Cos自身もいろいろな方に助けられて
あれやこれやできたわけですし、

blogで記事にすると教えてくださる方がいらっしゃるというのが
一番ありがたいことです。

また何かあったらお互いにみんなで助け合いましょうね。

投稿: Cos | 2004.09.24 23:37

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/3303/81045

この記事へのトラックバック一覧です: スタイルシートを知りたい(4):

« シンデレラ通信0107 | トップページ | 紙の辞書 »