パンダふるライフ

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。

こんばんわ、パンダです。

「はんだごて」のイントネーションで「パ・ン・ダ」・・
でございます。

今日はブログ・カスタマイズ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）となります。

駆け足ですが、できるだけ手間なしの「スマホからとってくるだけ写真」を
ヘッダーにする方法でした。スマホ画面の設定は次回にです。