背景色と画像

スポンサーリンク

使用するタグ

個別指定背景色background-color:#FFFFFF;
背景画像background-image:url(/_common/skins/209/images/arrowL_small.gif) ;
背景画像の表示パターンbackground-repeat : no-repeat;
背景画像の表示開始位置background-position : left center;
まとめて指定背景色・
背景画像・
表示パターン・
位置を
まとめて指定
background:#ADB5C5 url(“/_common/skins/209/images/menuDecoration.gif”) no-repeat 12px 6px;

詳細説明

背景色の指定

背景の色をかえるには、所定の場所に以下のタグを入れます。

background-color: #FFFFFF;赤文字部分を変えることにより、色が変わります。

↓ カラーはこちらを参考にしてください ↓

画像の挿入方法

①使いたい画像をアップロードします。

②挿入したい場所にマウスポインタを置いておき、アップロードした画像をクリックするとURLが自動ででます。

③この画像のURLをコピーし必要な場所へはりつけます。

background-image:url(/blog/images/blog/▲▲▲/*/0123456.gif) ;

背景画像の表示パターン

background-repeat : no-repeat;赤文字部分を変えることにより、表示パターンが変わります。
使用タグ
repeat全面繰り返し
no-repeat1枚だけ表示
repeat-x横に繰り返し
repeat-y縦に繰り返し
指定をしない場合は、デフォルトなのでrepeatになる

画像の表示開始位置

画像を入れる位置についても細かく設定することができます。

background-position : left center;赤文字部分を変えることにより、開始位置が変わります。
left center;  であれば、横位置が左寄せ 縦位置が真ん中となります。
background-position : 10px 5px;10px 5px; は横位置が左から10px 縦位置が上から5PX です。
横位置縦位置
left 左寄せtop上詰め
right右寄せbottom下詰め
center真ん中寄せcenter真ん中寄せ

まとめて指定

background: 全てをまとめて指定するときのタグ

自分が指定したい場所に個別指定のタグを必要な分だけいれてもいいし、このようにまとめて指定しても大丈夫です。

自分の好みの方法を選んでください。

background:#ADB5C5 url(“/_common/skins/209/images/menuDecoration.gif”) no-repeat 12px 6px;

画像が小さくなるときの対処法

スキンを作っていて、大きな画像をアップロードしたはずなのに、何故か小さく表示されてしまうことがあります。

【このように表示したいのに】


【このようになってしまう】


原因


ファイルのアップロードの時に〔サムネイル画像表示〕や〔別ウィンドウで原寸大表示〕にチェックが入っていることにあるように思います。

対処法

【対処法.1】 または【対処法.2】をしてください。 

対処法1

【サムネイル画像表示]と【別ウィンドウで原寸大表示】のチェックをはずし、もう一度アップロードする

対処法2

1.)サイズを変えたいファイルの〔編集〕をクリック

banner-03.PNG

2.)〔サムネイルの長辺〕に使いたい画像の長い方の辺のサイズを記入
3.)保存をクリック

4.)〔サムネイル画像表示〕と〔別ウィンドウで原寸大表示〕にチェックが入っていないか確認して任意の場所に挿入

どちらかをすることで大きい画像になるはずです。

 

スポンサーリンク

タイトルとURLをコピーしました