みみタブ。

私の使っているテンプレートは『シンプルベージュ』ですが

デフォだとヘッダー画像が無いんですよね


で、カスタムとかヘッダー画像付きのテンプレートじゃないとヘッダー画像をのせれないと

思っている方も多いと思うので、CSSのどこにヘッダー画像のURLを入れれば良いのかを

今日は書きたいと思います


知ってる人の方が多いかｗ


違ったらごめんｗ

作りながら学ぶ HTML/CSSデザインの教科書 [ 高橋朋代 ] 価格:3,024円 (2016/4/26 時点)

まず、用意するロゴの画像サイズを知りたいと思うので

CSSの編集を開いて

/* 　ヘッダー　  */

div#header {
	display:block;
	width:950px;
	height:212px;
	margin:0 auto;
}

を探します

このテンプレートだと、横が950pxで、縦が212pxって事なので

これに近いサイズで画像を用意します


縦は好きなサイズにしても良いと思いますが

横は大体合わせておいた方が無難です

じゃないと全体的にイジらないと変になると思われ


で、画像を作ったら画像管理でいつもの記事を書くように画像をアップロードします


そうしたら画像のURLを知りたいので、画像管理のファイル一覧のところで

右の方に【挿入】と【HTML】と書いてあるボタンがあると思うので

【HTML】を押します


そうすると

<a target="_blank" href="/*********/****/*********/****.jpg">
<img alt="****.jpg" src="/*****/****/**********/**********.jpg" border="0">

と横のバーに表示されるので

『href="/*********/****/*********/****.jpg"』の『”　”』の中身が画像のURLという事なので

これをさっきのヘッダーの所の『margin:0 auto;』の下にタグと共に貼ります

/* 　ヘッダー　  */

div#header {
	display:block;
	width:950px;
	height:212px;
	margin:0 auto;
　　　　 background:url(/*********/****/*********/****.jpg)left 20px no-repeat;
}

『left 20px』は左からの余白指定なのでお好きなように

『no-repeat』は繰り返すんじゃねーぞっていう指定です

『background:url』は背景画像のURLって意味です

知ってるって声があちこちから聞こえそうですが、一応ｗ


あとは

div#header h1{
	width:700px;
    word-break: break-all;
    font-weight:bold;
    font-size: 24px;
    padding:60px 0 0 0;
} 

のところでタイトルのところの文字の調整をします

まぁこれもお好きなように、としか言い様が無いんだけど…

とりあえず位置ですよね

『padding:60px 0 0 0;』のところで位置指定が出来ます

今は４つ書かれているので左から順に上、右、下、左の値が入っています

私の場合は『padding:80px 0 0 30px;』で指定してあります

もうこれは本当に個人の好みなので…


あと、私はこの下段に『font-weight: 700;』というのを足して、文字を太くしています


さらにその下の

#header .description{
	color:#6a5f4a;
	margin-top:10px;
	display:block;
}

で、タイトル下のブログ説明の文字の調整が出来ます

これも『padding:』を使って位置指定すれば結構良い感じになってきたのではないでしょうか…！！


大体さらさらっと流れを書きましたがいかがでしょうか？

とりあえず、最初のテンプレートでヘッダー画像が無くても後から追加出来るから

好きなテンプレート選んじゃいなよって話ですｗ


分からなかった人は一つ一つタグを調べてみると理解が深まると思うので是非調べてみてくださいね


っていう工業高校情報系学科卒 みみら の適当な説明でしたｗ