受験・就職・転職に役立つ情報館

曖昧なスタイルシートの知識でSeesaaブログをカスタマイズ4＆母の日のプレゼントどうする？

さてさて、今日はSeesaaブログのスタイルシートをカスタマイズしてブログのデザインをよくする方法をご紹介します。
ちょっと今読みづらいんですよねぇ、姉妹サイトである受験・就職・転職に役立つ筆記試験対策室が。

どうでしょう？何か読みにくい気がします。
というわけで、Seesaaブログのスタイルシートを編集して、記事内の文字の大きさを変える方法をご紹介します♪

どこで指定してるのかな～と探していると。
ありました！

div.text {
font-size:12px;
line-height:150%;
text-align:left;
margin:0 0 10px;
}

ですね。
このdiv.text要素のfont-sizeプロパティの値を変えてやれば、文字を大きくすることができます。
私は15pxに変えてみました。
んで「line-height:150%;ってどういう意味？」と疑問に思ったのですが。
前に書いた日記「曖昧なスタイルシートの知識でブログをカスタマイズ」に書いてますね。文字間の上下の幅を変えることができるプロパティでしたね。

150％になってるということは、フォントサイズに合わせて幅も広くなってくれるはずなので、このままで問題ないですかね。
で、次に「margin:0 0 10px;ってどういう意味？」と疑問に思ったのですが。
「いろいろ値変えてみれば間違い探して的にわかるだろう」と思いやってみたのですが・・・全然わからない！
というわけで、本を開くことにしました。

やはり曖昧では限界がありますね。
調べてみたところ、どうやらボックスの枠と隣接するほかのボックス領域との間隔（マージン）を指定するプロパティだそうです。
で、この場合のように0、0、10ｐｘと3つ並んでる場合は、上、左右、下、のボックス間の間隔を指定しているそうです。
なので値を変えてみたら・・・おー、確かに！下を100pxに変えると、

のように、大きな間隔が出来ました。
まあこんなに間隔はいらないので元に戻して。

記事内の文字の大きさが変更できたので、次はヘッダ画像を変えてみます。
ヘッダの背景を指定してるのは・・・これだ！

div#header {
background: #336699;
}

#336699は藍色っぽい色ですからね。
この背景のベタ塗りから、背景画像に変えたいと思いまして。
たぶん・・・

div#side-inner {
width:235px;
margin:30px 0 0 20px;

のwidthプロパティを変えればいけるんじゃないかと思ったので、「width：35px;」にしてみたんですよ。
そしたら・・・

のように、サイドバーの幅がすごく狭くなってしまいました（笑）
まあ本来の目的は、ヘッダ画像を変えることなので。

で、実際に変える場所は・・・先ほどと同じ、

div#header {
background: #336699;
}

ですね。ここがヘッダ部分を司っているので。ここに新たに、

div#header {
background: #336699;
background-image:url(http://papertest.up.seesaa.net/image/pictorialoffering.jpg);
}

を加えます。background-imageプロパティ。すると・・・

うまく変更はされました。でも、せっかくヘッダ画像「pictorialoffering.jpg」のサイズを、記事の幅600px＋サイドバーのコンテンツの幅235px＋余白の幅30px×3＝925pxに合わせたのに、びろーんと、記事とサイドバーを超えてヘッダ画像が伸びてしまってます。
これはカッコ悪いということで。ちゃんと935pxに収まるように再度、スタイルシート編集です。

div#header {
background: #336699;
background-image:url(http://papertest.up.seesaa.net/image/pictorialoffering.jpg);
background-repeat:no-repeat;
background-position:240px;
}

新たに、背景画像の繰り返しを司るプロパティで“繰り返さない”指定を「background-repeat:no-repeat;」で行い、さらに背景画像を左側から240px空けた位置から表示する指定を「background-position:240px;」で行いました。
ですがこれだと、PCやブラウザの違いで、画像がズレたりしてしまいましたので。

div#header {
background: #336699;
background-image:url(http://papertest.up.seesaa.net/image/pictorialoffering.jpg);
background-repeat:no-repeat;
background-position:center;
}

にしました。
すると、ブラウザやPCに依存することなくちゃんと画像が真ん中に表示されましたねー(^_^;)

これで完璧・・・と思いきや。ブログの説明が、ちょうど背景画像と背景の色との境目辺りからされているので、非常に読みづらいですね。
ブログの説明だけでなく、タイトルの位置も境目に来ちゃってるんですよー。
これも、スタイルシートをいじって変えたくなります。
まずはブログタイトルから。

div#header h1 {
color:#ffffff;
font-size:18px;
font-weight:bold;
line-height:18px;
text-align:left;
margin: 0px 0px 0px 20px;
padding: 10px 0px;
}

赤字の箇所を変えました。左側のマージンを20pxにすると、うまく余白が出来て読みやすくなりましたね。
マージンを一括して指定する場合、値を4つ並べたら、上、右、下、左、の順にマージンが指定されていきます。
次にブログの説明です。

span.description {
display: block;
color: #ffffff;
font-size: 13px;
font-weight: bold;
line-height: 150%;
text-align: left;
margin: 10px 0px 0px 20px;
padding: 0px 0px 10px;
}

同じくマージン、上に10px間隔を空けて、左に20pxの間隔を空けました。
ついでに説明文が灰色だったので白にして。font-weightプロパティという、フォントの太さを指定するプロパティをnormalから太くなるboldに変えてみましたね。
以上で、スタイルシート修正完了です。

さて、話題は変わりまして。

母の日が来週に差し迫っていますので。
私が探したプレゼントを記載したいと思います。

雑誌やテレビでおすすめのバッグなど、バッグをプレゼントするならここですね。

アクネスラボのパックは、2011年のベストコスメ賞を受賞したそうです。肌のたるみを気にしているお母さんにいいですねー。

窒素量1～1.2％の馬プラセンタを60％配合している高濃度プラセンタ美容液。エイジングケアにいいですね(^_^;)
シワ、シミ、ニキビ対策に効果ありと期待されている「オゾン＋ひまわり油」や、お肌の老化防止のためにヨーロッパで注目されている新天然素材「アルガトリウム」等も配合されているそうです。すごいですね。
パラベン（防腐剤）やアルコール、合成着色料や合成香料が未使用な点もステキです。
創業六十年の歴史が光る魚貝料理店「げん屋」。ここの板前さんがつくった生七味は、中尾彬さんもうまいと絶賛したそうです。