WebページHTMLCSS
【ブログカスタマイズ】CSS・CSS3をごにょごにょ使って、PC版ページをちょっとだけリッチにする方法！「背景に写真」編
ごにょごにょするのって楽しいですね。
どうも！
今日は久々に「Web屋さん」っぽい記事を書いていきたいと思います。
みなさんは、私のことを「ただずっとハトを撮ったり、台風のレポートをするヒマな人」とお思いのようですが、本職は「Web屋さん」です。
いや、ホントですって。
そんな被害妄想的な心配を払拭すべく今日はこんな記事を書くことにしたのです。
PCからこのブログをご覧になっている方は最近の変化にお気づきかと思いますが、そこらへんをどうやっているのかを、自分の勉強がてら、ログを残す意味で綴っていこうかと。
名付けて…
「リッチブログへの道!!」
（※HTML・CSSがちょこっと解る人向けなので、お前何言ってんの？って方は読み飛ばして最後のハトきちにだけ会いに行くのもいいと思います。おまけがありますよ～。）
STEP.01 背景いっぱいに写真をもって来ちゃおう！
「良い写真が撮れたから、大きく見せたい！」
「でも、ヘッダー部分に大きい写真もって来たらページが長くなってしまわないかしら…」
「背景がなんとなくさみしいわ…」
そんなアナタにオススメです。
まず、用意する写真のサイズは大き目（幅1,000ピクセル以上）にしておいてください。
比率は横：縦が4：3くらいがちょうどいいと思います。
■HTML側
<body>
<div class="backPhoto">
～中略～
</div>
</body>
HTMLでは、bodyタグの直下に新しくdivタグをつけるようにマークアップします。
■CSS側
.backPhoto {
background: url(入れたい画像のURL) center top repeat-y;
background-attachment: fixed;
width: 100%;
background-size: 100%;
}
こんな感じで記述してあげれば、写真がブログの背景に適用されます。
実は、ソースコードをテキストで表示させるのに相当手間取ってしまい、時間が無くなってきたので続きはまた次回！
次は何をしようかなぁ～？
■ハトきちも一言
※ハトきちが大きくなって戻らない場合は、画像以外のところをさわれば元に戻ります。
iOSではなぜか戻りませんね…
最後までお付き合いいただき、ありがとうございます！
では、また次回！
この記事へのコメント
＞ヒロさん
記事欄だけアルファかけることできます！
今度お教えしますね〜☆
記事欄だけアルファかけることできます！
今度お教えしますね〜☆
Posted by わくわく君（仮）
at 2014年08月12日 00:00
at 2014年08月12日 00:00写真とかなら この記事欄のアルファ値を指定して、半透明にしたくなりますね。
もしそんな方法あったら教えてください。
もしそんな方法あったら教えてください。
Posted by ｈｉｒｏ_slack at 2014年08月11日 21:12
at 2014年08月11日 21:12※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
画像一覧 
