こんにちは、ほくほくです。
今回も、ブログデザインのお話。
いよいよ、今回は記事コンテンツに枠をつけてみましょう。
これによって、ブログ全体の見栄えがぐっと良くなります。
ランキングクリック＆応援、よろしくお願いします
昔ほくほくが見たブログの比較サイトでは、「Seesaaブログはアフィリエイトに非常に向いている。ただし、ブログテンプレートのデザインが良くない」というコメントが記載されていました。
確かに、Seesaaブログのテンプレートは、枠線がない等コンテンツの境目が曖昧で、目が泳いでしまうものが多いように感じられます。
ならば、自分で枠線を付けて、お気に入りのデザインに変えてしまいましょう！
さて、前回（関連記事）までで、ブログのデザインはこうなっています。
これに、今回は記事の部分の枠線をつけていきましょう。
今回は記事が長くなってしまいますので、３つのステップに分けて説明します。
【１】枠線の種類
【２】記事パーツの構成
【３】CSSの編集
それでは早速始めます。
【１】枠線の種類
ここでは、CSSで設定可能な枠線の種類について説明します。
CSSでは、画像を枠線として使用することもできますが、値を設定するだけで表示可能な枠線の種類が１０種類ぐらい用意されています。
詳細は参考書を見て頂くとして、このブログに使用している枠線は、下記３種類です。
・solid：実線（記事の上と左の枠に使用）
・dotted：点線（記事のタイトルと本文の境に使用）
・double：二重線（記事の右と下の枠に使用）
これらの値を、CSSで枠線を規定する下記プロパティに設定することで、枠線を表示することが可能になります。
・border-top：上側の枠線
・border-right：右側の枠線
・border-bottom：下側の枠線
・border-left：左側の枠線
例えば下側に二重線の枠線をつける場合は、以下のように記載します。
・border-bottom:double #66CC33;
なお、最後についている#66CC33は枠線の色です。
【２】記事パーツの構成
次に、Seesaaブログでの記事パーツの構成を見てみましょう。
１つの記事は、実は３つのパーツから成り立っており、その３つを包括するもう１つのクラスと合わせて、合計４つのクラスがあります。
・.date：記事の日付部分を表すクラス
・.title：記事の見出し部分を表すクラス
・.text：記事の本文部分を表すクラス
・.blogbody：上記３つ全体を囲い込むクラス
ここでは、.titleと.blogbodyの２つのクラスのみ編集して、このブログのようなデザインにします。
【３】CSSの編集
それでは、いよいよCSSを編集してみましょう。
まずは、１つの記事全体の枠線の設定。
上図の赤線の部分の設定です。
記事の上側と左側に実線、右側と下側に二重線を設定します。
.blogbodyクラスの中に４つのプロパティを書き込みましょう。
書き込んだのは、border-top:solid 1px #66CC33;から下４行です。
これで、１つの記事全体の枠線が設定されました。
次に、記事の見出し部分の枠線の設定。
上図のグレー線部分の設定です。
こちらは、左側に大きめの二重線、下側に点線を設定します。
.titleクラスの中に２つのプロパティを書き込みましょう。
ちなみに、doubleの後ろの10px、dottedの後ろの1pxは、それぞれの枠線の太さを表しています。
記事タイトル左側の二重線は、かなり太めで設定しています。
以上で、記事部分の枠線が設定されたはずです。
早速プレビューで見てみましょう。
はい、こうなりました。
これで今回の作業は完了です。
（以下、次回です）
＜CSS編集関連記事＞
◆CSSでブログのデザインを変えてみよう！
◆①CSS編集の基本
◆②ページ全体の幅を広げる
◆③右サイドバーの幅を広げる
◆④左サイドバーとメインの幅を広げる
◆⑤背景画像を変更する
◆⑥記事コンテンツに枠線をつける
◆⑦サイドコンテンツに枠線をつける
＜参考書＞
◆スタイルシート辞典
◆HTMLタグ+スタイルシート辞典ちび
▼▼▼ 年利20%以上の簡単FXシステムトレード『o(^0^)o ほくほくFX』 ▼▼▼
◆投資資金の稼ぎ方タグ：ブログ
おぉー！いいじゃないですか(^_^)
とっても見やすくなりましたね。
この記事喜ぶ人多いと思いますよ♪
応援していきます
いろいろブログ直したいところが沢山あるんですが、なかなか手を付けることができなくて・・。
ブログのCCS編集すごくわかりやすいですね。
最近ブログの引っ越しも考えてます。
でもやっぱり手を付けることができなくて・・。
また遊びに来ますね。ポチっと！
私もシーサー使っているので参考にさせてもらいました(*^▽^*)
プレビューでは変わっているのになぜか反映されなくて困ってます(^▽^;)
勉強不足ですね(ﾉ_･｡)
次回も楽しみにしてまーす！応援ポチ♪
mikaさん、こんにちは。
せっかく勉強したので、知りたい方にお知らせすることにしました。
o(^0^)o――――――――――――――――
ankoさん、こんにちは。
ブログは、各社でサービスが違って、どのブログにするか迷いますよね。
ちなみにSeesaaは、最近とても使いやすくなりました。
o(^0^)o――――――――――――――――
主夫noMUNEさん、こんにちは。
サイトがプレビューと同じにならないのは、サイトへの反映が遅れているからだと思います。
時間が経てば反映されますが、急ぐ場合は「ブログ設定」画面で最新化してみるとうまくいきますよ。