北京棒球小僧トップページへ矢印:赤(右3) カープキャップ1Blog technique 矢印:赤(右3)カープユニフォーム1スタイルシート変更方法

2005年06月13日

カープユニフォーム1 スタイルシート変更方法

第4弾はいよいよCSS(スタイルシート変更)についてです。
簡単に言えばサイトデザインの変更でオリジナルスタイルシートの作成です。
これさえマスターしてしまえば
ブロガーとしてかなり達人の域に到達していると思います。手(チョキ)
マリナーズの方々にSeesaaBlogを薦める要因の一つに
このスタイルシートの変更がかなり簡単である事が挙げられます。
一見難しそうな設定ですが少しずつ掻い摘んで行きます。
CSS変更解説1回目はブラウザに関係無く
CSSのサイズを固定する方法
から説明します。
興味のある方は見てやってみて下さい。

SeesaaBlogにもヘルプでスタイルシートの説明はしてますが
見るのが面倒くさい方の為にこういう場合はこうやります
って説明でやっていこうと思います。
まず『デザイン』『テンプレート』
お好きなテンプレートを選び追加ボタンを押してください。
続いて『デザイン』『スタイルシート』で先程追加した追加したスタイルシートを
クリックしてください。
ここでは例として『シンプルホワイト』で説明致します。
下記の赤い部分に各セレクタ(スタイルシートの各パーツ)の設定が書かれてます。
css1-1
これを必要に応じて変更してあげればオリジナルスタイルシートが出来上がります。
今回はCSSのサイズを固定する方法ですので変更部分の説明だけにします。
なぜこの題目を選んだかと言いますと閲覧者のパソコンのサイズによっては
自分が想像していた見方と若干変わる場合があります。
改行の位置やサイドリンク(左右ツールバー)が下に落ちてしまったり
css1-2
これを完全に自分がサイズを指定してあげる事で
誰に対しても同じ見方が出来るようにします。
ただし、デメリットとして設定にもよりますがモニタが小さい方には
左右スクロールの操作が増える為、不評かもしれません。
私の場合は12.1インチを最低のサイズとして設定しています。
まずサイト(左ツールバー部、記事部、右ツールバー部)の横幅を決定してください。
私は何となく 200px、560px、200pxで設定しました。
数値の単位は%でもpx(ピクセル)のどちらも可能。
数値は任意で結構です。

では、まず先程のスタイルシートの設定で
左ツールバー部の下記の
#links-left {
font-weight:normal;

width:20%;
float:left;
margin-left: 5px;
margin-right: 5px;
margin-top:25px;
}

と書かれている所を見つけてください。
その赤字部分を

width:200px;

と変更してください。
サイズの単位はpx(ピクセル)です。

続いて中央の記事部のサイズ変更です。
#content {
margin-bottom:30px;
margin-top:25px;
margin-left:10px;
float:left;

width:55%
}
の赤字部分を

width:560px;

と変更してください。

最後に右ツールバー部の変更です。
#links {
font-weight:normal;

width:20%;
float:left;
margin-left: 15px;
margin-right: 5px;
margin-top:25px;
}

の赤字部分を

width:200px;

と変更してください。
ここまでの作業で各パーツの横幅の設定できました。
最後にツールバーが落ちないようにする為には
containerの変更が一番のミソです。
containerとは左右ツールバーと中央記事部を入れている箱みたいなものです。

#container {
   width:1010px;
   margin:0px;
   padding: 0px;
   background:#ffffff;

   text-align:left;
}
の赤字部分をを追加してください。
widthの数値は左右ツールバーの幅+中央記事の幅+余白の幅です。
よく分からない場合は適当に大きい数字を入れてプレビューで確認しながら
決定すれば良いです。
container自体が、CSS内に無い場合があります。
その場合は上記の記述をすべて追加してください。
この『シンプルホワイト』に関してはありませんので
任意の場所にすべて追加します。

これで『プレビュー』ボタンを押して確認して問題無ければ
『スタイルシートを変更する』ボタンを押して最後に再構築すれば完了です手(チョキ)

ひらめきスタイルシートの変更時はなるべく設定内容を
メモ帳にペーストして保存する
といざと言う時には助かります。
でなければ初期設定に戻さないといけませんのですべてパーです。
ひらめきまた、スタイルシート設定の記述部は『/*※※※※*/』
と追記すると一体何の設定なのか一目瞭然になります。
この記述はCSSには反映しませんので何を書かれても問題ありません。

例えば

/*左ツールバーの設定*/
#links-left {
font-weight:normal;
width:200px;
float:left;
margin-left: 5px;
margin-right: 5px;
margin-top:5px;
}


どうでしょうか?
こんな説明でも分かって頂けたでしょうか?
次回は背景の設定について説明したいと思います。
posted by むさC16 at 00:38 | Comment(0) | TrackBack(0) | カープキャップ1Blog technique 上へジャンプ
この記事へのコメント
上へジャンプ
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL

上へジャンプ
さくらインターネット株式会社 株式会社ぐるなび 株式会社オートウェイ 損保ジャパンの海外保険 オクトパストラベル・ジャパン
中国醸造株式会社 有限会社BBシステム 日本シグマックス株式会社 日本シグマックス株式会社 株式会社コーエイプランニング OTAIRECORD株式会社