上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 Faith系のテンプレートは、ヘッダーを変えたり背景色を変えたりされることを前提に、プレーンなデザインにしてあります。
 ヘッダーは、初心者でも簡単に作ることが出来るので、こちらをカスタマイズの参考にしてください。


画像を作る


 まず、画像を作ってブログにアップロードします。
 画像のサイズは、横幅を1000px以上にしておくと、長さが足りなくて寸詰まりに途切れることはなくなります。
 また、高さは、任意で設定できます。高さは、ファイルをアップロードしたときに確認できるので、テキトウでも大丈夫です。

(1)
まずは、出来上がった画像を、デスクトップ等分かりやすいところに保存します。
 画像の拡張子は、写真ぽいなめらかな画像の時は「jpg」、アイコンっぽいのっぺりした画像であれば「gif」か「png」がお勧めです。


(2)
ブログ管理画面にログインし、「ツール」の「ファイルのアップロード」で、ファイルをアップロードしてみてください。
 ファイル:「参照」と言うボタンを押すと、フォルダが開きます。先ほど保存した「ヘッダー画像」を選択し、「アップロード」ボタンを押すと、画像が「オンライン上の、FC2サーバー(コンピューター)にある、あなた専用のブログ用のフォルダ」に保存できます。
 これで、ブログで画像が表示できる用意が出来ました。

(3)
アップロードされると、その画像がちっちゃいサムネイルで表示されると思います。そのサムネイルをクリックすると、画像ファイルが画面いっぱいに表示できるはずです。

 その画像のページのアドレスバーにあるアドレスをコピーしておきます。(http://~~.jpg のような表示がされる、ブラウザ画面の上の方にある文字列がそうです。)

※画像の大きさを知るには?
 画像を開いた画面で右クリック「画像の情報」或いは「画像のプロパティ」で確認することが出来ます。


テンプレートをカスタマイズ

 コピーまでが終わったら、次はいよいよテンプレートをカスタマイズします。
 管理画面、「テンプレートの設定」ページに移動してください。

 ページに移動すると、上部に「HTMLの編集」ボックス、下部に「スタイルシートの編集」ボックスが表示されます。
 その「スタイルシートの編集」に注目してください。


/* レイアウト
------------------------------------------------------------ */
body{
text-align:center;
background:#666 url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/3faith-black-001.gif") repeat;
}
#conteinar{
text-align:left;
width:960px;
margin:0 auto;
background:#fff;
padding:0 5px;
border-left:3px double #555;
border-right:3px double #555;
border-bottom:3px double #555;
}
#header{
text-align:left;
height:120px;
margin:0 auto;
background:#555 url("") no-repeat center bottom;
}
#navigation{
text-align:left;
width:960px;
margin:0 auto 1px;
background:#555;
}
.center_box{
width:760px;
float:right;
}


 このような記述があります。(テンプレートによって、若干異なります。)
 その「#header」の項目に赤字部分があります。
 その中の「青文字のダブルクォーテーション」の間に、先ほどコピーした「アドレスバーにあるアドレス」をペースとします。

 出来上がるとこのような形になります。

background:#555 url("http://~~~~.jpg") no-repeat center bottom;


 これで「保存」すれば完成します。
※ブログを確認したときに、最初は「キャッシュ機能」が働いて表示されていません。そのため、「ブラウザの再読込」を行ってください。

※画像の高さをぴったり合わせるには?
 ヘッダーの大きさを画像の高さと揃えるには、緑色文字に注目してください。
 120px(これもテンプレートによって異なります)というのがデフォルトです。
 これを、画像の高さのサイズと同じにします。



画像の位置を整える


 完成されたけど、画像の位置が左より過ぎる、右より過ぎるという場合は、先ほどの

background:#555 url("http://~~~~.jpg" no-repeat center bottom;


 こちらのコード、赤字を修正します。
 デフォルトではセンターにしてあります。
 左で揃える場合は、「left」に書き直し、
 右で揃える場合は「right」に書き直します。

 必ず半角英数字で書き換えてください。


「なごみ」テンプレートの場合


 なごみテンプレートの場合は、若干修正する部分が増えます。
 先ほどと同じ場所にある「#conteinar」に注目してください。

/* レイアウト
------------------------------------------------------------ */
body{
text-align:center;
background:#bdb6af url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/aqua-category-black-006.gif") repeat;
}
.body_skin{
background:url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/aqua-category-black-009.gif") repeat-y center top;
}
.body_bottom{
background:url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/aqua-category-black-018.gif") no-repeat center top;
height:30px;
}
#conteinar{
text-align:left;
width:960px;
margin:0 auto;
background:#fff url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/aqua-category-black-017.gif") no-repeat left top;
padding:0 0 20px;
}
#header{
text-align:left;
height:200px;
margin:0 auto;
background:url("") no-repeat center bottom;
}


 こちらの赤字の部分を消去します。
※最後の「;」は必ず消さないで残しておいてください。



 今回のポイント。
 今回のポイントは、「画像をアップロードする」「アドレスをコピーする」「スタイルシートの編集画面で、ペーストする」という3点になります。
 順を追っていけば、必ず出来ると思います。ご健闘をお祈りします☆

 その他、不明点や不具合などは、コメント欄の方からお願いいたします。


■その他のテンプレートのカスタマイズはこちらから。
テンプレート簡単カスタマイズ

■スタイルシートの解説についてはこちらから。
実用的スタイルシート入門


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