「このブログを検索する」に画像枠を付ける方法

アメブロカスタマイズで自分らしい空間を作る技 「このブログを検索する」に画像枠を付ける方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は、アメブロのカスタマイズ向けスキン『CSS編集用デザイン』の『「このブログを検索する」に画像枠を付ける方法』をご紹介します。

背景画像を1枚だけ使って枠をつけたようにするだけなので、『背景画像を設定する方法』と言いかえてもいいかもしれません。

画像を用意する

今回は、次のような画像を用意しました。

アメブロ素材置き場 300ピクセル
300ピクセル幅サイドメニュー用(30×298)

アメブロ素材置き場 150ピクセル
180ピクセル幅サイドメニュー用(30×178)

これらを使って、「このブログを検索する」を丸みのあるデザインにしてみたいと思います。

『CSS編集用デザイン』では、サイドメニューの横幅が2種類ありますので、「このブログを検索する」が幅広の方(.skinSubA)にある場合は「300ピクセル幅サイドメニュー用」、細い方(.skinSubB)にある場合は「180ピクセル幅サイドメニュー用」を使用します。

なお、ご自分で画像を用意される場合は、高さ31ピクセル、横幅298ピクセルまたは178ピクセルの画像を用意されるとピッタリおさまると思います。

CSSを編集する

CSSの編集で、以下のコードのどちらかあなたのアメブロのユーザーCSSの最後に追加して下さい。

まずは、「このブログを検索する」が幅広の側にある場合

#blogSearchInput{
  border:none;
  background-color:transparent;
  background-repeat:no-repeat;
  background-image:url(https://stat001.ameba.jp/user_images/20110818/21/sozai-land/1b/a0/p/o0298003011426323065.png);
}

次に、細い方にある場合

#blogSearchInput{
  border:none;
  background-color:transparent;
  background-repeat:no-repeat;
  background-image:url(https://stat001.ameba.jp/user_images/20110818/21/sozai-land/a2/84/p/o0178003011426311636.png);
}

何れの場合も、赤文字部分が枠(あるいは背景)にする画像のURLです。

他の画像を使用する場合は、使用したい画像のURLに変えて下さい。

ちなみに、上記コードの画像は、アメブロ内からでしたらそのまま使用できると思いますが、削除等を懸念される場合は、一度PCに保存してからご自分のアメブロの画像フォルダにアップロードした画像のURLを設定して下さい。

『「このブログを検索する」に画像枠を付ける方法』は以上です。

よかったら試してみてくださいね。

アメブロカスタマイズで自分らしい空間を作る技