Mr.ポンバシのブログ改造術 part2
こんにちは
Mr.ポンバシです(^∇^)
実はこれ書くの2回目で、さっき全部書いたのを保存する際に
手違いで消えてしまいました…ヽ(ﾟ◇ﾟ )ﾉ
しかし、そんなことにめげずに頑張って書こうと思います！
では、前回の"ブログ改造術"シリーズでは動画を用いた、BGMの流し方について説明しました。
しかしあのやり方ではyoutubeでアップされていないBGMは再生できないというデメリットがありました。
今回はオーソドックスな方法を紹介するつもりでしたが、
2回連続でBGMの流し方っていうのも何なんで、今日は
ブログの背景画像の設定方法について説明しようかと思います。
まず"デザインの変更"でカスタム可能なデザインに変更します。
そしてCSS編集画面に行きます
ここまではOKですよね？
で、CSS編集画面の3分の1くらいのところに
/* ---------- background-color : 背景色 ------- */
と書いてあるところがあると思います。
ここのエリアを次のように書き換えてください(コピペでいいです)
分からない方はCSSの最後に次の記述をコピペしてください！
/* ---------- background-color : 背景色 ------- */
body{
background-color:#cccccc; /*背景色*/
}
body{
background-image:url(画像のURL) ; /*背景に画像*/
background-repeat:no-repeat ; /*繰り返さない①*/
background-position:center ; /*真ん中に配置②*/
background-attachment:fixed; /*スクロールしても位置固定③*/
}
#frame,
#sub_a,
#sub_b{
background-color:transparent;/*背景色を透明*/
}
div#footerArea{
background-color:transparent;/*背景色を透明*/
border:none;/*線を消す*/
}
━─━─━─━─━─━─━─━─━─━─━─━─━（ここまで）
①
画像を繰り返さない場合はno-repeat
画像を縦に繰り返す場合はrepeat-y
画像を横に繰り返す場合はrepeat-x
②
真ん中に配置する場合はcenter
上に配置する場合はtop
下に配置する場合はbottom
右に配置する場合はright
左に配置する場合はleft
左上の場合は"left top"というようにleftやtopを組み合わせて使ってください
③
画像が画面からはみ出ていて、スクロールした時に
背景を固定する場合はfixed
背景をスクロールする場合はscroll
④
記事やサイドバーの背景を透明にしたい場合は色をtransparent
これで背景が画像に変わっていると思いますが、
ここで問題があります！！
背景画像を設定して記事の背景を画像にしてしまうと、
肝心の記事が読みづらくなることが多々あります
こういったときは画像を少し薄くすることでだいぶ読みやすくなります
ここでwindowを使っているみなさんにお勧めしたいのが
AzPainter2です
まず上のリンク先のサイトの3分の1くらいの所にダウンロードリンクがありますので、そちらをクリックしてダウンロードしてください
その後起動すると、次のようなウィンドウが表示されます
小さなウィンドウが沢山出ている場合は、説明の便宜上消しておいてください
その後、"表示"→"レイヤウィンドウ"を選択すると次のように小さなウィンドウがでてきます
レイヤウィンドウを見てみると、"通常"と書かれたプルダウンの右側に"100"という表示があるのは分かりますか？
後は保存だけなんですが、ここで注意があります！
"ファイル"→"別名で保存"の後に保存するフォルダを選択するウィンドウが表示されますが、
ファイルの種類が"AzPainterファイル"になっているので、
プルダウンから"JPEGファイル"を選択してから保存してください
以上で背景画像の設定の説明を終わります。
画像を薄くすることについては、"画像を薄くしたくない！"って方もいるでしょうからお任せしますwww
何か分からないことがあれば、コメントかメッセージください。
ではまたノシ