上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 テンプレート、「カスタム・全部のせ」のヘッダー画像カスタマイズ解説ページです。

 ダウンロードページにて公開している画像を、テンプレートの「ヘッダーの背景画像」に組み込む手順を紹介しています。

■ヘッダー素材ページはこちら。
ヘッダー素材・ダウンロードページ



【1】まずは画像をダウンロード



 素材ページに行ったら、まずは素材をパソコンに保存します。
 保存の手順は…

  • 画像の上で、マウスの右ボタンをクリック
  • 「名前を付けて画像を保存」
  • 保存画面が出たら、フォルダをデスクトップ等の分かりやすい場所に設定し、保存します。


画像を当サイトから直接呼び出さないようにしてください。(直リンクの禁止
 規約違反に当たる可能性があります。使うときは、必ずこの手順で、自分のブログスペースに画像をアップロードしてからご利用ください。





【2】自分のブログに画像をアップロード



  • FC2IDからブログへログインします。
  • サイドバーメニューの「ツール」「ファイルのアップロード」画面へ進みます。
  • 「参照」ボタンを押して、先ほど保存したフォルダを開き、ダウンロードした画像を選択します。
  • 「アップロード」ボタンクリックでアップロード完了です。

  • アップロードしたら、アップロードされた画像を確認します。サムネイルをクリック。
  • アドレスバー」の「画像URL」をコピーしておきます。





テンプレートを改造



 画像がアップロードできたら、テンプレートを改造していきます。
 まずは「テンプレートの設定」画面を開いて、「castam_all のスタイルシート編集」のテキストボックス、下の方のテキストボックスに注目します。

管理画面・スタイルシート編集



改造する場所を探す

 まずは、キーボードで「Ctrl」+「F」を押して、画面内検索ボックスを出します。
 そこに、以下の文字列で検索してみて下さい。



 すると、以下のような文章が出てきます。

a:active{
text-decoration:none;
}

/* レイアウト
---------------------------------------------------------*/
/* ヘッダーからフッターまでを囲むボックス */
#conteinar{
width:800px;
margin:0 auto;
}

/* ヘッダーボックス */
#header{
padding:10px 0;
margin:0 0 1px 0;
background:#b9ac85;
}
/* パンくずナビボックス */
#pan{
font-size:12px;
color:#fff;

 この、赤字部分を書き換えます。


画像URLを書き込む

background:#b9ac85;
  ↓
background:url("http://●画像のURL●.jpg") no-repeat left top ;


 太字部分は、【2】で、先ほどコピーしたURLを「ペースト」します。
 出来上がると、以下のような感じになります。

/* ヘッダーボックス */
#header{
padding:10px 0;
margin:0 0 1px 0;

background:url("http://abcdefg.jpg") no-repeat left top ;
}




保存の前に

 保存をすれば完了なのですが、その前にきちんと出来たか確認してください。
 「プレビュー」ボタンをクリックします。


■上手くいかないときは?

①画像のURLを確認。
②書き換えた部分に、全角文字が混じっていないか確認。
③「{ }」「;」などを、間違えて消していないか確認。




画像の場所整形

 画像は、予めヘッダーサイズより大きく作ってあります。
 そのため、「ちょっと真ん中に寄せたい」「ちょっと左に寄せたい」等の場合は、

background:#b9ac85;
  ↓
background:url("http://abcdefg.jpg") no-repeat left top ;

 この太字部分を修正します。

左上にあわせるleft top
真ん中上にあわせるcenter top
右上にあわせるright top
左にあわせるleft center
中心にあわせるcenter center
右にあわせるcenter right
左下にあわせるleft bottom
真ん中下にあわせるcenter bottom
右下にあわせるright bottom





タイトル文字のCSS編集



 ヘッダー画像を替えたら、ブログタイトルの文字色と背景色を変えたくなると思います。
 その時は、「テンプレート編集画面」「スタイルシート編集」のほうで、以下の言葉で画面内検索(Ctrl + F)を行います。



 すると、以下のようなコードが出てくるので、これを修正します。

/* ヘッダータイトル */
.title{
padding:0 20px;
background:#73695d; (※1)
border-top:2px solid #000;
border-bottom:2px solid #000; (※2)

}
.title h1{
font-size:20px;
letter-spacing:-1px;
}
.title a{
color:#fff; (※3)
}

/* ブログ説明文 */
.introduction{
font-size:12px;
margin:10px 30px
}


(※1)タイトルの背景色。これを消すと、透明になります。
(※2)タイトル上下のボーダー。
(※3)タイトルの文字色。

 さらに、「/* ブログ説明文 */」のところに、「color:#○○○○○○;」と、カラーコードを追加することで、ブログ説明文の文字色を変更できます。

【参照】
スタイルシートで遊ぶ part.1(<span>タグ編)
このエントリーをはてなブックマークに追加
Thu.01.27.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。