2010年12月19日

【第10回】ここまでのまとめ(第1回〜第9回)

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

Seesaaブログを便利に、そして自由に使うために、デザイン変更のノウハウをお伝えしようという趣旨で始めたこのブログも、だんだん記事が増えてきました。

そこで10回目となる今回は、これまでの第1回から第9回までに記載した内容をまとめつつ、簡単にご紹介したいと思います。



【第1回】このブログについて

第1回目の記事では、簡単に自己紹介を交えつつ、Seesaaブログのデザイン変更の実例としてこねこ(左サイドバー)テンプレートをベースに、ブログタイトルの文字の大きさを大きくする方法をご紹介しました。

修正した要素は#banner h1 a、使用したプロパティはfont-sizeです。

こねこ(左サイドバー)テンプレートは、その後現在に至るまで、記事に掲載している修正を徐々に加えつつ使用しています。

title_after.JPG



【第2回】デザインを変更する画面

今のところ、最も重要なコンテンツです。
なぜなら、この画面を使わずして、Seesaaブログのデザイン変更はできないので。

CSSの修正については全く実例を挙げていませんが、CSS変更画面の使い方については必ずこの記事をご覧下さい。

SD_002_02.jpg



【第3回】記事本文スタイルの変更

ブログの記事の文字スタイルを変更した回です。
こねこ(左サイドバー)テンプレートの本文文字が、全て太字となっていたため、この太字設定を削除しました。

修正したクラスは.text
この中のプロパティfont-weight:bold;を削除することで、本文文字を太字から通常文字へと変更しました。

SD_003_02.JPG



【第4回】サイドバーの文字を小さくする

今度は、サイドバーの文字サイズを変更した回です。

このテンプレートのデフォルト文字サイズは大きかったので、それを小さくしました。

使用したクラスは.side、修正したプロパティは第1回と同じくfont-sizeです。

SD_004_02.JPG



【第5回】記事に枠線を付ける

当初このブログは、Seesaaブログで使用されている要素を順に説明していこうかと考えていました。
しかしこの頃から、まずはこのこねこ(左サイドバー)テンプレートに修正を加えていきながら、その方法を公開する形になってきています。

この回では、ブログ記事に枠線を付ける方法をご紹介しました。

使用したのは.blogクラス。
この中に、border-topborder-rightborder-bottomborder-leftの各プロパティを書き加えて行きました。

SD_005_02.JPG



【第6回】サイドコンテンツに枠線を付ける

第5回と同様に、今度はサイドコンテンツに枠線を付ける方法を紹介した回です。

ただし、いざサイドコンテンツに枠線を付けてみると、他にもいくつかしなければならない作業がhっせいし、その後のサイドコンテンツシリーズにつながって行った回でもあります。

この回で使用したのは.sidetitleクラスと、第4回と同じ.sideクラス。
追加したプロパティは、第5回と同じborder系のプロパティです。

SD_006_04.JPG



【第7回】サイドタイトルのスペースを調整する

第6回でサイドコンテンツに枠線をつけたら、いろいろと課題が発生してしまいました。
その解決策の第1弾で、サイドコンテンツのタイトルと本文の枠線が微妙につながっていないという問題を解決する回になります。

この回で、初めてmarginプロパティの修正を行いました。
修正したクラスは、第6回と同じ.sidetitleです。

SD_007_01.JPG



【第8回】タグクラウドに枠線を付ける

第6回で発生した課題の解決方法第2弾。
この回では、タグクラウドの本文部分に枠線を付ける方法を紹介しています。

修正したクラスは、.side-tagクラス。
第5回と同じく、border系のプロパティを追加しています。

SD_008_01.JPG



【第9回】カレンダーに枠線を付ける

第6回で発生した課題の解決方法第3弾。
この回では、カレンダーに枠線を付ける方法を紹介しています。

Seesaaブログのサイドコンテンツって、様々な形式で様々なクラスを使用しているので、それぞれに設定が必要になってしまうんですよね。

この回で修正したのは、IDセレクタの#calendar
こちらに、第5回と同じくborder系のプロパティを追加しています。

また、枠線を付けた結果、カレンダーとその下のコンテンツとの隙間が気になりました。
そこで、第7回と同じくmarginプロパティを修正しています。

SD_009_02.JPG



以上が、第1回から第9回までの記事掲載内容になります。

具体的なCSSの編集内容については、それぞれの記事内でご覧下さい。

さて、今後なのですが、サイドコンテンツの枠線設定課題がまだ少し残っていますので、まずはそちらを解説していきたいと思います。

それから、このこねこ(左サイドバー)テンプレートのコンテンツのサイズ(横幅)がちょっと気になりだしているので、その修正に入っていこうと考えています。

これからも、徐々にコンテンツを増やしていこうと考えていますので、よろしくお願いします。

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

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ


ラベル:まとめ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2010年12月18日

【第9回】カレンダーに枠線を付ける

サイドバーのコンテンツに枠線を付けるシリーズ3回目。

今回は、カレンダーに枠線を付けてみましょう。

第6回でご説明したように、Seesaaブログのサイドコンテンツは通常、.sidetitle(タイトル)と.side(本文)の2つで構成されています。
また、第8回でご説明したように、Seesaaブログのタグクラウドは通常と異なり、.sidetitle(タイトル)と.side-tag(本文)の2つで構成されています。

カレンダーもまた、これらとは異なる構成となっています。

具体的には#calendarというIDセレクタで定義されています。

IDセレクタ?
また新しい言葉が出てきてしまいました。

CSSでは通常、以下のような文法で表記します。

  セレクタ { プロパティ:値; }

このセレクタに、定義の方法によっていくつか種類があるのです。
頭に何の文字もない文言で始まっているもの(例:body)は要素セレクタと言います。
このブログで最も高い頻度で使用しているドットで始まるもの(例:.side)はクラスセレクタ。
そして、今回のようにシャープで始まっているもの(例:#calendar)をIDセレクタと言います。

厳密には、これらは使用方法の上で違うところがあるのですが、既存のCSSを修正するだけの場合は特に意識する必要はありません。
今回のIDセレクタも、今までのクラスと同じようなものだと思って読み進めて下さい。


さて、今回の修正はカレンダーへの枠線の追加。
そして、カレンダーを定義しているのは#calendar

ということは、もうお分かりですね?
そう、このIDにborder系のプロパティを書きこんでいけばよいのです。

早速追加してみたのがこちら。

SD_009_01.JPG

これで、枠線の追加完了!

・・・と、ちょっと待った、何か変ですね。

カレンダーが、その下のコンテンツ(ここでは「最近の記事」)とくっついてしまっています。

・・・なるほど、カレンダーコンテンツは、その下側にスペースをあまりとっていない訳ですね。
ならば、そのスペースを修正してやれば良いことになります。

コンテンツの外側のスペースを修正する方法は、第7回で解説しました。
そう、marginプロパティです。

一般的なサイドコンテンツを定義している.sideクラスをよく見てみると・・・ありますね、margin-bottom:25px;と記載されています。
なので、今回のカレンダーでも、同じプロパティと値を使用してみましょう。
それで、一般的なサイドコンテンツと同じスペースが表示されるようになります。

★カレンダーに枠線を付ける方法(スペース調整含む)★

#calendar要素に、枠線を定義するborder系プロパティを追加する。
また、下側のスペースを調整するために、margin-bottomプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
#calendar {
text-align:center;
padding-bottom:10px;
}

▼▼▼ 変更後 ▼▼▼
#calendar {
text-align:center;
padding-bottom:10px;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;
margin-bottom:25px;

}

以上の修正を行うと、ご覧のようにカレンダーに枠線が付き、またその下のコンテンツとの隙間も表示されるようになります。

▼▼▼ 変更前 ▼▼▼
SD_006_05.JPG

▼▼▼ 変更後 ▼▼▼
SD_009_02.JPG

うまくできましたか?

今回はここまでです。

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

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

2010年12月17日

【第8回】タグクラウドに枠線を付ける

今回は前回に引き続き、第6回で付けた枠線の微調整です。

第6回の設定では、ご覧のようにタグクラウドのコンテンツ部分に枠線が表示されません。

SD_006_06.JPG

そこで今回は、このタグクラウドのコンテンツ部分に枠線を付けてみましょう。

第6回で解説した通り、Seesaaブログのサイドコンテンツは、通常.sidetitleクラス(タイトル)と.sideクラス(本文)の2つで構成されています。
そこで第6回ではこの2つに枠線を設定したわけなのですが、その結果タグクラウドの本文に枠線が付いていません。
ということは、タグクラウドの本文は、.sideクラスとは別の設定になっているということです。

そこで、タグクラウドの本文を定義しているクラスを探してみると、それは.side-tagクラスとなります。
ここに、第6回で設定したのと同じborder系のCSSを書き加えてやれば良いことになります。

★タグクラウドの本文に枠線を付ける方法★

.side-tagクラスにborder系のプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
.side-tag {
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
}

▼▼▼ 変更後 ▼▼▼
.side-tag {
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;

}

第6回の時と同様、このこねこ(左サイドバー)テンプレートでは.sidetitleクラスとの兼ね合いがあるので、上の枠線を除く3方の枠線を追加しました。

▼▼▼ 変更前 ▼▼▼
SD_006_06.JPG

▼▼▼ 変更後 ▼▼▼
SD_008_01.JPG

これで無事、タグクラウドの本文にも枠線が表示されるようになりました。

今回の修正は、以上になります。

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

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

2010年12月16日

【第7回】サイドタイトルのスペースを調整する

前回の修正で、サイドコンテンツに枠線を付けました。

しかし、その状態ではご覧のように、タイトルとコンテンツの間に微妙な隙間ができてしまっています。

SD_006_04.JPG

このままでは見栄えが良くないので、これを修正していくのが今回の内容になります。

さて、修正に入る前に、なぜこの状態で隙間があいてしまうのかを簡単に説明します。

第6回の修正を加えた状況では、サイドタイトルとサイドコンテンツの間で、少し枠線が途切れています。
これは、サイドタイトルとサイドコンテンツの間に隙間が存在していることを意味します。

具体的に言うと、サイドタイトルの設定の中に、サイドタイトルの外の下側にスペースを空けるという設定が存在しているのです。

CSSでボックスの外側に余白を取る設定は、marginプロパティで行います。

CSS変更画面でご覧頂ければわかるかと思いますが、サイドタイトルを定義している.sidetitleクラスの中に、margin-bottom:3px;というプロパティが設定されています。
これを、0pxに修正してやれば良いことになります。

★サイドタイトルの(下)外側のスペースを削除する方法★

.sidetitleクラスのmargin-bottom0pxに設定する。

▼▼▼ 変更前 ▼▼▼
.sidetitle{
background:url("https://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:3px;
font-weight:bold;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-left:1px solid #FF9900;

}

▼▼▼ 変更後 ▼▼▼
.sidetitle{
background:url("https://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:0px;
font-weight:bold;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-left:1px solid #FF9900;

}
(注)灰色字の箇所は、過去にこのブログで変更を加えた箇所です。

このような変更を加えると、ご覧のようにサイドコンテンツの枠線が綺麗につながって見えます。

▼▼▼ 変更前 ▼▼▼
SD_006_04.JPG

▼▼▼ 変更後 ▼▼▼
SD_007_01.JPG

以上で、今回の変更は完了です。

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

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ

posted by o(^0^)o ほくほく at 19:13| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2010年12月15日

【第6回】サイドコンテンツに枠線を付ける

前回で記事に枠線を付けたのと同じ要領で、今回はサイドコンテンツに枠線を付けてみたいと思います。

ただし、Seesaaブログのサイドコンテンツは、いくつかのクラスに分かれています。
よって、全てのサイドコンテンツに枠線を付けるためには、それぞれのクラス全てに枠線の設定を行う必要があります。

なのですが、今回はとりあえずサイドコンテンツに枠線を付ける方法を紹介したいと思いますので、主なサイドコンテンツに枠線が付く設定を1つだけ掲載したいと思います。

サイドコンテンツにどのようなクラスが存在するかや、それぞれの設定方法などについては、また別途紹介したいと思います。



さて、それでは今回は主なサイドコンテンツに枠線を付けてみます。

設定する枠線の種類は、前回で記事本文に付けた枠線と同じとします。
すなわち、

  ●枠線の上と左は通常線(1px)
  ●枠線の右と下は二重線(4px)
  ●枠線の色はオレンジ

です。

サイドコンテンツを定義するクラスは、実は以前に一度操作しています。
【第3回】記事本文スタイルの変更で設定を変更した.sideクラスがそれです。

つまり今回は、この.sideクラスに枠線を付けていけばいいのです。

簡単ですね。

・・・と言いたいところなのですが、実はちょっとだけ複雑です。
順を追って説明していきます。

★(失敗例1)サイドコンテンツに枠線を付ける方法★

.sideクラスにborder系のプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
.side{
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
font-size:11px;
}

▼▼▼ 変更後 ▼▼▼
.side{
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
font-size:11px;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;

}
(注)灰色字箇所は、以前このブログで追記したCSSです。

なぜこれを失敗例として掲載しているかというと・・・

▼▼▼ 変更前 ▼▼▼
SD_006_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_006_02.JPG

・・・変ですね、明らかに。

サイドコンテンツではなく、サイドコンテンツの本文部分にだけ枠線がついてしまっています。

つまり、.sideクラスは、サイドコンテンツの本文部分だけを定義しているクラスなのです。


それではどうするかというと、サイドコンテンツのタイトル部分を定義しているクラスにも枠線を付ければ良いことになります。

サイドコンテンツのタイトルは、.sidetitleクラスで定義されています。

★(失敗例2)サイドコンテンツのタイトルに枠線を付ける方法★

(上記に追加で).sidetitleクラスにborder系のプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
.sidetitle{
background:url("https://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:3px;
font-weight:bold;
}

▼▼▼ 変更後 ▼▼▼
.sidetitle{
background:url("https://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:3px;
font-weight:bold;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;

}

このようにした結果、サイドコンテンツはこうなります。

▼▼▼ 変更前 ▼▼▼
SD_006_02.JPG

▼▼▼ 変更後 ▼▼▼
SD_006_03.JPG

・・・
うーん、イタイ・・・
これでは、タイトルと本文がバラバラに見えてしまいますね。

でも、全体的には枠線は付いているので、あとはさじ加減で綺麗になりそうです。
具体的には、タイトルの下の枠線と、本文の上の枠線をなくせば、綺麗になります。

ということで、今回の正しい修正方法はこちらです。

★サイドコンテンツ(タイトルと本文)に枠線を付ける方法★

.sidetitleクラスと.sideクラスにborder系のプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
.sidetitle{
background:url("https://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:3px;
font-weight:bold;
}
.side{
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
font-size:11px;
}

▼▼▼ 変更後 ▼▼▼
.sidetitle{
background:url("https://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:3px;
font-weight:bold;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-left:1px solid #FF9900;

}
.side{
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
font-size:11px;
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;

}
(注)灰色字箇所は、以前このブログで追記したCSSです。

この変更によって、サイドコンテンツはご覧のようになります。

▼▼▼ 変更前 ▼▼▼
SD_006_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_006_04.JPG


うまくできたでしょうか。
これで、今回の作業は終了になります。

なお、今回の修正を実施すると、以下の点に気付くと思います。

  ●サイドタイトルと本文の枠線の間に、微妙に空白が空いている
SD_006_04.JPG

  ●カレンダーに枠線が付かない
SD_006_05.JPG

  ●タグクラウドの本文に枠線が付かない
SD_006_06.JPG

  ●広告のボックスに上の枠線が付かない
SD_006_07.JPG

カレンダーやタグクラウドの本文については、また別のクラスが定義されているため、今回の修正では枠線はつきません。
また、広告枠については、サイドタイトルがない形で表示されているために、タイトル部分の枠線が表示されていない形になります。

微妙な空白の問題も含めて、また別途解説します。

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

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

2010年12月14日

【第5回】記事に枠線を付ける

今回は、ブログの記事に枠線をつけてみましょう。

Seesaaブログのテンプレートこねこ(左サイドバー)は枠線のないテンプレートなので、これに枠線を付けるとブログ全体がぐっと引き締まって見えます。

ブログの記事を規定しているCSSのクラスは、.blogクラスです。

今回はこのクラスに、枠線を規定するプロパティ(border系)を書き加えていきます。

今回はまず、解説は飛ばして修正方法を掲載しましょう。

★ブログの記事に枠線を付ける方法★

.blogクラスに、枠線のプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
.blog{
padding-top:0px;
background-color:#fff;
margin-bottom:25px;
}

▼▼▼ 変更後 ▼▼▼
.blog{
padding-top:0px;
background-color:#fff;
margin-bottom:25px;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;

}

このようにCSSに変更を加えると、ブログが以下のように変わります。

▼▼▼ 変更前 ▼▼▼
SD_005_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_005_02.JPG

ブログの記事に、オレンジ色の枠線が付いたのがお分かりになるでしょうか。

以上が、今回の修正内容になります。


さて、今回付け加えたCSSについて、少し解説を加えていきます。

今回は、ブログ記事を表す.blogクラスに、以下の4つのプロパティを追加しました。

  border-top:1px solid #FF9900;
  border-right:4px double #FF9900;
  border-bottom:4px double #FF9900;
  border-left:1px solid #FF9900;


border-topというのは、枠線の上の部分を表します。
同様に、border-rightというのは枠線の右の部分。
border-bottomは枠線の下側で、border-leftは枠線の左側にあたります。

四方の枠線それぞれについて、プロパティを追加したわけです。

そしてもう少し詳細に説明すると、例えばborder-top:1px solid #FF9900;は、上の枠線を、1px幅通常線#FF9900(オレンジ)色で付与するという意味になります。

つまり今回追加したCSSは、1つの枠線に対して、幅と線種、そして色という3つのプロパティを同時に定義している書式になります。

上と左の枠線は、1px幅の通常線をオレンジ色で、
右と下の枠線は、4px幅の二重線をオレンジ色で設定しています。

ここまでは宜しいでしょうか。


さて、今回追加した枠線の定義ですが、実は別の書式でも同じ定義をすることができます。

例えば、border-topについて見てみましょう。

<今回の書式>
  border-top:1px solid #FF9900;

<別の書式>
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:#FF9900;

お分かりになるでしょうか。

今回使用した書式は、border-top-widthborder-top-style、そしてborder-top-colorを同時に定義している書式なのです。

つまり、今回私は線の幅と種類、色を同時に定義しましたが、場合によってはその一部のみを定義することが可能です。
例えば、幅や線種については特に何もなく、色のみを定義したい場合はborder-top-colorを使用すれば良いでしょう。
また、線の太さだけが気になる場合は、border-top-widthを使えば良いと思います。

時と場合に応じて、ご自分の好きな方法で枠線を定義すれば良いと思います。

以上、今回は記事に枠線を付ける方法でした。

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

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

2010年12月13日

【第4回】サイドバーの文字を小さくする

今回は、左サイドバーの本文文字の大きさを変えてみましょう。

現在、このブログの左サイドバーの本文文字は、デフォルト設定で記事本文の文字と大きさが同じになっています。

これはこれで良いのですが、個人的には、サイドバーは記事よりも幅も狭いですし、もう少し小さい文字の方がいいと感じています。

ということで、今回は左サイドバーの本文の文字を小さくしてみましょう。


さて、まずは第2回でご説明したCSS変更画面を開いて下さい。

このCSSの中で、左サイドバーの本文を規定しているセレクタのプロパティを変更することになります。
左サイドバーの本文を規定しているのは、.sideクラスです。

ところが、こねこ(左サイドバー)テンプレートでは、この.sideクラスの中に、フォントの大きさを指定するプロパティ(font-size)がありません。
つまり、左サイドバーの文字の大きさは定義されていないのです。

これはどういうことかというと、スタイルの継承にあたります。
個々のセレクタでプロパティが設定されていない場合、より上位のセレクタのプロパティが適用されるのです。
これをスタイルの継承と言います。

具体的に言うと、こねこ(左サイドバー)テンプレートの左サイドバーの文字の大きさは、より上位のbody要素のスタイルが継承され、適用されているのです。

こねこ(左サイドバー)テンプレートのbody要素の文字サイズプロパティの値設定は、以下の通りとなっています。

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

このfont-size:small;が、左サイドバーの本文文字にも適用されてしまっているのです。

ということは、このプロパティの値を変更すれば、左サイドバーの文字の大きさを変更することができるのですが・・・
このスタイルは、他の箇所にも継承されている可能性があるため、ここを修正してしまうとブログのデザインが大きく変わってしまう可能性があります。

ならばどうするかというと、スタイルの継承が左サイドバーに影響しないよう、左サイドバーで独自の文字サイズを定義してしまえばよいのです。
こうすれば、スタイルの継承は発生しません。


ということで前置きが長くなってしまいましたが、今回は以下のような修正を加えることにします。

★左サイドバーの文字サイズを小さくする方法★

.sideクラスに、プロパティfont-sizeを書き加える。

▼▼▼ 変更前 ▼▼▼
.side{
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
}

▼▼▼ 変更後 ▼▼▼
.side{
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
font-size:11px;
}

このように変更することによって、左サイドバーの表示が以下のように変わりました。

▼▼▼ 変更前 ▼▼▼
SD_004_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_004_02.JPG

今まで文字サイズが大きかったためにすぐ折り返されていた文字列が、少し見やすくなりました。

ここまでで、今回の左サイドバーの文字サイズを小さくする作業は終了です。


なお、今回はこねこ(左サイドバー)テンプレートをベースに説明したため、上記のような対応方法となっています。
他のテンプレートを使用していて、既に.sideクラスにfont-sizeプロパティが存在している方は、その数値を変更するだけでサイドバーの文字サイズを変更することができます。

以上、左サイドバーの文字サイズを小さくする方法でした。

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

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

2010年12月12日

【第3回】記事本文スタイルの変更

現在このブログで使用しているこねこ(左サイドバー)というテンプレート、結構気に入っています。

でも、ブログ記事本文のフォントが、全て太字になってしまうのが、ちょっと気になります。

記事を書く立場としては、強調したいところは強調したいので、その際に太字が使えない(なぜなら、他も全て太字だから)のは望ましくありません。

そこで、今回は、記事本文のスタイルを太字から普通に戻してみましょう。

まずは、前回ご説明したCSS変更画面を開いて下さい。

記事本文のスタイルを定義しているのは、.textクラスです。
そのfont-weightプロパティがデフォルトではboldになっているので、これを外してやれば良いわけです。

★記事本文を太字でなくする方法★

.textクラスのプロパティfont-weight:bold;を削除する。

▼▼▼ 変更前 ▼▼▼
.text{
margin:0 0 0 0px;
color:#8C653F;
padding:10px 5px 10px 5px;
line-height:1.5;
font-weight:bold;
}

▼▼▼ 変更後 ▼▼▼
.text{
margin:0 0 0 0px;
color:#8C653F;
padding:10px 5px 10px 5px;
line-height:1.5;
}

このようにCSSを変更してみた結果、記事本文の文字は現在のように通常の太さとなりました。
また、記事作成時に太字で設定した文字列が、他と違って目立つようになりました。

▼▼▼ 変更前 ▼▼▼
SD_003_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_003_02.JPG

以上で作業完了です。

今回は、ブログの記事本文のデフォルトフォントを太字でなくす方法でした。

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

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

2010年12月10日

【第2回】デザインを変更する画面

まずは基本ということで、今回はSeesaaブログのデザインを変更する画面を説明します。

Seesaaブログのデザインを変更するには、基本的には2つの画面を使用します。

★デザインを変更する画面★

 1.コンテンツ画面
 2.スタイルシート(CSS)変更画面


それぞれについて簡単に説明します。



1.コンテンツ画面

ブログの個々のパーツを配置/削除したり、そのパーツの詳細設定をする画面です。

SD_002_03.jpg

この画面の表示方法は以下の通りです。

 @管理画面で「デザイン」を選択する。
 A「コンテンツ」をクリックする。

この画面に関する説明は特に必要ないかと思いますが、この画面は事実上、ブログのHTMLを操作する画面に該当します。

また、個々のコンテンツの設定を変更したり、HTMLを修正することも可能です。
それらについては、また追い追い説明していきたいと思います。

コンテンツの変更した後は、B「設定を反映する」を押下すれば変更完了です。



2.スタイルシート(CSS)変更画面

ブログの全体的なデザインを変更する場合に使用するのが、このCSS変更画面です。

画面の表示方法は以下の通りです。

 @管理画面で「デザイン」を選択する。
 A「デザイン一覧」をクリックする。

そうすると、以下のような画面が表示されます。

SD_002_01.jpg

この画面で、Bの箇所にある、変更したいデザインを選択しましょう。

なお、ここで選択しているのは、このブログで使用しているこねこ(左サイドバー)のデザインです。

@〜Bの操作を実施すると、以下のような画面が表示されます。
この画面で、デザインを変更することになります。

SD_002_02.jpg

この画面は、先ほどのコンテンツ画面と異なり、ブログのスタイルシート(CSS)を変更する画面になります。
Cの欄内に表示されているのがCSSです。

CのCSSを変更し、Eの「スタイルシートを変更する」ボタンを押下すれば変更作業は完了となるわけですが、CSSの変更は影響が大きく、失敗するとブログの形そのものを壊してしまうことになりかねません。
そこで、CSSを変更した時は、必ずD「プレビュー」ボタンを押下して、変更後のブログ表示を事前に確認するようにしましょう。

また、変更を大きく誤ってしまった場合には、画面上部にある「初期値に戻す」ボタンを押せば、Seesaaブログで提供されているデフォルトのデザインに戻すことができます。

ということは、最悪の場合でも「初期値に戻す」ボタンを押せば良いわけです。
なので、失敗を恐れずどんどんデザイン変更にチャレンジしてみましょう!

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

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

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