Blogger 最初のカスタマイズ

Bloggerのデフォルト設定では問題があると感じたところを変更したのでメモしておく。なお、テーマはAwesome.incを使用している。

横幅の修正

デフォルトでは960pxで記事の幅が狭い。デザインは８の倍数でできているを参考に一回り大きい1040pxに変更する。

文字の大きさ

ページのフォントはデフォルトで14pxになっている。一回り大きい15pxに変更する。

また、デフォルトのCSSでは投稿タイトルとh4の文字が以下のように同じ扱いになっている。

h3.post-title, h4 {
    font: normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    color: #444444;
}

これだとh3はデフォルトで1.17em (本文16pxの場合、18.72px) なので、h4 (22px) よりh3の方が文字が小さくなってしまう。
Bloggerの投稿編集画面では、見出し h2 、小見出し h3 、準見出し h4 の3つが定義され、それぞれの文字の大きさはデフォルトCSSとなっている（つまり編集画面と実際の画面の文字の大きさが異なる）。編集画面に近い見た目になるように以下のCSSを追加。

.post-body.entry-content h2 {
    font-size: 1.5em;
    margin-top: 1.5em;
}
.post-body h3 {
    font-size: 1.3em;
    margin-top: 1.3em;
}
h4:not([class]) {
    font-size: 1.1em;
}

h2やh3はウィジェットのタイトルにも使われているので投稿ページに限定する。h4はページ下部のコメント欄タイトルに使われておりデフォルトの状態ではむやみに大きくなっている。そこにも適用するため、:note([class]) でクラス指定なしを対象にする。
クラスの指定は .post-body だけだと、main-inner が優先されることがあるので、その場合は h2 の例のように .post-body.entry-content とする。

行間

デフォルトの1.4emでは狭すぎるので、1.6emに変更する。
以下のCSSを追加。

.post-body {
 line-height: 1.6;
}

ヘッダー空白

ヘッダーと本文間の余白が目立つので padding-top を10pxで上書きする。（デフォルト30px）

.main-inner {
    padding-top: 10px;
}

引用

デフォルトだと引用が分かりづらい。
元のCSSを確認すると、こうなっていた。

blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}

字を一回り小さくし、枠を追加する。
以下のCSSを追加。

blockquote {
    padding: 0 20px;
    border: 1px solid #dddddd;
    border-left-width: 5px;
    background-color: #f6f6f6;
}

レイアウト

デフォルトで

メイン: ブログの投稿; 注目の投稿; 人気の投稿
右サイドバー: ブログ検索; ページ; 自己紹介; 不正行為を報告; ラベル; ブログアーカイブ

になっているのを

メイン: ブログの投稿
右サイドバー: ブログ検索; 自己紹介; ページ; ラベル; ブログアーカイブ; 人気の投稿; 不正行為を報告

に変更。

「ブログアーカイブ」はスタイルを「階層」に、「人気の投稿」は表示を「投稿のタイトル」のみに変更。

2017-11-01