メニュータイトルを均等割付に、変更。


/* ----------------------- menu_element_basis ----------------------- */
.mainMenu {
margin-bottom: 15px;
}
.menu_title {
margin: 0px 2px 7px ;
padding: 13px 18px 7px 5px;
/* border-bottom: 1px dashed #006599; バーを削除  */
background-image: url(画像のアドレス);
background-repeat: no-repeat;
background-position: -2px 0px;  /*アイコンの位置*/
text-indent: 15px; /*タイトルの書き始め*/
}

/* ----------------------- menu_element_background ----------------------- */



文字位置を1px下げて

文字終了位置を18px狭め

文字開始位置を5px左にずらした


って感じです(参考:変更前の数値

次に、


/* ----------------------- font-information ----------------------- */
body{
color:#000000;
font-size:12px;
}
.list{
font-size:10px;
}
#header h1 a{
color: #FFFFFF;
font-size: 30px;
font-weight: bold;
line-height: 115%;
}
#header h2{
color:#336699;
font-size:15px;
font-weight: bold;
line-height:150%;
filter: shadow(color=#99ccff, direction=135);
}
.menu_title {
color: #FFFFFF;
font-size:12px;
font-weight: bold;
text-align:justify; text-justify:distribute-all-lines;  /*均等割付の設定*/
}

の1行を追加。

AD

前回は、単純にアイコンを変更したんですが、今回は・・・って、今回もアイコンの変更ですが、見た目的にはプレートを使用

文字はそのままで、アイコンをプレート(こいつです=>アイコン )にすると大分雰囲気も変わるかなぁ・・・なんて。


実は、ずいぶん前からやりたかったんですが、絵もイルカ!(もしくはくじら)って決めていて、絵を描くのが面倒で後回しにしていました


/* ----------------------- menu_element_basis ----------------------- */
.mainMenu {
margin-bottom: 15px;
}
.menu_title {
margin: 0px 2px 7px;
padding: 12px 0px 7px 10px;

 /*最初の赤文字が、タイトルの文字の上の空白。次の赤文字が下の空白です。

  コレを調節してプレートを表示しました*/

/* border-bottom: 1px dashed #006599; バーを削除  */
background-image: url(画像のアドレス);
background-repeat: no-repeat;
background-position: -2px 0px;  /*アイコンの位置*/
text-indent: 15px; /*タイトルの書き始め*/
}

/* ----------------------- menu_element_background ----------------------- */


前回の変更に、上下の空白を追加して、バー(こんなの=>- - - - - )を削除しただけです

AD

アイコンの変更

テーマ:

/* ----------------------- menu_element_basis ----------------------- */
.mainMenu {
margin-bottom: 15px;
}
.menu_title {
margin: 0px 2px 7px;
padding: 3px 0px 3px 10px;
border-bottom: 1px dashed #006599;
background-image: url(画像のアドレス);
background-repeat: no-repeat;
background-position: 0px 2px;  /*アイコンの位置 横位置縦位置*/
text-indent: 22px; /*タイトルの書き始め 横位置*/
}


久々にちょっとだけいじってみました。

(本当にちょっとだし

AD

/* ----------------------- font-information ----------------------- */
body{
color:#000000;
font-size:12px;
}
.list{
font-size:10px;
}
#header h1 a{
color: #FFFFFF;
font-size: 30px;
font-weight: bold;
line-height: 115%;
}

#header h2{
color:#336699; /*文字色を変更*/
font-size:15px;
font-weight: bold;
line-height:150%;
filter: shadow(color=#99ccff, direction=135); /*エフェクトを追加*/
}


color:影の色

direction:影の角度



[影の角度]

0 = 上

45 = 右上

90 = 右

135 = 右下

180 = 下

225 = 左下

270 = 左

315 = 左上

タイトル画像を、h1(タイトル文字部分)の背景画像として表示します。


     ・
     ・
     ・
     ・
/* ----------------------- header ----------------------- */
#header{
height: 305px;        
background-color: #ffffff; 
}
#header h1 {
margin-left: 10px;   /* タイトル画像の位置調整の為数値を変更*/
padding-top: 120px;  /* タイトル画像の位置調整の為数値を変更*/
margin-bottom: 40px;
text-decoration: none;
}
#header h2{
margin-left: 20px; }
/* ----------------------- footArea ----------------------- */
/* ----------------------- font-information ----------------------- */
body{
color:#000000;
font-size:12px;
}
.list{
font-size:10px;
}
#header h1 a{
color: #FFFFFF;   /* 文字色を背景色と同じに*/
font-size: 30px;   
/* 文字のサイズを小さくしました*/

font-weight: bold;
line-height: 115%;
}
     ・
     ・
     ・
     ・
-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_a_ex.css
Version: 2005.03/03
Skin for: blue
-----------------------------------------------------
*/
     ・
     ・
     ・
     ・
#header {
background-image: url(http://画像のアドレス);
}
#header {
background-repeat:no-repeat;  
background-position: 95% 100%;
}

/* ココが今回の追加場所*/

#header h1{
background-image: url(http://タイトル画像のアドレス);
}
#header h1{
background-repeat:no-repeat;  /* 繰り返さない指定 */
background-position: 0% 100%; /* 背景画像のポジション指定 */
}

/* ココまで */

#header h2{  
width:40%;
}


赤文字が今回修正したところです。

力技?です


タイトルの文字サイズを修正すると、概要の位置が上に上がってくるので、その分タイトルの上位置の指定の数値を大きくして、タイトル画像の位置を修正してみました。


あくまでも、背景として指定しているので、タイトルの文字自体は残っています。

背景色と同じにして、文字サイズを小さくして隠していますが、タイトル画像次第では見えてしまうので、うまいこと調整してみてください。

(タイトル画像の上にタイトルの文字が表示されます)


こんな感じ?


/* ----------------------- header ----------------------- */
#header{
height: 305px;        
background-color: #ffffff; 
}
#header h1 {
margin-left: 20px;  
padding-top: 200px; /*更に数値を大きく*/
margin-bottom: 10px; /*タイトルの位置を下げた分概要との距離を小さく*/

text-decoration: none;
     ・
     ・
     ・
     ・
-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_a_ex.css
Version: 2005.03/03
Skin for: blue
-----------------------------------------------------
*/
     ・
     ・
     ・
     ・
#header h1{
background-image: url(http://タイトル画像のアドレス);
}
#header h1{
background-repeat:no-repeat;  
background-position: 0% 70%; /*画像の縦位置を少し上に移動*/

}

#header h2{  
width:40%;
}


で、文字色を背景色と同じにすると、大丈夫かな...?


※追記

タイトルの文字サイズを大きく修正してみた(見えないけれど、タイトル部のリンクを活用させるため)

それに併せて、タイトル部の縦位置も修正しました

タイトルの画像位置を修正。

それに伴い、タイトルの位置と画像の位置を変更。

/* ----------------------- header ----------------------- */
#header{
height: 305px;        <=画像の高さよりも大きい数値にしました※1
background-color: #ffffff; <=背景色を白に
}
#header h1 {
margin-left: 20px;  <=ブログ名の開始位置-横を変更
padding-top: 90px;  <=ブログ名の開始位置-縦を変更
margin-bottom: 40px;<=ブログ概要との距離を指定
text-decoration: none;
}
#header h2{
margin-left: 20px;   <=ブログ概要の開始位置-横を変更
}
/* ----------------------- footArea ----------------------- */
/* ----------------------- font-information ----------------------- */
body{
color:#000000;
font-size:12px;
}
.list{
font-size:10px;
}
#header h1 a{
color: #FFFFFF; <=ブログ名の文字色を変更
font-size: 40px;

font-weight: bold;
line-height: 115%;

}
#header h2{
color:#cc6600; <=ブログ概要の文字色を変更
font-size:13px;
font-weight: bold;
line-height:150%;

}




-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_a_ex.css
Version: 2005.03/03
Skin for: blue
-----------------------------------------------------
*/




#sub_b{
display: none;
}
#header {
background-image: url(http://画像のアドレス);
}
#header {
background-repeat:no-repeat;    <=画像の繰り返さない指定。

background-position: 95% 100%;  <=画像の表示位置を指定。

(最初のパーセンテージが横位置、次が縦位置)

}
#header h2{   <=ブログ概要の幅をパーセンテージで指定。
width:40%;
}

※1画像のサイズよりも大きいサイズを指定することによって、画像の位置指定で縦位置100%(下位置)を指定すると、画像の上にスペースを出すことが出来ました

シンプルスキンを使用して、変更を行っていこうと思います。

その、一部始終をこちらにUPしていこうと思います。

1.シンプルスキンを選択して、「2コラム-記事右 」「横幅可変」を選択。

2.カスタマイズで、画像を選択

  (色なんかもここである程度指定しておくと楽かも...)

3.CSSの編集

/* ----------------------- header ----------------------- */
#header{
height: 211px; <=画像の高さ
background-color: #000000; <=背景色※1
}
#header h1 {
margin-left: 160px; <=ブログ名の開始位置-横
padding-top: 65px;  <=ブログ名の開始位置-縦
text-decoration: none;
}
#header h2{
margin-left: 170px;  <=ブログ概要の開始位置-横
margin-right: 120px;  <=ブログ概要の終了位置-横
}
/* ----------------------- footArea ----------------------- */
/* ----------------------- font-information ----------------------- */
body{
color:#000000;
font-size:12px;
}
.list{
font-size:10px;
}
#header h1 a{
color: #FFFFFF; <=ブログ名の文字色※1
font-size: 40px;  <=ブログ名の文字のサイズ
font-weight: bold; <=ブログ名の書体(?ここでは太字の指定)

line-height: 115%; <=ブログ名の行間
}
#header h2{
color:#FFFFFF;  <=ブログ概要の文字色※1
font-size:13px;  <=ブログ概要の文字のサイズ

font-weight: bold; <=ブログ概要の書体(?ここでは太字の指定)
line-height:150%; <=ブログ概要の行間
}

※1画像が表示されない時のために、文字色と背景色はまったく違う色を指定しておいたほうがいいかもしれません。

2.で画像を選択しておくと、CSSの一番下に↓が追加されます。

これを使うとラクチンなので、ここで画像を変更。

(画像フォルダに入ったもので問題ない場合は修正不要です)

-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_a_ex.css
Version: 2005.03/03
Skin for: blue
-----------------------------------------------------
*/




#sub_b{
display: none;
}
#header {
background-image: url(http://画像のアドレス); 
<=ここで画像のアドレスを指定します
}
#header {
background-repeat:repeat-x; 
 <=ここで画像の繰り返し指定をしています※2
}

※2繰り返したくない場合は、repeat-x → no-repeat に変更してください。

今度は、タイトルや、メニュータイトルの文字色を変更してみました。

/* ----------------------- font-information ----------------------- */
body {
color: #000000;
font-size: 11px;
}
.list{
font-size:10px;
}
#header h1 {   

↑ このh1って言うのが、ブログ名(ここで言う場合の「凱バカ日記」)に対応しています。


font-size: 25px;  <=この数値を大きくすると、ブログ名が大きくなります
}
#header h1 a {
color: #663300;

↑コレが、ブログ名の色を指定しているところ。
6桁の数値を修正すると、色が変わります。


}

↓ちなみに、h2はブログの概要に対応しています。
修正方法は同じです。


#header h2 {
color: #7D6860;
font-size: 12px;
font-weight: normal; 
}

↓ここが、メニュータイトルに対応しています。
修正方法は同じです。


.menu_title {
color: #663300;
font-size:12px;
font-weight: bold;

↑ちなみにここで、「太字」の指定をしています
}

...こういうのお役に立つかしら?

まぁ、後でまた修正する時用ってことで(^^;;

詳しくはないけれど、ちょっといじってみた。

説明

/* ----------------------- header ----------------------- */
#header{
display: block;
width: 760px;      ・・・ ①
margin-bottom: 22px; ・・・ ③
padding-bottom: 0;
height: 170px;     ・・・ ②
text-align: left;
}
#header h1 {
padding-top: 100px;  ・・・ ④
margin-left: 200px;   ・・・ ⑥
margin-bottom: 40px; ・・・ ⑤
}
#header h2{
margin-left: 100px;   ・・・ここは、概要の開始位置
}
/* ----------------------- footArea ----------------------- */





/* ----------------------- background-color-control ----------------------- */
body {
background-color: #FFFFFF;
}
#frame {
}
#subFrame {
background-image: url(
http://ここに画像のアドレス);
background-repeat: no-repeat;
background-position: center top;
}

こんな感じでいじってみました。

ちなみに、②は優先順位が低いようで、

③で指定された開始位置よりも②で指定した数値のほうが大きい場合に反映するようです。