アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。
これまでに2回、プロフィールページカスタマイズの“さわり”について記事を書いてきました。
今回はそのまとめをしたいと思います。
ブログ本体とプロフィールページのデザイン統一
私がアメブロをはじめたのは昨年の12月ですので、昔のことは分かりかねますが、ブログ本体以外のデザインはアメブロ新スキン登場前の状態と変わっていないからか、デフォルトではページ幅が狭くなっています。
新スキンのHTMLは、ロシアの民芸品のマトリョーシカ人形のように、ページのそれぞれのパーツが何重もの箱のなかに入れられています。HTMLが分かりにくくなるといマイナスを補って余りある高いデザインカスタマイズ性を備えています。ある意味、プロフィールページとは正反対なんです。
そのことが、プロフィールページとブログ本体のデザインを統一するのを難しくしています。特にサイドバーは、本体のカスタマイズ度合いにもよるのですが、かなり複雑なことをしないと、ブログ本体と同じようにはできません。
ですので、プロフィール画面カスタマイズを考えるときは、サイドバーはある程度妥協するというように考えると随分楽になります。それ以外の部分は、クイックリンクの［ルーム］＞［フリースペース］を使って自由にHTML・CSSを書くことができますので、どのようにでもできるといっても過言ではありません。
CSSの設定はフリースペース欄に
<style> {
ここにCSSの設定を書く
</style>というコードを貼りつければよいわけです。
基本的に違う部分
ブログ本体とプロフィール画面の基本デザインの違いは、
- ヘッダバナー
- ヘッダのタイトルに当たる部分
- ページ幅
- サイドバーとブログ本体部分のレイアウト
が、大きな要素としてあげられるところです。
デザインのカスタマイズ状況によりその違いは人それぞれだとは思いますが、ブログ本体とプロフィール画面の基本デザインを統一するための基本的な考え方を説明してゆきます。
1. ヘッダバナー部分の調整
まずバナーの上下のスペースを合わせる方法です。下のスペースは、プロフィール画面の
（ニックネーム） プロフィール｜ブログなう｜ピグの部屋
が表示されているまでの間隔です。
デフォルトの状態と合わせるためには、次の設定を行います。
#headerAd{
width:auto;
margin:-40px auto 0 auto;
padding: 7px 0 15px 0;
background:#fff;
}その上部のul#amebaBarの下マージンを相殺し（-40px）、上下のスペースをpadding設定で調整するわけです。
2. ヘッダのタイトルに当たる部分
先に述べた、
（ニックネーム） プロフィール｜ブログなう｜ピグの部屋
の部分ですね、ここは単純に表示しないようにすればよいので、
#header{
display:none;
}でOKです。その替わり、ヘッダ部分のHTMLを書き、この部分に配置します。
ここはHTML・CSSが分かっていないと難しい部分ですので、詳しい説明は省略します。考え方としは、グローバルナビの設置と同じ（参考記事）で、グローバルナビの替りにヘッダ部分のHTMLを書いて、CSS設定をすればよいわけです。すでにグローバルナビを設置されているようでしたら、その上にヘッダ部分のHTMLを配置します。
3. ページ幅
ページ幅を合わせるための基本設定は、当ブログの場合で下記の通りです。
#contentsArea{
position:relative;
width:980px;
}
#leftArea {
margin:184px 0 20px 0;
}
#rightArea{
width:660px !important;
margin:184px 0 20px 0;
padding:0;
}オレンジ色の部分は、ヘッダタイトル設定のためのもので、基本設定と直接関係はありません。また黄色い部分はヘッダの高さに合わせて変わってくる部分です。重要なのは#contentsAreaと#rightAreaそれぞれのwidth指定だということがお分かりいただけると思います。#leftAreaは元々300pxに指定されていますので、ここでの指定は不要です。幅を合わせるだけなら、結構単純です。
個々人の設定によって変わってくるところですので、直接コピペしては使えませんが、考え方についてご参照いただければと思い掲載しました。
4. サイドバーとブログ本体部分のレイアウ
当ブログの場合、サイドバーをブログ本体と統一するには無理が出る部分、表示必須でない部分については非表示として、思いきり単純化しています。具体的には「自己紹介」のみの配置とし、CSS設定でサイドバーデザインの統一を測りました。
本体部分には、「ブログ」と「フリースペース」の2つを配置。タイトルやリストに細かなCSSを設定してデザイン統一を行なっています。「フリースペース」自体は、自由にHTMLを書いてCSS設定をすればよいのでスムースに行えます。ブログ本体部分の各タグのCSS設定（見出し、パラグラフ、改行、行間、強調…）と同じように設定すればよいわけです。
各レイアウト用の説明をするとなるとややこしいので、左ワイドサイドメニュー・2カラムレイアウトの説明にとどめたいと思います。各レイアウトへの対応を検討されたい方は、以下の記事が参考になると思います。div#rightAreaボックスのなかに狭いサイドメニューの入るボックスを配置してfloatさせれば実現できます。
もし記事が気に入ったら、クリックいただければうれしいです
またのご訪問、お待ちしております