前回の記事→アメブロカスタマイズ2011～記事の部分をカスタマイズ…その前に
ざっくりとレイアウトを変えます。
.entry{
font-size: 1.3em;
position: relative;
}
.entry .title{
font-size: 1.5em;
line-height: 1.1em;
color: #000080;
font-weight: normal;
}
.entry_head{
position: absolute;
top:80px;
font-family: Impact;
font-size: 2em;
color: #cccccc;
}
.entry .theme{
position: absolute;
top:60px;
font-size: 0.8em;
}
.entry .contents{
padding-left: 160px;
}
するとこんな感じに…
うん。悪くない。
左側にもう少し何か入れようと思ってましたが、これから色々ソーシャルメディア系のプラグインとか入れると思うので一旦こんな感じで抑えておきます。
記事本文の装飾
"ブラウザ毎に表示の違いがあったっていいじゃないか！"をテーマ(今決めた)にリセットCSSを使ってない今回のカスタマイズですが、本文に関しても極力デフォルトのままで行きたいと思います。
アメブロ(に限らずブログ)の本文でよく使うhtmlタグって何だろう？
a→アンカー(リンク)
img→イメージ(画像)
p→パタグラフ(段落)
h4→ヘッドライン4(見出し)
h5→ヘッドライン5(見出し)
h6→ヘッドライン6(見出し)
ul>li→リスト
ol>li→番号付きリスト
dl>dt>dd→見出し付きリスト
pre→整形された文章
blockquote→引用文
ってとこですか?
tableも結構使うかな？tableはめんどくさいんで割愛。
リスト系はデフォルトのままで行きます。
aタグに関しても全体的に指定してるから記事の部分は割愛。
とりあえずデフォルトはこんな感じ。
imgタグとhタグとblockquoteをいじります。
.entyr img{
margin: 0;
padding: 0;
}
.entry a img{border: 3px #cccccc solid;}
.entry a:hover img{border: 3px #000080 solid;}
.entry h4{
font-weight: normal;
font-size: 1.3em;
line-height: 1.2em;
color: #000080;
padding-left: 10px;
border-left: 5px #000080 solid;
}
.entry h5{
color: #000080;
font-size: 1.2em;
font-weight: normal;
}
blockquote{
text-shadow: 1px 1px 0 #ffffff;
border: 1px #cccccc solid;
background: url(薄い背景画像のurl);
margin: 0 0 20px;
padding: 20px;
}
さらにpreタグもいじります。
基本はblockquoteと同じです。
ただ、preタグはソースを書くときに使ったりするので、overflow-x:scroll;を追加しています。
こんな感じ。
あと、地味に今までソースを書くときにpreにクラスで.cssとか.htmlとかを付けてました。
やっと陽の目を見ることが出来そうです。
その二つに関しては今度やるとして…
コマンドラインを操作する説明（テーマ：ブロつく）の時に使ったpre.srcをいじります。
やっぱコマンドラインなので黒地でしょ？って事でこんな感じに…
pre.src{
background: #444444;
color: #ffffff;
text-shadow: -1px -1px 0 rgba(0,0,0,0.5);
}
雰囲気出ますねｗｗ
記事本文のまとめ
私が言うのも何なんですが…プロの人のデザインと私たち素人のデザインの決定的な差って何だろう？って考えました。
今回のデザインもまだまだ窮屈ですが、素人の作ったデザインは窮屈な感じが多いです。プロの人は余白をうまく使っているなぁと思います。
リセットCSSを使って全部の要素にmargin:0;padding:0;を使って自分でマージンとかパディングを指定するとやっぱ窮屈になりがち。
なので、今回は極力ブラウザのデフォルトのCSS(特にマージンとパディング)を利用したいと思ったわけです。
と、いうわけでアメブロカスタマイズ2011の第１フェーズは完了です。
次回からが本番です。