Blogger: 本文のフォントを変更する

本文の明朝体をゴシック系に変更する

テンプレートを変更したら、本文のフォントが明朝で読みづらい･･･
「レイアウト」で本文のフォントをいじれると思ったのですが、うまくいかず。
（ここからだと欧文フォントの指定はできるんだけど、日本語フォントの指定がうまくできないのかも）

ブログを表示して、右クリックで「詳細」を選び、どの部分の指定がそれなのかを探します。

管理画面 > レイアウト > 上級者向け > css　記述欄 へ、フォントの指定を入れてみます。

.post-body {
font-family: 'Avenir',
'Helvetica Neue','Helvetica',
'Arial','Hiragino Sans',
'ヒラギノ角ゴシック',YuGothic,'Yu Gothic',
'メイリオ', Meiryo,
'ＭＳ Ｐゴシック','MS PGothic' 
}

試行錯誤の最中、テンプレートのhtml内のcssまで追加したりして、結局どれが効いてるのか分からなかった…（＊詳細ひらいて更新するとゴシック系になっても、閉じると明朝に戻ってたりして、なんだかどこがどうなってるのかよく分からなかったです）

フォントファミリーの書き方は、サルワカさんでコピペさせてもらいました。
すごくわかりやすく書いてあって、初心者には本当にありがたいです。

タイトルも変更する

タイトル部分も手を加えました。

.post-title,entry-title h3 {
　font-family: "Kokoro";
}

最終的に、この形でタイトル部分を変更しました。
cssクラスタの並列表記、 半角スペース、> では指定が効かなかったです。
色々あるんですね。
（勉強不足）

ここのh3は、topの記事タイトル部分と共通なので、背景色を使うなどはしない方が良さそうです。

並列表記については

CSSを要素に適用する（セレクタの種類）/CSS/HTMLの基本を学ぶ/ウェブ作成に役立つ情報サイト/It's a long way to the top

ここが詳しいかもと。メモ。

見出しを変更する

見出しは普通に、h2で指定ができました。

h2 {
position: relative;
padding: 5px 5px 5px 42px;
background: #9d8e87;
font-size: 20px;
color: white;
margin-left: -33px;
line-height: 1.3;
z-index:-1;
}

h2:before {
position: absolute;
content: '';
left: -2px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
z-index:-2
}

ここも、前出サルワカさんでコピペさせてもらって、色だけ変えてます。
はぁ～すごい。

少しずつ、カスタマイズが進んできました。うれしいなぁ。