2010年12月25日

【第14回】記事の枠線と文字のスペースをあける

今回は、微調整をしてみたいと思います。

現在このブログは、Seesaaブログのこねこ(左サイドバー)というテンプレートに、今までの記事でご紹介したデザイン変更を加えてきています。

その結果、私自身が気に入るようなデザインになってきているわけですが、まだまだ微妙に感じている箇所もあります。

例えば、ここです。

SD_014_01.jpg


このテンプレートはそもそも枠線がなかったので違和感がなかったのですが、第5回で記事に枠線を付けた結果、その枠線と記事本文との間の隙間が狭く感じられるようになってしまいました。

今回は、この隙間を広げてみます。


さて、隙間については、以前第7回で一度説明しました。

.sidetitleクラスに設定したmarginプロパティがそれです。
このmarginプロパティは、ボックスの外側に隙間を設定するプロパティでした。

今回は、ボックスの枠線とその内側にある文章との隙間の調整です。
この場合は、marginプロパティではなく、paddingというプロパティを使います。

このpaddingプロパティを記事本文に適用するわけです。
記事本文を表すクラスは、第3回で記事本文のスタイルを太字でなくすときに一度取り扱いました。
.textクラスです。

どのくらいのスペースを設定するかは本当に個人の好みになってしまうのですが、現状は5pxしかあいていないので、これを15pxにしてみることにします。

★記事の枠線と文字のスペースをあける方法★

.textクラスのpaddingプロパティの値をふやす。

▼▼▼ 変更前 ▼▼▼
.text{
margin:0 0 0 0px;
color:#8C653F;
padding:10px 5px 10px 5px;
line-height:1.5;
/* ▼▼▼ 2010/12/12 【第3回】フォント太字設定削除 ▼▼▼ */
/* font-weight:bold; */
/* ▲▲▲ 2010/12/12 【第3回】フォント太字設定削除 ▲▲▲ */

}

▼▼▼ 変更後 ▼▼▼
.text{
margin:0 0 0 0px;
color:#8C653F;
padding:10px 15px 10px 15px;
line-height:1.5;
/* ▼▼▼ 2010/12/12 【第3回】フォント太字設定削除 ▼▼▼ */
/* font-weight:bold; */
/* ▲▲▲ 2010/12/12 【第3回】フォント太字設定削除 ▲▲▲ */

}
(注)灰色字箇所は、過去の作業で修正した箇所です。

このように変更すると、下図のように記事本文と枠線との隙間が広くなります。

▼▼▼ 変更前 ▼▼▼
SD_014_02.jpg

▼▼▼ 変更後 ▼▼▼
SD_014_03.jpg

変更した箇所がお分かりになるでしょうか。

ちょっとした違いではありますが、こういうちょっとした調整がサイト全体の見映えを左右することもあるので、自分が納得するまでいろいろ試してみましょう。


なお、paddingプロパティには、いくつか書き方があります。

例えば上記のように、

  padding:A B C D;

と書くと、これは

  ●上がA
  ●右がB
  ●下がC
  ●左がD

となることが決まっています。

また、

  padding:E F;

のように書かれていると、これは

  ●上下がE
  ●左右がF

であることを表します。

もちろんmarginのように、

  padding-top:G;

という形で、上の隙間のみを定義することもできます。

既にSeesaaで作成されているテンプレートを修正する場合には、これらの書式全てを覚える必要はありません。
ただし、テンプレートにどの形で記載されているかは理解できるようにしましょう。

今回は以上です。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

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