04. タイトル表示の調整（背景色省略、余白・マージン調整）
これまでのCSS編集で、薄いグレーを基調としたシンプルなブログデザインとなった。
現在の背景色（#EFEFEF）が元々ベーシックデザインのタイトル部の背景色と同一であるために区別がつかないが、もし別の色を背景色としたらタイトル部の背景色は残っている。
また、タイトル部がボックス状構成のため、背景色が同化した状態では余白やマージンが無駄に開いてしまっている。
そこでタイトル部について、背景色指定を無くすことと余白やマージンの変更を行う。
（これで他のブログ背景色を選んだ場合でも、シンプルなデザイン構成が可能となる。）
CSSの下記3ヶ所に変更を行う。
最初に定義されている「かんたんCSS編集」部でタイトルの色指定を無効にする。
赤字部分を追加。
※コメント化して残しているが、該当部分を削除しても良い。
また、この部分の色の定義を変更すれば、タイトル部の色指定が可能である。
次にメインカラムの基本設定（記事）部で、タイトルに関する定義を変更。
赤字部分を追加。
※既存の設定をコメント化して残しているが、書き換えても良い。
次にサイドカラムの基本設定部、モジュールタイトルに関する定義を変更。
赤字部分を追加。
※既存の設定をコメント化して残しているが、書き換えても良い。
以上の変更を加えることにより、記事やサイドコラム項目のタイトルの位置を調整できる。
タイトルのマージンや余白が中途半端だったが最適化された。
現在の背景色（#EFEFEF）が元々ベーシックデザインのタイトル部の背景色と同一であるために区別がつかないが、もし別の色を背景色としたらタイトル部の背景色は残っている。
また、タイトル部がボックス状構成のため、背景色が同化した状態では余白やマージンが無駄に開いてしまっている。
そこでタイトル部について、背景色指定を無くすことと余白やマージンの変更を行う。
（これで他のブログ背景色を選んだ場合でも、シンプルなデザイン構成が可能となる。）
CSSの下記3ヶ所に変更を行う。
最初に定義されている「かんたんCSS編集」部でタイトルの色指定を無効にする。
赤字部分を追加。
| /*============ ☆ かんたんCSS編集はこちら ☆ ==============*/ /*:(コロン)と、;(セミコロン)の間に色、画像、サイズなどを指定して下さい*/ /*１）ブログタイトルの文字サイズを変更する*/ #header h1{ font-size: 3.0em; /*-- 25px相当の文字サイズ --*/ } /*２）ブログタイトルの文字色を変更する*/ #header h1 a{ color:#333333; /*-- 濃いグレー --*/ } /*３）ブログ説明の文字サイズを変更する*/ #header h2{ font-size: 1.0em; /*-- 12px相当の文字サイズ --*/ } /*４）ブログ説明の文字色を変更する*/ #header h2{ color:#333333; /*-- 指定なし --*/ } /*５）ページ背景に画像を入れる*/ body{ background-image:url(); } /*６）ページ全体の文字色を変更する*/ body{ color: #333333; /*-- 濃いグレー --*/ } /*７）記事タイトルの背景色を変更する*/ .entry h3.title{ /*background-color: #EFEFEF*/; /*-- 薄いグレー --*/ /* 無効化！*/ } /*８）記事タイトルの文字色を変更する*/ .entry h3.title{ color: #333333; /*-- 濃いグレー --*/ } /*９）サイドバーの見出し文字色を変更する*/ h4.menu_title{ color: #333333; /*-- 濃いグレー --*/ } /*１０）サイドバーの見出し背景色を変更する*/ h4.menu_title{ /*background-color: #EFEFEF;*/ /*-- 薄いグレー --*/ /* 無効化！*/ } /*============ ☆ かんたんCSS編集はここまで ☆ ==============*/ |
また、この部分の色の定義を変更すれば、タイトル部の色指定が可能である。
次にメインカラムの基本設定（記事）部で、タイトルに関する定義を変更。
赤字部分を追加。
| /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/ /*■■■■■■■■■■ メインカラム ■■■■■■■■■■■*/ /*■■■基本設定 - メインカラム*/ /*■メッセージボード - 基本設定 - メインカラム*/ #message{ margin-bottom:14px; } #message .contents{ padding:14px 24px; } /*■記事 - 基本設定 - メインカラム*/ .entry{ margin-bottom:40px; } .entry .entry_head{ height:16px; } .entry .theme{ display:block; padding:0 0 5px 0; } .entry .date{ display:block; float:left; margin:0; padding:1px 0; } .entry .name{ display:block; float:right; margin:2px 0 0 0; padding:0; } .entry h3.title{ /* 記事タイトルのボックス*/ clear:both; /*margin:0 0 8px 0;*/ margin:0 0 5px 0; /* 下のマージンを減らす */ /*padding:3px 5px;*/ padding:3px 0px; /* 左右の余白を無くす */ } .entry .contents{ margin:15px 0 15px 0; } .entry .foot{ padding-top:5px; } |
次にサイドカラムの基本設定部、モジュールタイトルに関する定義を変更。
赤字部分を追加。
| /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/ /*■■■■■■ サイドA(sub_a)&サイドB(sub_b) ■■■■■■*/ /*■■■基本設定 - サイド*/ /*■サイドA,B共通項目 - 基本設定 - サイド*/ div.mainMenu{ margin:0 0 30px 0; padding:0; font-size:0.91em; line-height:1.3; } div.menu_frame{ } /*■モジュールタイトル - 基本設定 - サイド*/ h4.menu_title{ /* サイドコラムタイトルのボックス */ /*margin:0 0 10px 0;*/ margin:0 0 3px 0; /* 下のマージンを減らす */ /*margin-left:6px;*//* 左のマージンを無くす */ margin-right:6px; /*padding:3px 6px;*/ padding:3px 0px; /* 左右の余白を無くす */ } |
以上の変更を加えることにより、記事やサイドコラム項目のタイトルの位置を調整できる。
 変更前 |  変更後 |
03. ブログのサイズ（幅）を拡大
アメブロで、カスタマイズ可能なブログのデフォルトの幅は800ピクセルである。
2カラムの場合、メインコラムが610ピクセル、サイドコラムが170ピクセルの幅を持つ。
そのため私は写真を掲載する場合、長辺を600ピクセルに統一している。
インターネット上に画像を掲載すると、断りなくダウンロードされる危険性が大きいため、著作権を侵害するような行為が後を絶たない事実がある。
画像をできるだけ縮小するというのは、それ以上のクオリティの元画像を与えないというセキュリティ効果が期待できる。
その辺を踏まえて画像サイズの600ピクセルというのは、これまでの環境ではバランスの良い画像サイズだったと思う。
余談となるが、ディスプレイの表示領域がホームページの幅に影響を与え、ある程度慣例化されてきた。
VGA(640×480)に始まり、ポータブルPCの解像度がSVGA(800×600)に落ち着いていた時期があり、これを基準としてホームページのサイズとして640ピクセルや800ピクセルの幅が定着した。
その後XGA(1024×768)やSXGA(1280×1024)が主流になっても、さらに現在でも、この程度の解像度があれば鑑賞に充分だということから、800ピクセルを採用しているサイトが多いと思われる。
しかし、ここ数年で液晶ディスプレイのワイド化、及びデジタルハイビジョン放送をきっかけとした大型化、高解像度化が一気に進み、WSXGA+(1680×1050)、WUXGA(1920×1200)またはフルHD(1920×1080)が一般的になっている。
ポータブルPCでもネットブックと呼ばれる小型のものを除けば最低でも1,280ピクセル幅が確保されており、さらなる表示領域を可能としている。
パソコンのグラフィック性能もどんどん高性能化しているため、大きなサイズの画像やページを表示するのも特に問題とならなくなっている。
そのためだと思うが、現在では（ブログも含め）ホームページのサイズとして1,000ピクセルや1,024ピクセルを採用したものが増えてきた。アメブロでも見かけることが多くなった。
私が現在使用しているカメラNikon D700（1,200万画素）の出力サイズの長辺が4,288ピクセルなので、およそ1/7まで縮小してリサイズを行う必要がある。
最近は普及機でも1,600万画素も珍しく無くなっているので、長辺が5,000ピクセル超も珍しくはない。
人物の写真などであれば、600ピクセルまで縮小しても写真の持つ雰囲気をある程度は伝えることができる。
しかし、非常に精細な風景写真などではそのディテールが損なわれてしまい、出来の良い写真ほどその解像感を伝えられず、少し勿体無い気分になりジレンマを抱えてきた。
アメブロでは昨年から画像フォルダの仕様が変更され、最大で800ピクセルまで（それ以上は自動的にリサイズされてしまう）となっている。
800ピクセルは600ピクセルの画像と比べると約33%の拡大ではあるが、面積比は約78%アップ。
解像感も倍近いことになる。
以上から、写真（画像）サイズには制限いっぱいの800ピクセルを採用したくなる。
当然ながらブログ幅を変えない限り、1カラムのブログデザインでしかそのまま掲載できない。
そこで今回は、ブログ幅を800ピクセルから1,000ピクセルに変更する。
（メインコラムの幅を610ピクセルから810ピクセルとする。）
また、それに合わせてヘッダー画像も1,000ピクセル幅のものに変更する。
ただし、高さまで拡張すると縦方向の表示領域を狭めるので、今回は400ピクセルのままとする。
最近では縦型ディスプレイとなるスマートフォンやタブレットPCが普及し始めてるので、ヘッダーの高さにもある程度余裕ができつつあるが、現状ではあまりヘッダーの縦方向を使うのは好まれていない。
ヘッダー画像（800×400ピクセル）
これまで使用してきたヘッダー画像（800×400ピクセル）に代わって、幅のみを拡張した1,000×400ピクセルの画像に置き換える。
ヘッダー画像（1,000×400ピクセル）
幅だけを変更するとアスペクト比が変わる（2:1→5:2）ため、画像としては縦方向に切り詰める必要が生じる（今回は20%減）。
今回は比較のために同じ画像を使用しているが、できるだけ横長に綺麗に収まる写真を選択したり、それを意識して撮影する必要もあるだろう。
この画像の場合は元のアスペクト比2:1のほうがモデルの脚まで綺麗に収まるので、（幅1,000ピクセルに対して）500ピクセルの高さを使うほうがバランスは良いかもしれない。（ヘッダーの高さを変更する場合にはCSSでそれに該当する項目も変更する必要がある。）
一度書いたが800ピクセルを超える画像は画像フォルダでは800ピクセルにリサイズされてしまう。
そのためアメブロではヘッダー画像や背景用の画像として設定できる場所を「CSSの編集」画面に設けている。
まず、ここに上記1,000×400ピクセルの画像を追加する。
「ブログデザインヘッダ・背景用画像の追加」
1MB以下であれば、画像サイズに関係なく5枚まで設定できる。
次にブログ幅を拡大するために、CSSのブログデザイン基本設定のフレーム部（タグ初期化部の次）を以下の様に変更。
赤字部分を追加。（幅を1000pxに変更）
※前のサイズ設定をコメント化して残しているが、もちろんその行を書き換えても良い。
次に最初にヘッダー画像とリンク設定をしたときに変更した部分を再度変更する。
CSS（ヘッダー設定部）を以下の様に変更。（ここではタグ初期化部まで例示している）
赤字部分を追加。
※前の画像サイズ設定をコメント化して残しているが、もちろんその行を書き換えても良い。
最後にメインコラムの幅の変更とヘッダー画像を反映させるため、CSSの最後にあるレイアウト設定部を次の様に変更。
赤字部分を追加。
※前の画像サイズ設定をコメント化して残しているが、もちろんその行を書き換えても良い。
以上の変更を加えることにより、下のようにブログ幅を拡大できる。
CSSカスタマイズにより、ブログ幅を1,000ピクセル、メインコラムを800ピクセルに変更（Safari 5 Mac版での表示）
これで800ピクセルまでの写真を記事に掲載することができる。
2カラムの場合、メインコラムが610ピクセル、サイドコラムが170ピクセルの幅を持つ。
そのため私は写真を掲載する場合、長辺を600ピクセルに統一している。
インターネット上に画像を掲載すると、断りなくダウンロードされる危険性が大きいため、著作権を侵害するような行為が後を絶たない事実がある。
画像をできるだけ縮小するというのは、それ以上のクオリティの元画像を与えないというセキュリティ効果が期待できる。
その辺を踏まえて画像サイズの600ピクセルというのは、これまでの環境ではバランスの良い画像サイズだったと思う。
余談となるが、ディスプレイの表示領域がホームページの幅に影響を与え、ある程度慣例化されてきた。
VGA(640×480)に始まり、ポータブルPCの解像度がSVGA(800×600)に落ち着いていた時期があり、これを基準としてホームページのサイズとして640ピクセルや800ピクセルの幅が定着した。
その後XGA(1024×768)やSXGA(1280×1024)が主流になっても、さらに現在でも、この程度の解像度があれば鑑賞に充分だということから、800ピクセルを採用しているサイトが多いと思われる。
しかし、ここ数年で液晶ディスプレイのワイド化、及びデジタルハイビジョン放送をきっかけとした大型化、高解像度化が一気に進み、WSXGA+(1680×1050)、WUXGA(1920×1200)またはフルHD(1920×1080)が一般的になっている。
ポータブルPCでもネットブックと呼ばれる小型のものを除けば最低でも1,280ピクセル幅が確保されており、さらなる表示領域を可能としている。
パソコンのグラフィック性能もどんどん高性能化しているため、大きなサイズの画像やページを表示するのも特に問題とならなくなっている。
そのためだと思うが、現在では（ブログも含め）ホームページのサイズとして1,000ピクセルや1,024ピクセルを採用したものが増えてきた。アメブロでも見かけることが多くなった。
私が現在使用しているカメラNikon D700（1,200万画素）の出力サイズの長辺が4,288ピクセルなので、およそ1/7まで縮小してリサイズを行う必要がある。
最近は普及機でも1,600万画素も珍しく無くなっているので、長辺が5,000ピクセル超も珍しくはない。
人物の写真などであれば、600ピクセルまで縮小しても写真の持つ雰囲気をある程度は伝えることができる。
しかし、非常に精細な風景写真などではそのディテールが損なわれてしまい、出来の良い写真ほどその解像感を伝えられず、少し勿体無い気分になりジレンマを抱えてきた。
アメブロでは昨年から画像フォルダの仕様が変更され、最大で800ピクセルまで（それ以上は自動的にリサイズされてしまう）となっている。
800ピクセルは600ピクセルの画像と比べると約33%の拡大ではあるが、面積比は約78%アップ。
解像感も倍近いことになる。
以上から、写真（画像）サイズには制限いっぱいの800ピクセルを採用したくなる。
当然ながらブログ幅を変えない限り、1カラムのブログデザインでしかそのまま掲載できない。
そこで今回は、ブログ幅を800ピクセルから1,000ピクセルに変更する。
（メインコラムの幅を610ピクセルから810ピクセルとする。）
また、それに合わせてヘッダー画像も1,000ピクセル幅のものに変更する。
ただし、高さまで拡張すると縦方向の表示領域を狭めるので、今回は400ピクセルのままとする。
最近では縦型ディスプレイとなるスマートフォンやタブレットPCが普及し始めてるので、ヘッダーの高さにもある程度余裕ができつつあるが、現状ではあまりヘッダーの縦方向を使うのは好まれていない。
ヘッダー画像（800×400ピクセル）
これまで使用してきたヘッダー画像（800×400ピクセル）に代わって、幅のみを拡張した1,000×400ピクセルの画像に置き換える。
ヘッダー画像（1,000×400ピクセル）
幅だけを変更するとアスペクト比が変わる（2:1→5:2）ため、画像としては縦方向に切り詰める必要が生じる（今回は20%減）。
今回は比較のために同じ画像を使用しているが、できるだけ横長に綺麗に収まる写真を選択したり、それを意識して撮影する必要もあるだろう。
この画像の場合は元のアスペクト比2:1のほうがモデルの脚まで綺麗に収まるので、（幅1,000ピクセルに対して）500ピクセルの高さを使うほうがバランスは良いかもしれない。（ヘッダーの高さを変更する場合にはCSSでそれに該当する項目も変更する必要がある。）
一度書いたが800ピクセルを超える画像は画像フォルダでは800ピクセルにリサイズされてしまう。
そのためアメブロではヘッダー画像や背景用の画像として設定できる場所を「CSSの編集」画面に設けている。
まず、ここに上記1,000×400ピクセルの画像を追加する。
「ブログデザインヘッダ・背景用画像の追加」
1MB以下であれば、画像サイズに関係なく5枚まで設定できる。
次にブログ幅を拡大するために、CSSのブログデザイン基本設定のフレーム部（タグ初期化部の次）を以下の様に変更。
赤字部分を追加。（幅を1000pxに変更）
| /*■フレーム - 基本設定 - ブログデザイン基本設定*/ #frame{ /*width:800px; */ width:1000px;/* ブログの幅 */ margin:0 auto; text-align:left; } #wrap{ /*width:800px; */ width:1000px;/* 書き込み領域の幅 */ } #sub_main{ width:100%; overflow:hidden; } #main{ overflow:hidden; word-break:break-all; } #sub_a{ overflow:hidden; word-break:break-all; } #sub_b{ overflow:hidden; word-break:break-all; } |
次に最初にヘッダー画像とリンク設定をしたときに変更した部分を再度変更する。
CSS（ヘッダー設定部）を以下の様に変更。（ここではタグ初期化部まで例示している）
赤字部分を追加。
| /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/ /*■■■■■■■■■■■ ヘッダー ■■■■■■■■■■■■*/ /*■■■基本設定 - ヘッダー*/ #header{ margin:0; padding:0 0 10px 0; } #header h1{/* ヘッダー（ブログのタイトル） */ margin:0; /*padding:0 5px 8px 5px; */ } #header h2{/* ヘッダー（ブログの説明） */ margin:0; /*padding:0 5px 45px 5px; */ display: none;/* 表示しない */ } #header h1 a {/* ヘッダーのリンク */ text-indent: -9999px;/* テキストの開始位置を遠くに追いやる */ display: block;/* 表示する */ /*width: 800px;*//* ヘッダー画像の幅（変更前） */ width: 1000px;/* ヘッダー画像の幅 */ height: 400px;/* ヘッダー画像の高さ */ margin: 0px;/* 余白0 */ } |
最後にメインコラムの幅の変更とヘッダー画像を反映させるため、CSSの最後にあるレイアウト設定部を次の様に変更。
赤字部分を追加。
| /*----------------------------------------------------- ameblo CSS Skin Layout Settings Skin for: basic_ad FileName: type_b.css $Revision: 1.2 $ -----------------------------------------------------*/ /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/ /*■■■■■■■■■■■ カラムタイプ ■■■■■■■■■■*/ #main { float: left; /*width: 610px; */ width: 810px;/* メインコラムの幅 */ margin:0; padding:0; } #sub_a{ float: right; z-index: 1; width:170px; margin:0; padding: 0; } #sub_b{ display: none; } body { background-color: #EFEFEF; } #header { /*background-image: url(「以前に設定していた画像のURL」); */ background-image: url(「先ほどヘッダー用に設定した画像のURL（パス）」);/* ヘッダー用画像の指定 */ } #header { background-repeat:repeat-x; } |
以上の変更を加えることにより、下のようにブログ幅を拡大できる。
CSSカスタマイズにより、ブログ幅を1,000ピクセル、メインコラムを800ピクセルに変更（Safari 5 Mac版での表示）
これで800ピクセルまでの写真を記事に掲載することができる。
02. フォント（フォントファミリー）の設定
アメブロのデフォルトではゴシック系統のフォントが設定されている。
ここでは明朝系のフォントに変更したい。
個人的にはアルファベットではOptimaと言うフォントが好きなので、私のニックネーム「Feel Blue Wind」の表示フォントもOptimaを指定している。
だが、OptimaはMacでは標準搭載されているが、Windowsには準備されていない。
というよりは、WindowsにはフォントのバリエーションがMacに比べると圧倒的に少ない。
※Windowsも徐々にフォント数は増えているが、僅かなディテール違いくらいのものが数多く、実際のフォントバリエーションとしては限られる印象が否めない。
このOptimaはゴシック系（sans-serif）に属するが、明朝系（serif）の日本語フォントとの組み合わせが好きでよく使っている。
ならば、CSSのfont-familyで、Optimaを第1候補、以下明朝系のフォントを指定することでMac環境では成立するが、Windowsでは表示できない。
そこで、統一感重視で明朝系をセレクトすることにした。
★Mac用に「ヒラギノ明朝 Pro」、Windows用に「ＭＳ 明朝」、アルファベットに「Times New Roman」、念の為にserifを最後に指定しておく。
CSS（ブログデザイン基本設定部）を以下の様に変更。（ここではタグ初期化部まで例示している）
赤字部分を追加。
CSSを保存して適用すると、下のように全体が明朝系のフォントになる。
CSSカスタマイズにより、明朝系のフォントに変更（Safari 5 Mac版での表示）
フォントの変更は、ブログの雰囲気をかなり変えることができる。
CSSの変更を躊躇する人も多いかもしれないが、上記のようにfont-family文の指定フォントを変更するだけで良いので、気になる人は是非試していただきたい。
（不安ならばここでやってるように、元の文を「/*」「*/」で囲んでコメント化（文を無効にする）して残しておくことで、万が一失敗してもすぐに戻すことが出来る。）
ここでは明朝系のフォントに変更したい。
個人的にはアルファベットではOptimaと言うフォントが好きなので、私のニックネーム「Feel Blue Wind」の表示フォントもOptimaを指定している。
だが、OptimaはMacでは標準搭載されているが、Windowsには準備されていない。
というよりは、WindowsにはフォントのバリエーションがMacに比べると圧倒的に少ない。
※Windowsも徐々にフォント数は増えているが、僅かなディテール違いくらいのものが数多く、実際のフォントバリエーションとしては限られる印象が否めない。
このOptimaはゴシック系（sans-serif）に属するが、明朝系（serif）の日本語フォントとの組み合わせが好きでよく使っている。
ならば、CSSのfont-familyで、Optimaを第1候補、以下明朝系のフォントを指定することでMac環境では成立するが、Windowsでは表示できない。
そこで、統一感重視で明朝系をセレクトすることにした。
★Mac用に「ヒラギノ明朝 Pro」、Windows用に「ＭＳ 明朝」、アルファベットに「Times New Roman」、念の為にserifを最後に指定しておく。
CSS（ブログデザイン基本設定部）を以下の様に変更。（ここではタグ初期化部まで例示している）
赤字部分を追加。
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/ /*■■■■■■■■■■ ブログデザイン基本設定 ■■■■■■■■■■*/ /*■■■基本設定 - ブログデザイン基本設定*/ /*■タグ初期化 - 基本設定 - ブログデザイン基本設定*/ html { font-size:12px !important; *font-size:75% !important;/*forIE6IE7*/ } body{ margin:0; padding:0; text-align:center; /*font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica; */ font-family:"ヒラギノ明朝 Pro W3", "ＭＳ 明朝", "Times New Roman", serif; } img{ border:0; } blockquote{ margin:12px 0; padding:10px; border:2px dotted #D4D4D4; } pre{ margin:0; padding:0; } input, textarea{ } p{ margin:0; padding:0; } .menu_frame ul, .menu_frame li, .menu_frame dl, .menu_frame dt, .menu_frame dd, #comment_module ul, #comment_module li, #trackback ul, #trackback li, #reader_list ul, #reader_list li, #favorite_list ul, #favorite_list li, #bookmark_list ul, #bookmark_list li{ margin:0; padding:0; list-style-type:none; } |
CSSを保存して適用すると、下のように全体が明朝系のフォントになる。
CSSカスタマイズにより、明朝系のフォントに変更（Safari 5 Mac版での表示）
フォントの変更は、ブログの雰囲気をかなり変えることができる。
CSSの変更を躊躇する人も多いかもしれないが、上記のようにfont-family文の指定フォントを変更するだけで良いので、気になる人は是非試していただきたい。
（不安ならばここでやってるように、元の文を「/*」「*/」で囲んでコメント化（文を無効にする）して残しておくことで、万が一失敗してもすぐに戻すことが出来る。）