ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ サイドバーの見出し背景を画像にする方法
投稿日: 2014/06/23 投稿者:webコラム
みなさん、こんにちは♪
今回のアメブロカスタマイズは、『サイドバーの見出し背景を画像にする方法』です。
何もカスタマイズしていないと地味ですよね~。
梅雨まっただ中という事で、"なめこ"でアレンジしてみました(笑)
背景の画像を使用したりしても、ブログにメリハリがつき、とても良いと思います。
サイドバーなのであまりごちゃごちゃしたものよりは、
アクセントになるものをおすすめしますが、
今回は、皆さんに分かりやすくしております。
使いたい画像を作ることから始めましょう。
高さや幅をあらかじめ設定しておくと
あとで変更をかけなくてすむので便利です。
画像の大きさは、横幅300ピクセルと高さ35ピクセルです。
いらない部分を切り取ったり、サイズが大きければ
サイズ変更をして、300×35に合わせましょう。
画像ができたら、アップロードです。
通常のブログだと画像フォルダに入れていくのですが
今回は、CSSを触っていくので、CSS編集画面で画像をアップロードします。
アップロードが完了すると、画像が確認できるとともに
その下に、画像のパス(URL)が表示されているので
これをコピーしてテキストファイルでいったんおいておきます。
ここまできたら、あともう一息です。
次に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)を入れます。
(かっこ)は必要なので、消さないように注意してくださいね。
タイトルの文字色も変更することができます。
変更したい場合は、先ほどのCSS編集画面で
2つのブロックのうちの下側のブロック、サイドメニュータイトル文字という方の
上から3行目の色コードを変更しましょう。
画像では#CC0099という濃いピンク系の色を入れました。
画像に消されないような色を選んで入れると
さらに文字も目立って、かわいく出来上がります。
どうしても、いろいろ触って変えていきたいとなると
CSSを触る必要がでてきます。
でも、CSSのコードはいろいろな人が作ってくれていますので
そのまま使わせてもらって、必要なところだけを
変更していけば、簡単につくることができます。
ただ、間違ってしまうと、すべての形が崩れてしまうので
きちんと表示されている状態を保存しておいて
何かあってもひとつ前には必ず戻れる状態を作っておくと
安心して、CSSを編集していけますね。
http://box.aflat.com/buttonmaker
こちらは簡単にボタンが作成できるサイトになっております。
こういったものを利用すると、すぐにオリジナルで作成できますので、是非使ってみて下さい!