こんにちは、ほくほくです。
今回も、ブログデザインのお話。
前回は、記事コンテンツに枠線を設定するところまで行きました。
今回は、サイドコンテンツにも枠線を設定し、デザインを仕上げてしまいましょう。
これで、当シリーズの全体的なデザイン設定は完了となります。
さて、前回(関連記事)までで、ブログのデザインはこうなっています。
もう、だいぶそれっぽくなってきましたね。
あとはサイドコンテンツにも枠線をつけて、全体的に見やすいデザインにしてしまいましょう。
さて、今回編集するクラスですが、.sidetitleクラスと.sideクラスになります。
・.sidetitle:サイドコンテンツのタイトルクラス
・.side:サイドコンテンツの内容を規定するクラス
前回の記事を参考にして頂ければ分かるかと思いますが、これらのクラスに枠線を表すプロパティを値と共に記入することになります。
早速記入してみましょう。
もうここまできたら、簡単ですよね。
なお、.sidetitleクラスには、あらかじめ下記のような枠線が設定されています。
border-bottom:solid 1px #66CC33;
これは邪魔なので、消した上で上図のように記入しましょう。
さあ、それではいよいよ編集結果の確認です。
プレビューボタンを押してみましょう。
きました!
このブログのデザインと同じものになっています。
これで完成!
お疲れ様でした。
余談ですが、Seesaaブログでサイドバーに並んでいるコンテンツには、別のクラスで規定されているものもあります。
今回説明した.side、.sidetitleクラスが最も一般的ですが、例えばタグクラウドの場合は.side-tagクラスが使用されています。
どのクラスを使用しているかは、どのコンテンツかに依存しています。
CSS画面で編集すべきクラスの確認方法としては、デザイン画面でコンテンツのHTMLを確認する方法があります。
確認したいコンテンツを、「デザイン」⇒「コンテンツ」画面上でクリックし、更に表示される画面右上のコンテンツHTML編集をクリックしてみましょう。
ここでは“自由形式”のHTML編集画面を開いてみます。
この画面を見ると、sidetitleとsideクラスが使用されていることが分かると思います。
枠線を設定しても表示されないコンテンツがあったら、そのコンテンツで設定すべきクラスを上の画面で調べて対応してみて下さい。
さて、自分で設定したCSSの内容を説明・公開しようと思って始めたこのシリーズ、随分長くなってしまいました。
(そして、かなり手間がかかってしまいました・・・)
自分ではその時々に試行錯誤しながら設定しているだけなのですが、整理して説明するのは難しいものですね。
残念ながら、これまで説明した全ての編集を行っても、このブログと全く同じデザインにはなりません。
隙間とか文字のサイズとか、困った時に随時編集し、そしてどこを編集したのか忘れてしまいました・・・(汗)
「ここはどうなっているの?」という部分がありましたら、コメントでお尋ね下さい。
サイトのアクセス数は、そのブログのデザインも大きく影響するのだとか。
今回は自分の好きなようにデザインを変えてみましたが、これからも読者が見やすくなるようなデザイン変更を行っていきたいと思います。
<CSS編集関連記事>
◆CSSでブログのデザインを変えてみよう!
◆@CSS編集の基本
◆Aページ全体の幅を広げる
◆B右サイドバーの幅を広げる
◆C左サイドバーとメインの幅を広げる
◆D背景画像を変更する
◆E記事コンテンツに枠線をつける
◆Fサイドコンテンツに枠線をつける
<参考書>
◆スタイルシート辞典
◆HTMLタグ+スタイルシート辞典ちび
◆投資資金の稼ぎ方
タグ:ブログ
自分で、ブログの背景とか、
枠&帯とか、製作してるのですか?
HP作る時は、作りました??気がします。
すみれは、日経&ダウU為替のを、貼りたいです
何処に、ありますか?
すみれさん、こんにちは。
このブログでは、基本的なデザインや画像などは、テンプレートのものを流用しています。
テンプレートそのものが良いので、結構使いやすいですよ。
さて、お問い合わせのブログパーツですが、こちらにあります。
http://blogparts.nomaki.jp/b_kawase.htm
ただし、Yahoo!ブログはWiki文法なので、そのままタグを張り付けても表示されません。
まだほくほくも試していないのでできるかどうかわかりませんが、一応こちらの記事を参考にやってみてください。
http://blogs.yahoo.co.jp/hoku_hoku_123/12984856.html