« デフォルト04:タイプパッド風 | Main | デフォルト05:ボックス »

なんちゃってデフォルトスタイル

 デフォルトスタイルについてのノートも(4)まで来ました。ここまでくると、知識を持ってなくても勘の良い人はすでに気づいているかもしれません。「なぜIE5.xでは右サイドバーがふっとぶスタイルがあるのか?なぜふっとばないスタイルがあるのか?」

 とはいっても、答えはすでに「IE5.xとココログ(2)本文やメニューが下の方に表示される場合の対処法」(「insomnia days」さん)で説明されています。
 つまり「IE5.xでは右サイドバーがふっとぶスタイル」=「ページがボーダーで縁取りされているスタイル」なのですね。IE6とIE5.xではこの「幅」の計算方法が異なっており、ボーダーのピクセル数だけ「表示に必要な幅が足りなくなるため」サイドバー部分がふっとんでしまう、ということなわけです。

 スタイルは気に入ってる。邪道なかたちで自作スタイルを使うのはなんとなくいやだ。でも面倒なのは嫌いだし。という人のために、妥協策としてすべての要素をちょっとづつ使った方法についてエントリーします。「なんちゃってデフォルトスタイル」です。

*注意点
この方法は「ファイルをアップロードする」ものです。現在ココログでは一度アップロードしたファイルを消去する方法がありません。 試される前に、この点を確認のうえ自己責任でお願いします。また、ファイル名を忘れないように、cssファイルの名前は自身が忘れないようなものに変えたほうが良いと思います。デフォルトで作成されるcssファイル名(styles.css)以外なら何でも良いと思います。この点を考慮して、サンプルのcssファイルは最小限の設定のみ記入しています(1kb相当)。


 基本的な方法は「自作スタイルシートの適用」です。
1.まず以下のリンクを「右クリック>対象を保存(Macではどうやるのかわからないですが)」で、cssファイルをダウンロードしてください。名前は変えても問題ないし、そのままでも問題ないと思います。

(1)ボーダーを消しちゃった「なんちゃってデフォルト」
(2)ボーダーを残してページを微妙に広げた「なんちゃってデフォルト」
2.このcssファイルをそのまま「写真やファイルをアップロードする」でココログに送り、

3.サブタイトル欄にタグを入力します。下記の例はそのままアップロードした場合。
上記(1)をダウンロードした場合
<link rel="stylesheet" href="あなたのサイトのURL/あなたのサイトのディレクトリ名/style-site007.css" type="text/css">
上記(2)をダウンロードした場合
<link rel="stylesheet" href="あなたのサイトのURL/あなたのサイトのディレクトリ名/style-site008.css" type="text/css">

「詞織」を例にすると
<link rel="stylesheet" href="http://siolli.cocolog-nifty.com/blog/style-site007.css" type="text/css">

という感じです。
 さて「保存」して「サイトに反映」させてみましょう。選択済みのデフォルトのスタイルが表示されましたか?ほとんど変わらない?そうです。「なんちゃってデフォルト」ですから。でも、ちょっとだけ違う。そして右サイドバーは吹き飛ばないと思います。
 スタイルシートってなんだかわからん、て人も、まずはここから試してみてはいかがでしょうか。

|

« デフォルト04:タイプパッド風 | Main | デフォルト05:ボックス »