サイドバーにアイコン画像と背景色を同時配置 | JUNK BOX

JUNK BOX

文系女子によるパソコン技術向上と趣味を兼ねたブログ

みなさま、こんにちはクローバー

 

サイドバーのタイトルの横に、アイコン画像を追加しましたクラッカー




アイコン画像の挿入方法は次の通りです。

 

(1) アイコン用画像を用意

   [ 私は今回35×35pixelのPNG形式を使用しました ]

 

(2) 「CSS編集」の一番最後にある「 (4) その他、拡張」へ

  以下のコードを追加

 

   skinMenuHeader{
   background:url(http://~画像のURL~) no-repeat;
   background-position:
4px 50%;
   padding-left:
20px;
   }

 

これだけです。赤字の部分をお好みで変更してください。

アメーバのCSS編集スタッフさんがブログで解説されているので、

(アメブロユーザーのCSS編集画面の一番上にリンクがあります)

とてもわかりやすいです音譜

 

ちなみに、画像のURLは、

  1 「画像フォルダ」にアップロード

  2 該当の画像にカーソルを合わせて「右クリック」→「プロパティ」

で知ることができます。

 

 

しかし、ここで問題が……

 

 

アイコンは追加できましたが、

背景色の設定が消えてしまいました(゜Д゜;)

 

背景色とアイコン画像の双方を表示する方法はないものか…・・・・

 

いろいろ調べてみたところ、

背景色を保持したまま、アイコン画像を追加するには、

 

   skinMenuHeader{
   background:url(http://~画像のURL~) no-repeat,#背景色;
   background-position:
4px 50%;
   padding-left:
20px;
   }

 

のように、「,(カンマ)」で区切ってCSSのカラーコード「#6桁の英数字」

入力すれば大丈夫みたいですキラキラ

 

このカンマに辿り着くまでに何時間もかかってしまいました。