でございます。
今日はブログ・カスタマイズvol.1はヘッダー（ブログの一番上）に
写真をいれたり、変更する方法です。
写真がはいるとオリジナリティがあがりますよね。
今回は設定の仕方の練習なので、
写真にはこだわらないことをおすすめします（笑）
それよりも、アップロードして公開することが
大事です。
１．写真をチョイス
1.写真はスマホの写真からチョイスでOK
スマホから、「横型」の写真を探す。
もし、なかったら、カメラツールの中のトリミング＝切抜機能などで、
横型に切り抜いてもOKです。
2.写真サイズは横が650px〜1000px程度のもの
写真にもサイズがありますが、
ガラケーじゃなく、最近のスマホで撮影していれば十分なサイズなので、
細かいことは気にしないでOK。
参考：パンダふるライフのトップ画像は800px(ﾋﾟｸｾﾙ) × 450pxです。
スマホ写真をそのまま使って、本文の幅（サイドバーを含まない）程度に表示する場合650px程度でOKです。
3.自分が撮った写真を使う
ネットから拾ってきたり、メールでもらった写真は 著作権に注意が必要です。
まずは、自分が撮ったオリジナルの写真で、あたりさわりのない景色の写真なんかがいいです。
２．デザイン設定からシンプルを選ぶ
パンダふるライフは、デザイン設定でこのデザインです。
３．プログラムの書き換え
デザイン＞html＞CSS設定画面で以下の３点を設定します。
１．画像をいれる
２．タイトル文字の色と位置の調整
３．画像の幅の調整
初めての方向けのため、CSSをすでにカスタマイズしていない前提ですが、
CSSをいじってある方は、コピーをとってから始めましょう。
１．画像をいれる
URL以下に自分のいれたい画像のURLをいれる
２．タイトル文字の色と位置の調整
#header h1 a{color:以下にタイトル文字の色を英語で入力
ブログタイトルの文字（パンダふるライフ）は最初が黒。
背景が濃い色だと読みにくいことがあります。
読みにくい場合は、文字の色を変えることができます。
慣れたら#ffffffと16進数で入力しますが、
とりあえずはwhite black redとわかりやすい英語でOK。
padding:30px 20px;
写真の左端っこぴったりから文字が始まると窮屈なので、
少し内側(左から20px)に、上からも少し(30px)さげます。
３．画像の幅の調整
width:610px;
写真の幅は赤い線のように本文の幅にそろえるか、
ピンクの線のサイドバーまで含めた幅にするとキレイです。
画面の一番上の部分（header）の幅（width）を
記事の幅(width=650px)と同じ幅にそろえます。
記事の幅(width=650px)−左右の余白（padding20ずつ）が
画面の一番上の部分（header）の幅（610＝650-20-20）となります。
駆け足ですが、できるだけ手間なしの「スマホからとってくるだけ写真」を
ヘッダーにする方法でした。スマホ画面の設定は次回にです。
【このカテゴリーの最新記事】
