ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors

   投稿日: 2014/06/23    投稿者:webコラム

　　　

　　　

みなさん、こんにちは♪

　　　

 今回のアメブロカスタマイズは、『サイドバーの見出し背景を画像にする方法』です。

　　　

何もカスタマイズしていないと地味ですよね～。

梅雨まっただ中という事で、"なめこ"でアレンジしてみました（笑）

　　　

背景の画像を使用したりしても、ブログにメリハリがつき、とても良いと思います。

　　　

サイドバーなのであまりごちゃごちゃしたものよりは、

アクセントになるものをおすすめしますが、

今回は、皆さんに分かりやすくしております。

　　　

　　　

使いたい画像を作成

 

 

使いたい画像を作ることから始めましょう。

　　　

高さや幅をあらかじめ設定しておくと

あとで変更をかけなくてすむので便利です。

　　　

 

画像の大きさは、横幅300ピクセルと高さ35ピクセルです。

　　　

 

いらない部分を切り取ったり、サイズが大きければ

サイズ変更をして、300×35に合わせましょう。

 

画像ができたら、アップロードです。

　　　

通常のブログだと画像フォルダに入れていくのですが

今回は、CSSを触っていくので、CSS編集画面で画像をアップロードします。

 

アップロードが完了すると、画像が確認できるとともに

その下に、画像のパス（URL）が表示されているので

これをコピーしてテキストファイルでいったんおいておきます。

 

 

CSSの編集と修正

 

 

ここまできたら、あともう一息です。

次にCSSで修正をがけていきましょう。

 

まずは下記のコードを、CSS編集画面の一番下に貼り付けます。

 

 

/* skinMenuHeader サイドメニュータイトルエリア */

.skinMenuHeader{

height: 35px;

line-height: 35px;

padding: 0px 5px 0px 20px;

background-color: #FFFFFF;

background-image: url(★);

background-position: left top;

background-repeat: no-repeat;

}

 

/* skinMenuTitle サイドメニュータイトル文字 */

.skinMenuTitle{

color: #FFFFFF;

font-size: 120%;

font-weight: bold;

}

 

 

ここで変更するポイントは基本的には１ヶ所です。

★のマークの部分に、先ほどテキストファイルでおいている画像のパス（URL)を入れます。

（かっこ）は必要なので、消さないように注意してくださいね。

 

 

　　　

　　　

　　　

　　　

文字色も変更できます

 

 

タイトルの文字色も変更することができます。

 

変更したい場合は、先ほどのCSS編集画面で

２つのブロックのうちの下側のブロック、サイドメニュータイトル文字という方の

上から３行目の色コードを変更しましょう。

 

画像では＃CC0099という濃いピンク系の色を入れました。

画像に消されないような色を選んで入れると

さらに文字も目立って、かわいく出来上がります。

 

 

まとめ：CSSは考えるほどに難しくない

 

 

どうしても、いろいろ触って変えていきたいとなると

CSSを触る必要がでてきます。

 

でも、CSSのコードはいろいろな人が作ってくれていますので

そのまま使わせてもらって、必要なところだけを

変更していけば、簡単につくることができます。

 

ただ、間違ってしまうと、すべての形が崩れてしまうので

きちんと表示されている状態を保存しておいて

何かあってもひとつ前には必ず戻れる状態を作っておくと

安心して、CSSを編集していけますね。

 　　

フリーサイトを活用しよう♪

 　　

http://box.aflat.com/buttonmaker

 　　

こちらは簡単にボタンが作成できるサイトになっております。

こういったものを利用すると、すぐにオリジナルで作成できますので、是非使ってみて下さい！