chiho-sample01のブログ

chiho-sample01のブログ

【サンプルテキスト】~CPM公認セラピスト 蒼海なおみです。
自分を見つめ 思い通りのストーリーにする!
あなたは あなたの人生の主役
~素晴らしい主役を演じているすべての人に~

Amebaでブログを始めよう!

 

↓これがさっきまでのヘッダー(白背景)

 

↓これが新しいヘッダーです。(水色背景)

 

■文字位置の変更箇所

現状のまま画像だけ変えるとこんな状態です。
※このサンプルサイトは変更済みの状態です。

 

 

 

 (3-2) ブログヘッダーの

 

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}

この赤字の箇所を下記に変えてください。


padding:10px 30px;

--------------------------------------------------------------

 

画像の変え方は一番下。

 

その他拡張にヘッダー変更のコードを追加をしているようなので、ここを変更してください。


/*
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*


 (4) その他、拡張


*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
*/


/* その他、拡張があれば記述 */

/* アメブロヘッダー画像設定用CSS貼り付けコード */
.skinHeaderArea{
  height:390px;
  background-image:url(//stat.blogskin.ameba.jp/blogskin_images/20120503/16/60/93/j/o06400420mama-kaihou1336029409729.jpg);
  background-repeat:no-repeat;
  background-position:center top;
}

 

②画像をCSS編集のページでアップロードして、コードをCSSに貼ります

 

 

background-image:url(//stat.blogskin.ameba.jp/blogskin_images/20120503/16/60/93/j/o06400420mama-kaihou1336029409729.jpg);

()内のURLを表示したい画像のURLに変更します。

 

 

②画像表示サイズの縦幅を変更(画像サイズと同じに)

 

  height:390px;

  height:310px;

 

 

上記をやれば、画像の変更と文字位置の変更が出来ると思います。

 

変更したらF5キーを押してページの更新をしてから見てくださいね~。

 

 

●ヘッダーの上の余白 38px
※固定じゃないかも。なしにすることが可能。

●ヘッダーのサイズ 横980px
●ナビのサイズ   横980px
※縦のサイズは任意

【3カラムのサイズ】
●記事エリア  横470px
●サイドバー細 横180px
●サイドバー太 横300px

3カラム


【2カラムのサイズ】
●記事エリア 横665px
●サイドバー 横300px

2カラム