BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ サイドバーの見出し背景を画像にする方法

このエントリーをはてなブックマークに追加

アメブロカスタマイズ サイドバーの見出し背景を画像にする方法

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

s.jpg

   

   

みなさん、こんにちは♪

   

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

   

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

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

   

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

   

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

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

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

   

   

使いたい画像を作成

 

 

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

   

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

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

   

 

画像の大きさは、横幅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;

}

 

 

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

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

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

 

 

   

   

ss1.jpg

   

   

文字色も変更できます

 

 

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

 

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

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

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

 

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

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

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

 

 

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

 

 

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

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

 

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

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

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

 

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

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

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

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

   

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

   

http://box.aflat.com/buttonmaker

   

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

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

カテゴリ:

TOPへ