2008年07月13日

CSS編集F:サイドコンテンツに枠線をつける

header_17

こんにちは、ほくほくです。

今回も、ブログデザインのお話。


前回は、記事コンテンツに枠線を設定するところまで行きました。
今回は、サイドコンテンツにも枠線を設定し、デザインを仕上げてしまいましょう。

これで、当シリーズの全体的なデザイン設定は完了となります。

ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)
にほんブログ村 為替ブログへ ランキングクリック&応援、よろしくお願いしますexclamation にほんブログ村 為替ブログ FX システムトレード派へ
ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)


さて、前回(関連記事)までで、ブログのデザインはこうなっています。

design_20080608_05.JPG

もう、だいぶそれっぽくなってきましたね。
あとはサイドコンテンツにも枠線をつけて、全体的に見やすいデザインにしてしまいましょう。


さて、今回編集するクラスですが、.sidetitleクラスと.sideクラスになります。

 ・.sidetitle:サイドコンテンツのタイトルクラス
 ・.side:サイドコンテンツの内容を規定するクラス

前回の記事を参考にして頂ければ分かるかと思いますが、これらのクラスに枠線を表すプロパティを値と共に記入することになります。

早速記入してみましょう。

design_20080608_06.JPG

もうここまできたら、簡単ですよね。

なお、.sidetitleクラスには、あらかじめ下記のような枠線が設定されています。

  border-bottom:solid 1px #66CC33;

これは邪魔なので、消した上で上図のように記入しましょう。


さあ、それではいよいよ編集結果の確認です。
プレビューボタンを押してみましょう。

design_20080608_07.JPG

きました!
このブログのデザインと同じものになっています。

これで完成!
お疲れ様でした。


余談ですが、Seesaaブログでサイドバーに並んでいるコンテンツには、別のクラスで規定されているものもあります。
今回説明した.side、.sidetitleクラスが最も一般的ですが、例えばタグクラウドの場合は.side-tagクラスが使用されています。

どのクラスを使用しているかは、どのコンテンツかに依存しています。

CSS画面で編集すべきクラスの確認方法としては、デザイン画面でコンテンツのHTMLを確認する方法があります。

確認したいコンテンツを、「デザイン」⇒「コンテンツ」画面上でクリックし、更に表示される画面右上のコンテンツHTML編集をクリックしてみましょう。
ここでは“自由形式”のHTML編集画面を開いてみます。

design_20080608_08.JPG

この画面を見ると、sidetitleとsideクラスが使用されていることが分かると思います。

枠線を設定しても表示されないコンテンツがあったら、そのコンテンツで設定すべきクラスを上の画面で調べて対応してみて下さい。


さて、自分で設定したCSSの内容を説明・公開しようと思って始めたこのシリーズ、随分長くなってしまいました。
(そして、かなり手間がかかってしまいました・・・)
自分ではその時々に試行錯誤しながら設定しているだけなのですが、整理して説明するのは難しいものですね。

残念ながら、これまで説明した全ての編集を行っても、このブログと全く同じデザインにはなりません。
隙間とか文字のサイズとか、困った時に随時編集し、そしてどこを編集したのか忘れてしまいました・・・(汗)

「ここはどうなっているの?」という部分がありましたら、コメントでお尋ね下さい。


サイトのアクセス数は、そのブログのデザインも大きく影響するのだとか。
今回は自分の好きなようにデザインを変えてみましたが、これからも読者が見やすくなるようなデザイン変更を行っていきたいと思います。


<CSS編集関連記事>
  ◆CSSでブログのデザインを変えてみよう!
  ◆@CSS編集の基本
  ◆Aページ全体の幅を広げる
  ◆B右サイドバーの幅を広げる
  ◆C左サイドバーとメインの幅を広げる
  ◆D背景画像を変更する
  ◆E記事コンテンツに枠線をつける
  ◆Fサイドコンテンツに枠線をつける

<参考書>
  ◆スタイルシート辞典
  ◆HTMLタグ+スタイルシート辞典ちび

▼▼▼ 年利20%以上の簡単FXシステムトレード『o(^0^)o ほくほくFX』 ▼▼▼
1日わずか15分!半年で運用利回り17.8%の簡単システムトレード
  ◆投資資金の稼ぎ方
タグ:ブログ
posted by o(^0^)o ほくほく at 22:13 | Comment(2) | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
訪問ありがとう。

自分で、ブログの背景とか、

枠&帯とか、製作してるのですか?

HP作る時は、作りました??気がします。

すみれは、日経&ダウU為替のを、貼りたいです

何処に、ありますか?
Posted by すみれ at 2008年07月13日 23:42
o(^0^)o――――――――――――――――
すみれさん、こんにちは。

このブログでは、基本的なデザインや画像などは、テンプレートのものを流用しています。
テンプレートそのものが良いので、結構使いやすいですよ。

さて、お問い合わせのブログパーツですが、こちらにあります。
http://blogparts.nomaki.jp/b_kawase.htm

ただし、Yahoo!ブログはWiki文法なので、そのままタグを張り付けても表示されません。

まだほくほくも試していないのでできるかどうかわかりませんが、一応こちらの記事を参考にやってみてください。
http://blogs.yahoo.co.jp/hoku_hoku_123/12984856.html
Posted by ★ ほくほく o(^0^)o at 2008年07月15日 00:07
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。