HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」 と考える方々に分かりやすい解説記事を書きたいと思っています。
サイドメニューをカスタマイズ した途端、デフォルトのままではヘッダーがあまりにも味気なく感じるようになりましたので、画像を入れてみました。
今回は「誰でもできる！」とはいえないのですが、画像さえ用意できれば結構簡単にできますので、そのやり方を記事にしておこうと思います。
デフォルトデザインとの違い
ヘッダーに手を入れようと思ったときに考えたことは、「なるべく天地サイズを取らないようにしよう」ということです。解像度の高いディスプレイを使っている方が増えているとはいえ、ヘッダ領域の高さはなるべく低くして、コンテンツエリアがスクロールしないでも、なるべくたくさん見えるようにしたいという狙いです。
ですので、冒頭の大きなバナーを、ヘッダーが飲み込んでいるような形にしました。
ヘッダ画像は2つ使ってます
そのために、画像は2つ使っています。バナーが表示されているエリアと、サイトタイトル＆説明文が表示されるエリア。この両エリアの背景に画像を置いています。
画像は、「スキンCSSの設定」の「ブログデザインヘッダ・背景用画像の追加」でアップロードしてみました。5画像までしかアップできませんけど、記事中で使った画像は一覧表示されてしまいますので、そのなかに入らないというのはありがたいですね。
画像作成には、Photoshopというソフトを使っています。作業画面が右の画像です。慣れるまでには時間がかかりますけど、インターネット好きなら是非もっておきたいソフトです。正規版は高くて涙が出るほどですが、入門用ソフト（Photoshop Elements）は、手の届く価格ではないかと思います。ただ、スライス機能がないってのはやはり不便ですね。
根性のある方には、GIMP というソフトがおすすめです。十分な機能があってしかも無料！です。Photoshopみたいな有名ソフトは、プロ仕様の無料素材が出まわってますので、初心者の方でも購入してすぐに楽しめるだろうというのが大きなメリットですかね。
- Adobe Photoshop Elements 10 日本語版 Windows/Macint.../アドビシステムズ
- ￥14,490 Amazon.co.jp
- Adobe Photoshop CS5 Windows版 (32/64bit)/アドビシステムズ
- ￥99,750 Amazon.co.jp
画像の高さに注意してください
Amebaのバナーが表示されるエリアは、合計112ピクセル。ですので、上部画像は112ピクセルの高さになるようにしています。設定部分は下記のソースです。
div.headerBnrArea {
background: url('http://stat.blogskin.ameba.jp/blogskin_images/20111229/00/0b/af/j/o09800112jalan2-net1325085334318.jpg') center bottom no-repeat;
}
対してその下のメインエリアの高さはご自分で用意いただいた画像の高さに設定する必要があります。その設定部分が、
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
height: 114px;
margin-bottom: 10px;
background: url('http://stat.blogskin.ameba.jp/blogskin_images/20111229/00/3a/1b/j/o09800114jalan2-net1325085352643.jpg') center top no-repeat;
}/* ←ブログヘッダーに背景画像を敷きたいとき */
の部分です
height: 114px;で画像の高さを設定して、margin-bottom: 10px;で、ヘッダ画像とその下のコンテンツ部分の間隔を設定しています。画像設定部分は、url('～')の「～」の部分を、「ブログデザインヘッダ・背景用画像の追加」でアップロードされた画像の下に表示される「この画像のパス」部分で表示されているソースに置き換えれば完了です。
サイトのタイトル文字と説明文の設定
サイトタイトルと、説明文にも少し手をいれました。
/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:25px 0 20px 30px;
}
/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea a:link,
.skinTitleArea a:hover,
.skinTitleArea a:active,
.skinTitleArea a:visited {
color: #0066cc;
}
/* skinDescription ブログの説明文字 */
.skinDescription{
color: #666666;
font-weight: bold;
letter-spacing: 0.1em;
}
padding:25px 0 20px 30px;で、デフォルトのままですと左にぴったりくっついた状態になりますので、その位置調整を行なっています。その次は、タイトルの文字色の変更。他のリンク文字と同じ色にしてみました。最後が説明文。太字にして少し文字の間隔を空けて読みやすくしています。
2番目の設定については、これまでの記事で説明していませんので、簡単に触れておきます。
- a:link
- ハイパーリンクが設定されている文字に対しての設定
- a:hover
- ハイパーリンクにオンマウスした際の文字に対する設定
- a:active
- ハイパーリンクをクリックした際の文字に対する設定
- a:visited
- 訪問済みのハイパーリンクに対する設定
以上、今回は当サイトのカスタマイズについて記事にしてみましたが、もっと簡単にできるヘッダデザインのカスタマイズについての記事を書いてみたいと思っています。