背景色を変えよう
背景色はあなたのブログのイメージを表す色です。
背景色の変更は簡単なのでいろいろな背景色を試して納得いく背景色を選んでください。
/*—–Common—–*/ （上の方にあります） その中の #ffffff を変えます
| /*—–Common—–*/ |
| body { background:#ffffff; } |
#ffffff というのは色の指定です。好きな色の色番号に変えましょう。
その時、「#FF0000」というふうに、＃を必ず入れましょう。
↓ カラーはこちらを参考にしてください ↓
背景に画像をのせてみよう
【背景色】 → 【背景画像】 の変更手順です。
（基本の背景色を変えた方はこれをする必要はありません）
/*—–Common—–*/ （上の方にあります）
その中の #ffffff を消して、自分の好きな壁紙画像をアップロードし、 そのURLを貼り付けます
| /*—–Common—–*/ |
| body { background:#ffffff; } |
| /*—–Common—–*/ |
| body { background:url(/blog/images/blog/▲▲▲/*/0123456.gif); } |
- ①background:#ffffff; を消します
- ②使いたい壁紙をアップロードします
※壁紙は「ホームページ素材」で検索！
たくさんのフリー素材がでてくるので好きなものを選べます - ③②で消した場所にマウスポインタを置き、アップロードした画像をクリック
background:url(/blog/images/blog/▲▲▲/*/0123456.gif) no-repeat;
このようなURLが自動ででます - ④今回は、繰り返し画像を表示したいので、 no-repeat は消してしまいます
↓ このようになればＯＫです ↓
body {
background:url(/blog/images/blog/▲▲▲/*/0123456.gif);
}
↓ 画像についてわからないときはこちらで確認してください ↓
背景画像を固定する方法
上で変更した画像のURLに background-attachment : fixed; を付け加えます
| /*—–Common—–*/ |
| body { background:url(/blog/images/blog/▲▲▲/*/0123456.gif); } |
| /*—–Common—–*/ |
| body { background:url(/blog/_images/blog/_▲▲▲/*****/0123456.gif); background-attachment : fixed; } |
背景画像の繰り返しはせず右下に固定する方法
上で変更した画像のURLに no-repeat right bottom; を付け加えます
| /*—–Common—–*/ |
| body { background:url(/blog/_images/blog/_▲▲▲/*****/0123456.gif); background-attachment : fixed; } |
| /*—–Common—–*/ |
| body { background:url(/blog/_images/blog/_▲▲▲/******/1234567.gif) no-repeat right bottom; background-attachment : fixed; } |
※組み合わせを変えることで右下以外にも固定可能です
right＝右 left＝左 top＝上 bottom＝下
記事上下の矢印画像を変えよう
記事上下の矢印画像を変更する手順です。
画像サイズは11×11くらいがいいと思います。
/* Links */ とあります。(上の方）
その中の3つの部分の画像のURLを自分で用意した画像のURLへ変えます。
.previousLink 「一つ前の記事」
.nextLink 「ひとつ後の記事」
.archive-links 「ブログトップへ」
| /* Links */ |
| .previousLink{ padding-left:10px; background:url(/blog/_skin/system/images/arrow2L_small_black.gif) no-repeat left center; } .nextLink{ padding-right:10px; background:url(/blog/_skin/system/images/arrow2R_small_black.gif) no-repeat right center; } .archive-links{ float:right; padding-left:10px; background:url(/blog/_skin/system/images/arrow2T_small_black.gif) no-repeat left center; } |
記事上下の矢印画像が切れるときの調整方法
使っているデザインや使いたい画像のサイズによっては画像がすべて入らない場合もあります。
もし画像が切れるようであれば
padding-left:15px;(左のすきま）
padding-top:1px;（上のすきま）
padding-bottom:1px;（下のすきま）
を付け加えてみてください。
（数字は自分で調整してみてください）
すでに padding-left などが入っているものも、そこに追加で padding-top:1px; などを入れることが出来るので微調整してください。
| /* Links */ |
| .previousLink{ padding-left:10px; padding-top:1px; background:url(/blog/_skin/system/images/arrow2L_small_black.gif) no-repeat left center; } .nextLink{ padding-right:10px; background:url(/blog/_skin/system/images/arrow2R_small_black.gif) no-repeat right center; } .archive-links{ float:right; padding-left:10px; background:url(/blog/_skin/system/images/arrow2T_small_black.gif) no-repeat left center; } |
スクロールバーの色を変えよう
ここで設定をすると、ブログ内のすべてのスクロールバーの色が変わります。
部分的に変えたい場合は、その部分それぞれで設定をする必要があります。
/*—–Header—–*/ とあります。（上の方です。）
その中にスクロールバーのタグを入れましょう。私が入れたのは、このタグです。
元々入っていないタグなので、入れるときは自己責任でお願いします。
※使っているブラウザによっては反応しない場合があります。
| /*—–Header—–*/ |
| html, body { scrollbar-arrow-color: #006690; scrollbar-face-color: #ffffff; scrollbar-3dlight-color: #c0f0f0; scrollbar-darkshadow-color: #c0f0f0; scrollbar-highlight-color: #a0c0f0; scrollbar-shadow-color: #a0c0f0; } |
↓ カラーはこちらを参考にしてください ↓
スポンサーリンク
