2008年10月スタイルシート

TOP | RSS | ABOUT | Add to google | Add to Yahoo! bookmark

seesaaのテンプレートから

seesaaにはいろいろなジャンルのテンプレートが用意されています。
でも、3カラムのテンプレートでこのサイトのような右よりはありませんでした。
全部を確実に見たわけじゃないですが、ざっと見たところにはなかったです。
それならばいっそ自分で変更してしまおうと思いました。



テンプレートはお好みで3カラムを選んでおきます。
まずはその元のテンプレートをバックアップしてください。
テンプレートをダウンロードしなおせば簡単に元に戻りますが、バックアップの癖はあるほうがいいと思います。

次に[デザイン一覧]から使用するテンプレート(適用済み)のスタイルシートを開きます。

変更するところは2箇所。

┣ #content
┣ #links-left

この2つの部分に「width:数字%;」が指定されています。
それを入れ替えてあげてください。
fontやmarginの指定はデフォルトのままで大丈夫です。
テンプレートによって数字の部分が「%」ではなく「px」になっているものもあると思いますが
widthの数字部分だけを入れ替えてあげれば同じです。

つまり、通常の真ん中にある記事の部分の幅と左側のサイドバーの幅を入れ替えただけです。
あとはデザインの中の[コンテンツ]に入って左から『記事』『サイドバー1』『サイドバー2』になるように入れ替えてあげてください。
[コンテンツ]のレイアウトの画面での幅は変わっていませんが設定を反映してブログを確認すると
ちゃんと一番左から『記事』『サイドバー1』『サイドバー2』になっていると思います。



背景の画像によっては移動させると見づらくなる物もあるのでその場合は背景画像も変更したほうがいいと思います。



この変形タイプがいいのかはわかりませんが最近よく見かけるので
なんとなく「いいなぁ?」と思っただけですが、試しにやってみてください。
左寄せがよければこれと反対になる部分を変更すればできるということです。


追記

「class」属性の指定も変更しておくといい。
その場合は、HTMLのほうの記述も変更する必要がある。

background-image:(背景画像)

背景にもにも画像を使いたい場合がありますよね。
俗に言う「壁紙」というものを用意します。

壁紙はフリー素材で探しても良いし、自分で作ることも出来ます。
サイズは画像や表示のさせ方でも違ってきますが、seesaaブログの『天使の卵(両サイドバー)』のスタイルシートで説明してみます。

ブログの背景を指定している部分は下記のようになっています



ブログの土台部分になるbodyの部分で背景を設定します。
httpから始まるURLを見てみると縦に細長い画像「2x1300」のサイズになっています。
これを横に繰り返して表示させる指定です。

repeat-x

横方向に並べて表示というものです。
他の表示の仕方は表にまとめてみました。

background-repeat

repeat-y (縦方向に並べて表示)

repeat-x (横方向に並べて表示)

no-repeat (1つだけ表示)

repeat  (敷き詰めて表示)デフォルト




ちなみに、

background-image: none;

url( )のところに「none」といれれば画像無しの表示になります。


スタイルシートを見ているとbackground-image:url( )
こういう記述は他にもあります。それぞれ好きな画像に変更してみてください。