2011年01月31日

【第50回】ここまでのまとめ(第41回〜第49回)

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

早いもので、このブログも始めてから50記事目に到達しました。

始めは軽い気持ちで書き始めたブログだったのですが、いざ書いてみるといろいろと書くことがあって・・・
いつの間にか50記事です。

さて、50回目の今回は、恒例のまとめ記事です。
第41回から第49回で解説したデザインカスタマイズ方法の概要をお伝えします。

なお、それ以前の記事については、こちらをご覧下さい。

  ◆【第10回】ここまでのまとめ(第1回〜第9回)
  ◆【第20回】ここまでのまとめ(第11回〜第19回)
  ◆【第30回】ここまでのまとめ(第21回〜第29回)
  ◆【第40回】ここまでのまとめ(第31回〜第39回)



【第41回】背景画像を変更する

ブログの背景画像を設定する方法をご紹介しました。

ブログの背景画像は、設定するクラスによって表示位置が異なりますし、またブラウザのスクロールに合わせてスクロールさせる/させないの選択、繰り返し表示の有無など、様々な設定が可能です。

ブログの表情が大きく変わる設定です。

SD_041_02.jpg



【第42回】文字サイズの定義方法

残った未解説部分で、一番大きな変更、それが文字サイズの変更です。

このブログをご覧頂いても分かる通り、ブログは様々な大きさの文字で構成されています。
そして、それらを変更することにより、ブログの見た目も変わっていきます。

幸い、Seesaaブログのテンプレートでは、文字サイズの定義はある程度まとめて記載されています。

この回ではまず、文字サイズの定義方法によってはブラウザに依存してしまうことを解説し、以降の文字サイズ変更シリーズにつなげていきます。

SD_042_01.jpg



【第43回】ブログ全体の文字サイズを変更する

ブログの文字サイズの変更方法として、まずブログ全体の基本的な文字サイズの変更を解説しています。

ブログでは、文字サイズの定義がいくつかありますが、それ以外の部分には全体定義のサイズが適用されます。
この回では、その全体定義部分の変更方法を解説しています。

SD_043_01.jpg



【第44回】ブログ説明文の文字サイズを変更する

ブログのタイトルの下に表示されている、説明文の文字サイズを変更する方法を解説しています。

この回をご覧頂いても分かりますが、基本的に文字サイズの変更は、どのクラスがどの部分に適用されているかを把握してしまえば、あとは非常に簡単な作業になります。

SD_044_02.jpg



【第45回】タグタイトルの文字サイズを変更する

タグタイトルという、あまり耳にしない、そして使用頻度のあまり高くない箇所の文字サイズの変更方法を解説しています。

使用頻度が少ないとはいえ、閲覧者に見えるところ。
そういう細かいところにまで気を配る方は是非ご覧下さい。

SD_045_02.jpg



【第46回】サイドタイトルの文字サイズを変更する

このブログで何度もご紹介してきた、サイドバーコンテンツのタイトル。

この回では、その文字サイズの変更方法をご紹介しています。

SD_046_02.JPG



【第47回】記事タイトルの文字サイズを変更する

記事のタイトルは、ブログ閲覧者が最も頻繁に目にするところでもあります。
従ってその文字のサイズは、閲覧者が見やすいように、ブログ全体のデザインとの関係性も考慮して設定する必要があります。

と書くとなんだか難しく聞こえますが、要するに記事タイトルの文字サイズの変更方法です。

簡単ですので、お試しください。

SD_047_01.JPG



【第48回】記事日付の文字サイズを変更する

記事の上部に表示される日付もまた、閲覧者が目にしやすい箇所です。

第47回と同じく、大きさを調整してみましょう。

SD_047_02.JPG



【第49回】記事タグの文字サイズを変更する

あと、記事の中で文字サイズが気になる箇所は、記事に付けたタグの文字サイズです。

これ以前の回をご覧頂いていれば、簡単に変更することができると思います。

SD_049_01.jpg



以上が、第41回から第49回に掲載した内容になります。

第42回以降、文字サイズの話一辺倒になっていますが、あと少しで一通りの説明が終わりますので、どうぞよろしくお付き合いください。

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

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

2011年01月30日

【第49回】記事タグの文字サイズを変更する

今回は、タグ文字の文字サイズを変更してみましょう。

Seesaaブログでは、記事投稿時に、記事をカテゴライズするタグを設定することができます。
そしてブログ内で使用されたタグは、タグクラウドの中に、使用頻度を文字の大きさで表して表示されます。

SD_008_01.JPG

さて、このタグは、設定した記事にも当然表示されることになります。

記事の末尾右下に表示されるのがそれです。

SD_049_01.jpg

今回はこの文字サイズを変更してみます。

なお、Seesaaブログではこの箇所を、.tag-wordというクラスで定義しています。
よって今回は、このクラスのfont-sizeを変更していきます。

★記事タグの文字サイズを変更する方法★

.tag-wordクラスのfont-sizeの値を変更する。

▼▼▼ 変更前 ▼▼▼
.tag-word {font-size:x-small;}

▼▼▼ 変更後 ▼▼▼
.tag-word {font-size:10px;}

この結果、記事タグの文字サイズはご覧のように変更されます。

▼▼▼ 変更前 ▼▼▼
SD_049_02.JPG

▼▼▼ 変更後 ▼▼▼
SD_049_03.JPG

文字サイズの変更方法も、だいぶ要領が分かったかと思います。

font-sizeプロパティを修正するだけですから。

気になるところは、どんどん修正していきましょう。

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

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

2011年01月29日

【第48回】記事日付の文字サイズを変更する

今回は、記事の右肩に表示される日付の文字サイズを変更してみましょう。

Seesaaブログでは、記事に付随して表示される日付を.dateというクラスで定義しています。

従って今回は、この.dateクラスの中のfont-sizeプロパティの値を変更することになります。

★記事日付の文字サイズを変更する方法★

.dateクラスのfont-sizeプロパティの値を変更する。

▼▼▼ 変更前 ▼▼▼
.date {font-size:small;}

▼▼▼ 変更後 ▼▼▼
.date {font-size:13px;}

この結果、記事日付の文字サイズはご覧のように変化します。

▼▼▼ 変更前 ▼▼▼
SD_047_02.JPG

▼▼▼ 変更後 ▼▼▼
SD_048_01.JPG

文字サイズ一つで、随分とブログの表情が変わるものですね。

Seesaaブログはこのように、ブログデザインの自由度が非常に高いブログです。
是非自分が気に入るデザインを、カスタマイズして手に入れましょう!

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

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

2011年01月28日

【第47回】記事タイトルの文字サイズを変更する

今回は、記事のタイトルの文字サイズを変更してみます。

Seesaaブログでは、記事のタイトルはh3要素の.titleクラスで定義されています。

従って今回は、このクラスのfont-sizeプロパティの値を変更すれば良いわけですね。

早速やってみましょう。

★記事タイトルの文字サイズを変更する方法★

h3.titlefont-sizeプロパティの値を変更する。

▼▼▼ 変更前 ▼▼▼
h3.title {font-size:normal;}

▼▼▼ 変更後 ▼▼▼
h3.title {font-size:18px;}

このようにCSSを変更すると、ブログ記事のタイトル文字の大きさがご覧のように変更されます。

▼▼▼ 変更前 ▼▼▼
SD_047_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_047_02.JPG

簡単ですね。

今回のように、h3というHTML要素の後に続けて.titleというクラス定義を行った場合、その中の書式は、h3要素の中で使用した.titleクラスでのみ適用されます。
CSSでは、“.”で始まるクラス定義を、前に何も付かない形で定義するとブログ全体に適用、HTML要素の後に続けて定義するとその要素内のみに適用されるようになります。
CSSで効率の良いコーディングをする場合に有用な方法ですので、覚えておきましょう。

今回は以上です。

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

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

2011年01月27日

【第46回】サイドタイトルの文字サイズを変更する

今回は、サイドタイトルの文字サイズを変更してみましょう。

Seesaaブログでサイドタイトルを定義しているのは、第6回第24回でもご紹介したように.sidetitleクラスです。

従って今回は、この.sidetitleクラスのfont-sizeプロパティの値を変更すれば良いことになります。

★サイドタイトルの文字サイズを変更する方法★

.sidetitleクラスのfont-sizeプロパティの値を変更する。

▼▼▼ 変更前 ▼▼▼
.sidetitle {font-size:normal;}

▼▼▼ 変更後 ▼▼▼
.sidetitle {font-size:16px;}

このように変更すると、ブログのデザインが以下のように変わります。

▼▼▼ 変更前 ▼▼▼
SD_046_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_046_02.JPG

フォントサイズが大きくなったのがお分かりになるでしょうか。

今回の変更は以上です。

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

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

2011年01月26日

【第45回】タグタイトルの文字サイズを変更する

今回は、タグタイトルの文字サイズを変更してみます。

タグタイトルというのは、サイドバーのタグクラウドでタグを押下した時、記事エリアに表示される記事一覧の見出しのことです。

SD_045_02.jpg

あまり使用頻度が高くない箇所ではありますが、第42回で説明したように、ブラウザの表示設定依存となってしまっている部分ですので、ブラウザに依存しないように変更してみたいと思います。

★タグタイトルの文字サイズを変更する方法★

.tag-titleクラスのfont-sizeプロパティを変更する。

▼▼▼ 変更前 ▼▼▼
.tag-title {font-size:x-large;}

▼▼▼ 変更後 ▼▼▼
.tag-title {font-size:24px;}

これで、ご覧のようにタグタイトルの文字サイズが変更できます。

▼▼▼ 変更前 ▼▼▼
SD_045_01.jpg

▼▼▼ 変更後 ▼▼▼
SD_045_02.jpg

CSSでは、文字サイズの変更そのものは非常に簡単です。
ただ、ブログで用意されているCSSを編集する場合は、どのクラスがどこに適用されているのかを見極めなければなりません。

そんな時は、第13回でご紹介したCSSのクラスの調べ方を参考にして下さい。

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

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

2011年01月25日

【第44回】ブログ説明文の文字サイズを変更する

今回は、ブログ説明文の文字サイズを変更してみます。

ブログ説明文というのは、ブログのタイトルの下にある文章のことです。

ブログのタイトル部分の書式は#bannerで定義されており、この中でブログ説明文の書式を定義しているのは.descriptionクラスになります。
このクラスの、font-sizeプロパティの値を変更することになります。

★ブログ説明文の文字サイズを変更する方法★

#banner.descriptionクラスのfont-sizeプロパティを変更する。

▼▼▼ 変更前 ▼▼▼
#banner .description {font-size:normal;}

▼▼▼ 変更後 ▼▼▼
#banner .description {font-size:14px;}

この結果、ご覧のようにブログ説明文の文字サイズが変更されます。

▼▼▼ 変更前 ▼▼▼
SD_044_01.jpg

▼▼▼ 変更後 ▼▼▼
SD_044_02.jpg

今回の変更は以上です。

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

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

2011年01月24日

【第43回】ブログ全体の文字サイズを変更する

前回、ブログの文字のサイズは、定義の方法によってはブラウザの表示設定次第で大きさが変わるというお話をしました。

そこで今回からは、ブラウザの表示設定に依存しない文字サイズの設定を行っていきたいとおもいます。

今回は、ブログ全体の文字サイズの変更を行ってみましょう。

ブログ全体というのは、ここでは個別に文字サイズの定義がされていない箇所全体のことを指します。
テンプレートによってその範囲は異なってきますが、このブログで使用しているこねこ(左サイドバー)テンプレートを前提とします。

CSSの変更箇所と、その影響範囲の参考にして下さい。

★ブログ全体の文字サイズを変更する方法★

body要素のfont-sizeプロパティの値を変更する。

▼▼▼ 変更前 ▼▼▼
body {font-family:"MS Pゴシック";font-size:small;}

▼▼▼ 変更後 ▼▼▼
body {font-family:"MS Pゴシック";font-size:13px;}

bodyというのはHTMLのbody要素のことを指し、要するにブログの表示部分全体のことです。

このbodyのfont-sizeを変更することによって、個別にfont-sizeが定義されている箇所以外はすべて文字サイズが変更されます。

▼▼▼ 変更前 ▼▼▼
SD_043_01.jpg

▼▼▼ 変更後 ▼▼▼
SD_043_02.jpg

ご覧のように、今回の修正で変更された箇所は以下の通りです。

  ●ブログのタイトル説明文
  ●ブログ記事の遷移リンク
  ●サイドバーのタイトル
  ●記事本文
  ●コメント欄

逆に言うと、これらの箇所の文字サイズは全てbody要素のfont-sizeで定義されているため、例えばコメント欄の文字のみを小さくする場合には、別途新たな定義付けが必要となります。

その新たな定義付けについては機会があればご紹介するとして、今回の修正は以上になります。

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

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

2011年01月23日

【第42回】文字サイズの定義方法

今回は、ブログの文字サイズとブラウザ表示について解説してみたいと思います。

自分のブログの文字サイズが、実は見る人によって異なっている可能性があるということをご存知ですか?

試しに、ブラウザの文字表示サイズを変更してみましょう。

ブラウザのメニューで表示文字のサイズ最大を選択してみて下さい。
(注)この時、ご自分の元の設定(下図では“中”)を忘れないようにして下さいね。

SD_042_01.jpg

そうすると、Seesaaブログのテンプレートこねこ(左サイドバー)のフォント設定では、ご覧のように表示が変わってしまいます。

▼▼▼ 変更前 ▼▼▼
SD_042_02.jpg

▼▼▼ 変更後 ▼▼▼
SD_042_03.jpg

ブログのタイトル文字のサイズ、その下の説明文、記事のタイトル、日付、本文文字サイズ等々、ほぼすべての文字が大きくなっているのがお分かりかと思います。

なぜこうなってしまうかというと、フォントサイズの定義が、ブラウザ依存の定義になっているからです。

例えば第1回で簡単に解説しましたが、ブログのタイトル文字は#banner h1 a要素で以下のように定義されています。

  #banner h1 a {font-size:x-large;}

このx-largeがタイトル文字の大きさを表しているわけなのですが、ご覧の通り「大きい」という意味で、それが何pxあるいは何ptなのかが分かりません。

これは、フォントサイズを7段階(xx-small、x-small、small、medium、large、x-large、xx-large)で定義する方法で、ブラウザの文字表示設定に依存してその大きさが変わるのが特徴です。
例えば小さな字を読みにくい人は、ブラウザの表示文字サイズを大きくすると読みやすくなるといったメリットがあります。

一方でこの定義方法は、ブログのデザインが、作る人と見る人で異なってしまうというリスクをはらんでいます。

この定義方法が良いかどうかは人によって意見が分かれるかもしれませんが、デザインも含めてブログを管理している立場から言えば、やはりフォントサイズは自分がイメージしているサイズで見てもらいたいもの。
見る人がブラウザの文字サイズ設定を大きくしていても小さくしていても、自分が思った通りのサイズで表示したいですね。

このように、文字サイズをブラウザの設定に依存させないためには、font-sizeを具体的な値で定義する必要があります。

例えばもう一度上の変更前/後の図を見比べて頂きたいのですが、この中でサイドコンテンツの本文文字サイズは変わっていないと思います。
これは、第4回で文字サイズを以下のように数値で定義しているからです。

  font-size:11px;

このようにfont-sizeを数値で定義してしまえば、ブラウザの設定によって文字の大きさが変わることがありません。

自分のブログの文字サイズを、ブラウザの表示設定に依存させたくない方は、font-sizeは数値で定義しましょう。

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

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

2011年01月22日

【第41回】背景画像を変更する

今回は、ブログの背景画像を設定してみましょう。

Seesaaブログのテンプレートこねこ(左サイドバー)は、背景画像が設定されておらず、背景色が白(#FFF)に設定されています。

今回はこの背景に、下の大きな画像を一つ設定してみます。

SD_041_header.jpg

さて、今回編集するのは、ブログ全体の背景。
そこで、ブログ全体を定義するクラスに背景プロパティを追記していくことになります。

第22回の記事でもご紹介したように、Seesaaブログでブログ全体を定義しているのは#containerです。

ここに、背景画像を定義するbackground系のプロパティを追記していきましょう。

★ブログに背景画像を設定する方法★

#containerの中に、background系のプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
#container{
width:840px;
text-align:left;
margin:0 auto;
background-color:#fff;
}
▼▼▼ 変更後 ▼▼▼
#container{
width:840px;
text-align:left;
margin:0 auto;
background-color:#fff;
background-image:url("http://seesaa-blog-design.up.seesaa.net/image/SD_041_header.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center top;

}

今回はこのように、4つのプロパティを追記してみました。

background-imageは、背景に表示する画像を設定するプロパティです。
url()の中に、表示する画像のURLを記載します。
自分で用意した画像のアップロードとURLの取得方法については、第24回を参照してください。

background-repeatは、背景画像の繰り返しを定義するプロパティです。
今回は値をno-repeatとし、背景画像を繰り返さない設定にしました。
なお、背景画像を繰り返し表示する例については、コメント欄の背景画像を設定した第38回を参照してください。

background-attachmentは、ブラウザ上での背景画像表示位置の固定/非固定を定義します。
今回はfixedとしており、ブラウザ上で画面をスクロールしても、背景画像はスクロールされない設定としています。

最後のbackground-positionは、背景画像の表示位置(水平方向、垂直方向)を定義するプロパティです。
今回は、水平方向はcenterすなわち中央寄せ、垂直方向はtopで上寄せにしています。

このようにCSSを変更すると、このブログのデザインはご覧のようになります。

▼▼▼ 変更前 ▼▼▼
SD_039_04.jpg

▼▼▼ 変更後 ▼▼▼
SD_041_01.jpg

おっと、タイトル画像があるので、背景画像が良く見えませんね。

そこで、タイトル画像をなくしてみましょう。
タイトル画像のクラスやプロパティなどは、第39回をご覧下さい。

▼▼▼ 変更後 ▼▼▼
SD_041_02.jpg

タイトル画像を消すと、ご覧のように背景画像が良く見えるようになりました。

ちなみにこの画像は、上記でbackground-attachmentプロパティで設定した通り、画面をスクロールさせても同じ位置に表示され続けます。

SD_041_03.jpg

おっと、記事本文の背景が白(#FFF)で定義されているので、背景画像が表示されません。

そこで、ここでは、記事本文を表す.blogクラスの背景色プロパティbackground-color:#fff;を削除してみました。
記事本文を表す.blogクラスについては、第5回で枠線を追加する際に一度説明しています。

SD_041_04.jpg

これで、記事本文の背景にも、画像が表示されるようになりました。

背景画像は、表示位置や繰り返し設定などによって、ブログの表情が変わってきます。
今回の解説はあくまでも一例ですので、background系のプロパティを上手く操作して、自分の気に入った背景を設定してみて下さい。

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

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

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