ブログタイトル『Leo-Roy's Dialy』の文字フォントを変更したので、自分への覚え書きも兼ねて記事にします。
左上のタイトル文字に注目
Before
After
ゴシック体から筆記体に変わりましたね。
いかにもなタイトル文字から画像に馴染むデザイン文字に変更したかったんです。
最近は細めな文字フォントがスタイリッシュで流行っているのかな？
そうなると私のデザインは古くさいって事になりますが、それで正解です(えっ？)
私自身が昭和のオバチャンですから、どんな人が書いてるのか想像出来るでしょ♪(自虐ネタ)
ではこのカスタマイズをしていきましょう。
まずは下記の【Google Fonts】に移動します。
↓↓↓
Google Fonts
英語ばっかのサイトですが直感でできます。
赤枠の中にブログタイトル(変更したい文字)を入れると一覧に反映されるので、イメージが分かりやすいかと思います。
細かい設定をしてからフォントを選んでいきたい方は、左の青い枠の中をいじって下さい。
【Thickness】文字の太さ
【Slant】ゴシック体↔筆記体の変化
【Width】文字の広さ
Google Fontsは数百以上あります。
1度設定したら長く使うものなので、ゆっくり選んでいきたい方は、気に入ったフォントがあったらとりあえずお気に入りに入れると便利です。
後から｢あれ良かったな｣って思っても見つけ出すのは大変ですから。
お気に入りに入れる時は【Add to Collection】をクリック
クリックすると【Remove to Collection】に変わります。
お気に入りから削除したい時はもう一度クリックです。
お気に入りだけを右側にバーッと一覧表示したい時は星マークの所(赤い枠の中)をクリック
黄色い枠をクリックするとお気に入りからいっきに削除とか、いっきに設定とか出来ます。
選ぶフォントによって、右側にある小さい四角が２つのと３つのとがあります。
これね。
矢印が下向きのマークがあるフォントは、文字の太さやイタリック体(italic)も選ぶ事が出来ます。
※イタリック体≒斜めに傾いている筆記体みたいな文字。斜体(oblique)ってのもある。
デザインが決まったら、緑の枠(矢印が右向きのマーク)をクリックします。
緑の枠(Quick-useって言います）をクリックすると①～④までの選ぶ項目が出てきます。
順番にいきましょう。
まずは①と②から
①は文字の太さ、イタリック体などを選んでチェックを入れます。
複数選んで使い分ける事も出来ますが、選びすぎるとブログが重くなるので必要なものだけにした方がいいかもね。
選んだフォントによっては①は何も選べない事があります。その時は②をサラッと確認したら③へ・・・
②はLatin(latin)にチェックが入ってるのを確認だけして、何もいじらなくていいです。
はてなブログ上でアルファベットや数字で使うからこの設定でOK！
ここも選んだフォントによってLatin(latin)しか選択がないものや、いっぱい選択項目が表示されることがあるけど、デフォルトでLatinになってるはずなので一応確認ね。
次は③と④をやっていきましょう
③は赤枠の中をコピーして【デザイン】⇒【カスタマイズ】⇒【ヘッダ】⇒【タイトル下】に貼り付けます。
デフォルトでStandard(四角の赤枠)になってると思うけど一応確認して下さい。
はてなブログでHTMLタグで使うのでStandardのままでOKです。
私はのちのち整理出来る様に、このように名前を付けて貼り付けました。
名前を付けずに単純にコピペだけでもOKです。
<!-- ブログタイトルフォント変更 --> <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
④の黄色い枠の中も同じくコピーして【デザイン】⇒【カスタマイズ】⇒【デザインCSS】に貼り付けます。が・・・
③みたいに単純にコピペだと反映しません。ブログタイトルのデザインを変えますよって事を指定してあげます。
/* ブログタイトルフォント変更*/
#title
{
font-family: 'Pacifico', cursive;
}
使う時は、
font-family: 'Pacifico', cursive;
を削除して④でコピーしたものを貼り付けて下さい。
①～④までの作業をすると、まさにこのブログタイトルのフォントになります。
私が選んだフォントは文字の太さやイタリック体を選べないフォントだったので作業はこれで終了ですが、①で文字の太さやイタリック体など選べるフォントを選んだ場合、もしくは複数を選んだ場合はその指定も付け足します。
例えば①で、400と900italicを選んだとします。
②はさらっと確認だけして
③もそのまま【デザイン】⇒【カスタマイズ】⇒【ヘッダ】⇒【タイトル下】に貼り付けます。
<!-- ブログタイトルフォント変更 --> <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,900italic' rel='stylesheet' type='text/css'>
④がちょっと大切です。
下記のプロパティを指定して下さい。
文字の太さを決めるweight
font-weight: 400;
数字はご自身が選んだものに変えて設定して下さい。
文字をイタリック体にするstyle
font-style: italic;
つまり、400を選んだならこんな風に付け加えて
/* ブログタイトルフォント変更*/
#title
{
font-family: 'Playfair Display', serif;
font-weight: 400;
}これをデザインCSSに貼り付けると
太さが900で、さらにイタリック体を選んだなら
/* ブログタイトルフォント変更*/
#title
{
font-family: 'Playfair Display', serif;
font-weight: 900;
font-style: italic;
}これをデザインCSSに貼り付けると
もう一度言います。
①で文字の太さやイタリック体などを選べるフォントを選んだ人は、①で1つにしかチェックを入れなくても上記のプロパティを追加して下さいね。
一番大切なのは記事内容だと思うけど、まず最初に目に付く部分を綺麗にして訪問者を楽しませる事も大切だと思います。
それにブログデザインが素敵だと、訪問者が『このブログ読んでみたい』って思って先まで進んでくれるかもしれませんから。
超絶ド素人いつかまた変更したい時の為に自分用に記事にしてるので、ヘンテコリンなコードだったりしても今がちゃんと反映されていればOKとしています。
使いたい方は自己責任でどうぞ。
本当に素人なので、コード？タグ？スタイル？プロパティ？·····
全部が全部知らない言葉ばかりなので、記事中で間違って使っている言葉も多々あると思います。
その時は見て見ぬふりするか優しく指摘して下さい。
