経済指標flg_JPN.jpg
日本
flg_US.jpg
米国
flg_EU.jpg
EU
flg_UK.jpg
英国
flg_AUS.jpg
豪州
flg_NZ.jpg
NZ
雇用統計7/30(火)8/2(金)8/6(火)
政策金利8/1(木)8/6(火)8/7(水)
GDP
前月以前の経済指標スケジュールはこちら

2008年06月15日

CSS編集E:記事コンテンツに枠線をつける

header_16

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

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


いよいよ、今回は記事コンテンツに枠をつけてみましょう。
これによって、ブログ全体の見栄えがぐっと良くなります。

ー(長音記号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)

昔ほくほくが見たブログの比較サイトでは、「Seesaaブログはアフィリエイトに非常に向いている。ただし、ブログテンプレートのデザインが良くない」というコメントが記載されていました。
確かに、Seesaaブログのテンプレートは、枠線がない等コンテンツの境目が曖昧で、目が泳いでしまうものが多いように感じられます。

ならば、自分で枠線を付けて、お気に入りのデザインに変えてしまいましょう!


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

20080427_04.JPG

これに、今回は記事の部分の枠線をつけていきましょう。


今回は記事が長くなってしまいますので、3つのステップに分けて説明します。

  【1】枠線の種類
  【2】記事パーツの構成
  【3】CSSの編集

それでは早速始めます。



【1】枠線の種類

ここでは、CSSで設定可能な枠線の種類について説明します。

CSSでは、画像を枠線として使用することもできますが、値を設定するだけで表示可能な枠線の種類が10種類ぐらい用意されています。
詳細は参考書を見て頂くとして、このブログに使用している枠線は、下記3種類です。

  ・solid:実線(記事の上と左の枠に使用)
  ・dotted:点線(記事のタイトルと本文の境に使用)
  ・double:二重線(記事の右と下の枠に使用)

これらの値を、CSSで枠線を規定する下記プロパティに設定することで、枠線を表示することが可能になります。

  ・border-top:上側の枠線
  ・border-right:右側の枠線
  ・border-bottom:下側の枠線
  ・border-left:左側の枠線

例えば下側に二重線の枠線をつける場合は、以下のように記載します。

  ・border-bottom:double #66CC33;

なお、最後についている#66CC33は枠線の色です。



【2】記事パーツの構成

次に、Seesaaブログでの記事パーツの構成を見てみましょう。

1つの記事は、実は3つのパーツから成り立っており、その3つを包括するもう1つのクラスと合わせて、合計4つのクラスがあります。

design_20080608_01.JPG

 ・.date:記事の日付部分を表すクラス
 ・.title:記事の見出し部分を表すクラス
 ・.text:記事の本文部分を表すクラス
 ・.blogbody:上記3つ全体を囲い込むクラス

ここでは、.title.blogbodyの2つのクラスのみ編集して、このブログのようなデザインにします。



【3】CSSの編集

それでは、いよいよCSSを編集してみましょう。

まずは、1つの記事全体の枠線の設定。
上図の赤線の部分の設定です。

記事の上側と左側に実線、右側と下側に二重線を設定します。

.blogbodyクラスの中に4つのプロパティを書き込みましょう。

design_20080608_02.JPG

書き込んだのは、border-top:solid 1px #66CC33;から下4行です。
これで、1つの記事全体の枠線が設定されました。


次に、記事の見出し部分の枠線の設定。
上図のグレー線部分の設定です。

こちらは、左側に大きめの二重線、下側に点線を設定します。

.titleクラスの中に2つのプロパティを書き込みましょう。

design_20080608_03.JPG

ちなみに、doubleの後ろの10pxdottedの後ろの1pxは、それぞれの枠線の太さを表しています。
記事タイトル左側の二重線は、かなり太めで設定しています。


以上で、記事部分の枠線が設定されたはずです。
早速プレビューで見てみましょう。

design_20080608_05.JPG

はい、こうなりました。
これで今回の作業は完了です。


(以下、次回です)


<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 17:30 | Comment(4) | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
こんばんはmikaです。

おぉー!いいじゃないですか(^_^)
とっても見やすくなりましたね。

この記事喜ぶ人多いと思いますよ♪

応援していきます
Posted by 在宅ワークでアフィリエイト☆初心者のためのネットビジネス講座 at 2008年06月15日 21:38
こんばんは。
いろいろブログ直したいところが沢山あるんですが、なかなか手を付けることができなくて・・。
ブログのCCS編集すごくわかりやすいですね。
最近ブログの引っ越しも考えてます。
でもやっぱり手を付けることができなくて・・。
また遊びに来ますね。ポチっと!
Posted by anko at 2008年06月15日 23:08
こんにちは。
私もシーサー使っているので参考にさせてもらいました(*^▽^*)
プレビューでは変わっているのになぜか反映されなくて困ってます(^▽^;)

勉強不足ですね(ノ_・。)
次回も楽しみにしてまーす!応援ポチ♪
Posted by 主夫noMUNE at 2008年06月16日 17:42
o(^0^)o――――――――――――――――
mikaさん、こんにちは。
せっかく勉強したので、知りたい方にお知らせすることにしました。

o(^0^)o――――――――――――――――
ankoさん、こんにちは。
ブログは、各社でサービスが違って、どのブログにするか迷いますよね。
ちなみにSeesaaは、最近とても使いやすくなりました。

o(^0^)o――――――――――――――――
主夫noMUNEさん、こんにちは。
サイトがプレビューと同じにならないのは、サイトへの反映が遅れているからだと思います。
時間が経てば反映されますが、急ぐ場合は「ブログ設定」画面で最新化してみるとうまくいきますよ。
Posted by ★ ほくほく o(^0^)o at 2008年06月16日 23:30
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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