今日は、娘の学校も塾もお休みなので、コメントいただいたし、気分よく続けたいと思います・・・雨風呂改造編。
■リンクの色を変えてみよう
/* ----------------------- common ----------------------- */
a {
color: #0000FF;
}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {color: #ccffff; background:#666;}
input,textarea{font-size:12px}
ul,ol,dl,li,dt,dd{
list-style-type:none;
}
今回の改造では、hoverを変えただけです。
最初は、
a:hover {text-decoration: underline}
となっていたのですが、これはマウスを文字に載せるとアンダーラインが出るだけなので、色が変わるように設定しました。colorは文字の色、backgound は背景色。マウスを乗せると色が変わります。
■フレームの幅を変えてみよう
アメブロは760pxでフレームが固定されているようです。３列と２列に変えられるけど、バランスが変わるので、わたしの場合は思い切ってフレームの幅も列の幅も変えてしまいました。
(1) 全体的にフレームの幅を変える
/* ----------------------- common ----------------------- */
#frame {
width: 670px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#subFrame {
}
#wrap {
position: relative;
width: 670px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
/* ----------------------- header ----------------------- */
#header{
display: block;
width: 670px;
margin-bottom: 19px;
padding-bottom: 0;
height: 130px;
text-align: left;
}
上のタグの３箇所に、width: 670px; が入っています。この数字を変えるとフレームの幅が変わります。その時、headerも変えないと上と下のバランスが崩れる可能性が。スキンによっては、内側にさらにフレームを設定している場合があるので、要注意。
注） ヘッダーの幅を変えただけで、全部広がった。
何でですか～？
(2) 部分的にフレームの幅を変える
/* ----------------------- MainColumn ----------------------- */
*/
#main{
width: 400px;
margin-right: 230px;
}
#sub_a{
width:210px;
float: right;
z-index: 1;
}
#sub_b{
display: none;
}
#main は記事のある部分です。２列だとオリジナルはかなり幅が広かったので縮ました。３列だと width: 390px なんですよね。わたしは２列なのに、400pxに変更。
#sub_a、#sub_b は、それぞれメニューのある部分で、わたしは #sub_b は使っていません。#sub_a は最初 180px だったんですけど、少し広げて 210px にしました。
#main の margin-right: 230px; も後から挿入しています。#sub_a が 210px なので、自動調整ではなく margin-right （右側の空き部分）を 230px に指定しました。これによって、#main の記事幅を広げると、左側に伸びることになります。
(3) コメント投稿欄の幅を変える
こんなのはしなくてもいいし、わたしはＩＥで確認しているだけなので、Macではどのように見えるのか、実は不安で一杯ですが、少しいじりました。
/* ----------------------- MainColumn ----------------------- */
#f_name,#f_url,#f_title{
display:inline;
width: 220px;
margin-bottom: 3px;
margin-left: 6px;
}
#f_com{
display:inline;
width: 295px;
height: 120px;
margin-bottom: 3px;
margin-left: 6px;
}
どこを変えたか分かるかな。#f_name,#f_url,#f_title,#f_com{ } から#f_comを独立させ、width: 295px; と height: 120px; を加えました。コメント投稿欄のフォームの大きさを変化させるためです。ココログはもっと高さがあるので、わたしももう少し広くしてもいいかな、とも思っています。
■フォントを変えるには
/* ----------------------- font-information ----------------------- */
body {
font-family:palatino, georgia, "MS UI Gothic", "Osaka", times new roman, serif;
color: #6666ff;
font-size: 12px;
}
フォントを変更するには、
font-family:palatino, georgia, "MS UI Gothic", "Osaka", times new roman, serif;
という具合にタグを書けばよいのだけれど、そうするとバランスが変わるのでわたしは今のところ、
body {
color: #6666ff;
font-size: 12px;
}
文字の色だけ変えています。
文字の大きさも、記事のところだけ大きくするには、
.entry .contents p,
#message .contents p {
font-size: 12px;
line-height: 150%;
}
の部分の12px を 14px に変えるとたしかに大きくなるんだけど、何となくバランスが悪いので、変更はしていません。ちなみに
★entry .date （日付）
★#message .contents p （記事）
★.entry .theme （テーマ）
★.entry .title （タイトル）
★.entry .foot （フッター： ｜この記事のＵＲＬ｜コメント｜トラックバック｜と並んでいるところ）
それぞれの文字の大きさを指定できます。フォントも一緒。font-familyをお好きなところに加えて、オリジナルな雰囲気を～☆ font-weight: bold; は太字。
今のままだと、読みにくいのよね・・・どーしよう。
短歌のブログだから、いいんだけどね・・・たぶん。
⇒カラーチャート： 『ZSPC Super Color Chart』
