2006年06月15日

サイドバーのタイトルの前後に間をあけたよ♪(yozo)

おーい♪うさも♪
サイドバーのタイトルとコンテンツがぴったりで窮屈だったので、ちょっと間をあけるようにしたよ♪

  1. [デザイン]−[スタイルシート]−[適用しているタイトル]をクリックして「スタイルシート」の欄の中でクリックします。(「スタイルシート」の中であればどこでも構いません。)


  2. [Ctrl]+[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにsidetitleと入力して、検索してください。


  3. .sidetitleの{〜}の中にmargin:15px 0px 10px;のコードを追加しましょう。
    同様にして、#contentの{〜}の中にmargin-top:15px;のコードを追加しましょう。
    そして.sidetitle#contentのmargin-topはそろえるようにしましょう!

    必ずバックアップしましょう!
    いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪

    .sidetitle {
    background-image:url(http://blog.seesaa.jp/img/bg/beige/side_title.gif);
    background-repeat:no-repeat;
    color:#9CA06F;
    font-size:12px;
    font-weight:bolder;
    padding:10px 10px 8px 25px;
    text-align:left;
    margin:15px 0px 10px;
    }

    #content {
    float:left;
    width:532px;
    color:#FFF;
    text-align:center;
    margin-top:15px;
    }

    参考までに、marginの設定のしかたは下の通りです。
    margin:10px; 上下左右がすべて10px
    margin:10px 20px; 上下に10px、左右に20px
    margin:10px 20px 15px; 上10px、左右に20px、下15px
    margin:10px 20px 15px 30px;
      上10px、右20px、下15px、左30px


  4. [スタイルシートを変更する]をクリックします。『設定を変更し、CSSをビルドしました。』と表示されます。


  5. [再構築]をクリックして「CSS(スタイルシート)」を選択して、[再構築を実行する]をクリックしましょう


<yozoからのお願い>

私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「テンプレートの改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければコメントやトラックバックしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
posted by yozo家 at 22:40 | Comment(17) | TrackBack(1) | カスタマイズ | edit
この記事へのコメント
ありがとうございます(>_<)
明日にでも、試してみます!
Posted by かずね at 2006年06月16日 00:28
yozoさん、再びおはよう♪

私の新ブログも、ころんこがやけに左に寄っているので、このカスタマイズ参考にさせて頂くつもりです!
でも、流石にCSSはいじったことが無いので、挫折するかもしれませんが・・・・w

yozoさん、色々と参考になる記事ばかりで本当に助かっております♪ m(._.)m
Posted by ろんちゃん at 2006年06月16日 10:49
かずねさん、こんにちはー♪

>明日にでも、試してみます!
参考になりましたか?
お暇なときにでもやってみてくださいね。\(*⌒0⌒)bがんばっ♪

Posted by かずねさんへ at 2006年06月16日 11:58
ろんちゃんさん、こんにちはー♪

>私の新ブログも、ころんこがやけに左に寄っているので、
>このカスタマイズ参考にさせて頂くつもりです!
センタリングならCSSでtext-align:center;でいけると思いますが・・・もしもCSSがややこしそうなら、
〜でBlogPetのスクリプトを挟むだけで中央揃えできると思いますよ。お試しあれ。

>yozoさん、色々と参考になる記事ばかりで
>本当に助かっております♪ m(._.)m
いえいえ♪そう仰っていただけて励みになります m(_ _)m
Posted by ろんちゃんさんへ at 2006年06月16日 12:13
こんにちはー。yozoさん。
あーほんとだー。すっきりしたねー♪
いつも、、、なんかしないとー。と思いつつ、伸ばし伸ばしになってるんだよなぁー・・・。
私もすっきりさせたいよーーー!!!

絶対いつか参考にしながらやるもん。
うさもちゃん。すっきりしてよかったねー♪
Posted by enu at 2006年06月16日 15:15
yozoさん、こんばんは♪(*゚▽゚)ノ
確かにすっきりしましたね。
ブログのデザインってちょっとしたことで綺麗になるから
カスタマイズもはまってしまいますよね。
まゆびもまとまった時間があればいろいろやってみたいのです!!
Posted by まゆび at 2006年06月16日 18:00
>enuちゃん、こんばんはー♪

>あーほんとだー。すっきりしたねー♪
そうでしょ。タイトルの上下にそれぞれ余白を入れたのですよ。
つめつめで窮屈でしたよね。(苦笑)(ToT)ゞ スンマセン

>絶対いつか参考にしながらやるもん。
うん♪がんばりましょうね。というかちょくちょく
触っていけばなれてくると思いますよ。
その気になったらいつでもやりましょうね。(^ー^* )フフ♪

>うさもちゃん。すっきりしてよかったねー♪
「うん♪ありがとう♪」by うさも
Posted by enuちゃんへ at 2006年06月16日 21:46
>まゆびさん、こんばんはー♪

>確かにすっきりしましたね。
そうでしょ。タイトルの上下に余白を入れただけ
なんですけど、こんなにも違って見えるとは、
ちょっとびっくりでっす♪ヽ(*'0'*)ツ ワァオォ!!

>ブログのデザインってちょっとしたことで綺麗になるから
>カスタマイズもはまってしまいますよね。
ふふふ・・・一つクリアすると、次々と「ああしたい」
「こうしたい」って出てきますからね。
ちょくちょく一つだけいじっていくという具合に
勉強しているyozoでっす (。・ω・。)
Posted by まゆびさんへ at 2006年06月16日 21:51
うさみが、うれしいですうさとかもどせますよ
ありがたくクリックなどを参考したいはずだったの♪


Posted by BlogPetのうさみ at 2006年06月17日 12:39
ろんちゃんさん、こんばんはー♪
yozoのコメントレスで
>もしもCSSがややこしそうなら、〜で
ってありますよね。申し訳ありません。これタグが消されてしまってます。正しくは下の通りです。ごめんなさいでした m(_ _)m

もしもCSSがややこしそうなら、<div align="center">〜</div>でBlogPetのスクリプトを挟むだけで中央揃えできると思いますよ。お試しあれ。
Posted by ろんちゃんさんへ at 2006年06月17日 19:49
>うさみちゃん、こんばんはー♪
また、2週間ぶりのコメント投稿だね♪(゚ー゚)(。_。)ウンウン
それでもいいよ〜♪ちゃんと投稿してくれてるんだからね。

>うさみが、うれしいですうさとかもどせますよ
>ありがたくクリックなどを参考したいはずだったの♪
うさみちゃんもうれしいみたいだね♪
ありがたくクリックしなきゃいけないんだね。
よくわかったよ♪これからもクリックするね♪(゚-゚*)(。。*)ウンウン
Posted by うさみちゃんへ at 2006年06月17日 19:53
yozoさん、早速 〜 を使ってみたら、バッチリ真ん中になりましたよ♪
これは、色々と使えそうですねヽ(・∀・)ノ
yozoさん、ありがとう☆彡
Posted by ろんちゃん at 2006年06月17日 22:40
あれ?〜だけになってる・・・・(??)
yozoさんの2つ目のコメントのスクリプトを使用させて頂きました♪
Posted by ろんちゃん at 2006年06月17日 22:46
>ろんちゃんさん、こんにちはー♪
<div align="center">〜</div>でうまくいきましたか♪
それは良かったですねー♪オメデト-ゴザイマッス(*^ー^*)∠※Pan!!。・:*:・
お役に立ててうれしいですよ。
Posted by ろんちゃんさんへ at 2006年06月18日 11:45
>ろんちゃんさん、こんにちはー♪

>あれ?〜だけになってる・・・・(??)
yozoもついつい忘れてタグをそのまま書いちゃうのですよ。
今回も初めのコメント(2006年06月16日 12:13のyozoのレス)では
うっかりしちゃいました。m(_ _)m
こういう場合は、特殊文字を書く方法を使います。
< なら &lt; と記入するとプレビューでは&lt;ですが
投稿後の表示は<となっていますよ♪
詳しくは↓コチラの記事を参考になさってくださいね。
http://yozoblog.exblog.jp/2716916/
Posted by ろんちゃんさんへ at 2006年06月18日 12:04
ありがとうございました!
大成功しました!(>_<)
このことをリンクも含めて書いてもよろしいですか?
Posted by かずね at 2006年06月22日 09:17
>かずねさん、こんにちはー♪
うまくいきましたか?オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
よかったですね〜♪yozoもお役に立ててうれしいですよ。

>このことをリンクも含めて書いてもよろしいですか?
どうぞ♪どうぞ♪うれしいですよ。m(_ _)m
Posted by かずねさんへ at 2006年06月22日 12:44
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/19324727

サイドバーのタイトルについて
Excerpt: seesaaで言うところの自由形式もずいぶんにぎやかになってきました。 最初はこうさぎだけだったのに、さすらいペットやハーボット、後姿ラブリー同盟のバナー。 増えるにつれて気になっていたのが、サイド..
Weblog: ペットの部屋
Tracked: 2006-06-29 01:57

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。