So-net無料ブログ作成
メッセージを送る

kuu♪からのお知らせ

■スキンを作るコツは、とにかくプレビューで確認することです。
 数字を替えた! 色を替えた! 画像を替えた!そのたびにプレビュー! で確認!
 そしてこまめに保存してください。

■コメントをたくさんいただいているのですが返信もままならない状況ですのでしばらくの間コメントの受付を停止させていただきます。ごめんなさい。

また、管理人kuuがしばらくソネブロを離れている間に随分仕様の変更等あったみたいですので、当ブログの記述では対応できないものも出ているかもしれません。

背景色の指定と画像の挿入方法 [基礎知識]

*背景色の指定と画像の挿入方法

■背景色 background:#ffffff;
■背景画像 background:url(/_common/skins/209/images/arrowL_small.gif) no-repeat left center;
■背景色と画像をまとめて指定
 background:#ADB5C5 url("/_common/skins/209/images/menuDecoration.gif") no-repeat 12px 6px;

☆色の指定
 #ffffff というのは色の指定です。好きな色の色番号に変えましょう。
      その時、「#FF0000」というふうに、#を必ず入れましょう。
      私は色を選ぶのは『
HTML 色一覧』もしくは『HTMLCOLOR』をDLして使っています。
      『
HTMLCOLOR』はパソコン上にある好きな色番号を教えてくれるのでスキン作成にはかかせません。

☆画像の挿入方法
 ①使いたい画像をアップロードします。
 ②挿入したい場所にマウスポインタを置いておき、アップロードした画像をクリックすると
    こういうのが自動ででます。
    background:url(/blog/_images/blog/_▲▲▲/*****/0123456.gif) no-repeat;
        
 *画像を入れる位置についても細かく設定することができます。
  (1)background:url(/blog/_images/blog/_▲▲▲/*****/0123456.gif) no-repeat left bottom;
             これは、画像を ”左寄せ”&”下詰め”という意味です。
          left ・・・ 左寄せ 
 right ・・・ 右寄せ center ・・・ 真ん中寄せ
          top ・・・ 上詰め bottom・・・ 下詰め center ・・・ 真ん中寄せ
  (2)background:url(/blog/_images/blog/_▲▲▲/*****/0123456.gif) no-repeat 10px 5px;
       数字を変えることで、位置がずれます。
 


☆kuuが画像の作成に使っているツール
  この3つを組み合わせて使っています。
    ■Windowsのペイント
    ■EDGE(フリーソフト)
    ■JTrim(フリーソフト)
     


nice!(3)  コメント(4) 
共通テーマ:blog

nice! ありがとう 3

コメント 4

コメントの受付は締め切りました
真結

質問なんですけど・・・
①スキンを手書きで作る方法
②スキンを手書きで書く場合何で書くのか
③スキンに写真のサイズを合ゎせる方法


が知りたぃんですけど教ぇてくださぃ!!!


by 真結 (2009-01-25 10:12) 

kuu

★真結さん

私は上に書いてある、3つのツールを組み合わせて画像を作っています。
描くのは、主に[EDGE]を使い、
サイズ変更や加工は[Windowsのペイント]や[JTrim]を使っています。
人によっていろんなソフトを使っていると思うので、ネットで検索してみるといいですよ。
きっと自分に合ったソフトがあると思います。


by kuu (2009-01-27 10:36) 

soru94132

初めまして、いきなりの質問ですが、
マウスポインタを持っていきアップロードすると
background:url(/blog/_images/blog/_▲▲▲/*****/0123456.gif) no-repeat;
こんなのが出るって書いてあるのですが。
私のは
<a href="/_images/blog/_0b7/sorurunatera/E382B9E382ADE383B3.PNG" target="_blank"><img src="/_images/blog/_0b7/sorurunatera/m_E382B9E382ADE383B3.PNG" width="350" height="90" border="0" align="" alt="スキン.PNG" /></a>
が出てしまいます。まったく同じ方法でやっているはずなのですが・・・
しかもこれで同じ作業をしても更新されないし・・・
どうしたらいいでしょうか?

by soru94132 (2009-07-20 23:26) 

kuu♪

★soru94132さん

でませんか・・・。
もしかしたら、
http://simu.blog.so-net.ne.jp/2008-11-21
これと同じ原因かもしれません。
対策方法は一緒なので試してみてください。
by kuu♪ (2009-07-29 10:58) 

ありがとうございます♪♪

記事が役に立たれたら、下のバナーの興味があるものをクリックしてもらうとうれしいです。

  

         

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。