ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors
電話番号: 03-3986-2773
電話番号: 03-3986-2773
ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズＴＯＰ » ブログ » 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;
}
ここで変更するポイントは基本的には１ヶ所です。
★のマークの部分に、先ほどテキストファイルでおいている画像のパス（URL)を入れます。
（かっこ）は必要なので、消さないように注意してくださいね。
タイトルの文字色も変更することができます。
変更したい場合は、先ほどのCSS編集画面で
２つのブロックのうちの下側のブロック、サイドメニュータイトル文字という方の
上から３行目の色コードを変更しましょう。
画像では＃CC0099という濃いピンク系の色を入れました。
画像に消されないような色を選んで入れると
さらに文字も目立って、かわいく出来上がります。
どうしても、いろいろ触って変えていきたいとなると
CSSを触る必要がでてきます。
でも、CSSのコードはいろいろな人が作ってくれていますので
そのまま使わせてもらって、必要なところだけを
変更していけば、簡単につくることができます。
ただ、間違ってしまうと、すべての形が崩れてしまうので
きちんと表示されている状態を保存しておいて
何かあってもひとつ前には必ず戻れる状態を作っておくと
安心して、CSSを編集していけますね。
http://box.aflat.com/buttonmaker
こちらは簡単にボタンが作成できるサイトになっております。
こういったものを利用すると、すぐにオリジナルで作成できますので、是非使ってみて下さい！
我社のマスコット『弁慶』です。
名前の由来：忠実な番犬
主な仕事：マスコットキャラとして認知度UP↑
不得意：電話
しゃべりが苦手なので、コンタクトはこちらから
我社のキャラクター「長フチ様」がユーザーに変わり、聞きづらい疑問を直球で投げかけるQ&A式コンテンツ。強面の顔からは想像も容易いほどのおバカさんが、弊社スタッフと対談します。
Copyright(C)2014 ｜ ホームページ制作・SEO対策を通じて集客向上↑売上UP↑Cyber Accel-Advisors. All Rights Reserved.
