初心者Vaster2カスタマイズ「文字のフォントを変える」

初心者Vaster2カスタマイズです。
今回は「文字のフォントを変える」です。




前回同様、文字のフォントを替えるだけでも見た目の印象が変わります。

こちらも参考のサイト様があります。
Vaster2の参考は、
ブログ全体のフォントを変更する方法 [Blogger / Vaster2]|あかりlog

フォントの参考は、
はてなブログのタイトルのフォントを変更する方法 日本語対応 - ミニマム コラム

という事で、実際に取り入れた手順をご紹介します。


初心者Vaster2カスタマイズ「文字のフォントを替える」

フォントを選ぼう

まず好きなフォントを選びます。
グーグルさんで用意されているフォントです。

Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access

この中から気に入ったものを選びましょう。


HTMLにフォントを追加する

ミニマムコラムさんの手順で要素を追加します。
今回はHTMLの編集になりますので、事前にバックアップは取っておいて下さい。

バックアップは、管理画面の「テーマ」の画面右上にありますので、「ダウンロード」を選択し、任意の場所へ保管しておいて下さい。

©さんがつ日記「文字のフォントを変える」1


それでは、そのまま管理画面の「HTMLの編集」へ進んで<head>の下に下記のタグを書き込みます。

©さんがつ日記「文字のフォントを変える」2

(四角で囲んだ部分から<head>が始まりますので、適当な部分へ追加記入してください。私は丸で囲んだ部分に入れています。)

この場合、必要なフォントの分だけの記入で良いです。
当サイトでは「さわらびゴシック」というフォントを使いたいので、
<link href='https://fonts.googleapis.com/earlyaccess/sawarabigothic.css' rel='stylesheet'/>
を読み込んでいます。

要するに、下記の黄色部分でフォントを選んでいると思って下さい。
href='https://fonts.googleapis.com/earlyaccess/sawarabigothic.css' rel='stylesheet'/>

M+1Pなら

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet"></link>

Rounded M+1cなら

<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet"></link>

はんなり明朝なら

<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet"></link>

こころ明朝なら

<link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet"></link>

さわらび明朝なら

<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet"></link>

ニクキュウなら

<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet"></link>

ニコモジなら

<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet"></link>

Noto Sans Japaneseなら

<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet"></link>


全体のフォントを設定する

続いてあかりさんのブログを参考に、HTML中から

body{
margin:0;
font-size:16px;
line-height:1.7em;
}

を探して、{ }の中に

font-family:"Sawarabi Gothic","ヒラギノ角ゴ Pro W3","メイリオ","meiryo","游ゴシック",sans-serif;  

を書き込みます。(これは、私のブログで使っているものですので上記の中の好きなフォントを入れて下さい。
「font-family:」のすぐ後に下記の必要なフォントを記入するという事です。

Mplus 1p
Rounded Mplus 1c
Hannari
Kokoro
Sawarabi Mincho
Sawarabi Gothic
Nikukyu
Nico Moji
Noto Sans Japanese

また、すぐ下に「* {・・・・」を書き込んでいます。

* {
font-family:"Sawarabi Gothic","ヒラギノ角ゴ Pro W3","メイリオ","meiryo","游ゴシック",sans-serif;
}

あかりさんのブログにある様に、同じようなものですが、2つ書かないと反映されないようです。
そして、
「font-size:16px;」は、文字の大きさ
「line-height:1.7em;」は、行間
になります。こちらは数字を変えるだけ良いので、お好きなサイズに変更して下さい。

ちなみに、私は他の運営サイトでもそれぞれ変えています。


©さんがつ日記「文字のフォントを変える」3


絵本のサイトではかなり丸味のある「Rounded Mplus 1c」を使っています。可愛い文字になっていますね。


ヘッダーの文字のみを変える

続いて、「ヘッダー部分のみを変えたい場合」の手順を書いてみます。

全体の変更と同じように必要なフォントを管理画面の「テーマ」→「HTMLの編集」へ進んで<head>の下に下記のタグを書き込みます。

ミニマムコラムさんと同じ ニコモジ「Nico Moji」にしてみますので、上の一覧から該当コードを記入して下さい。


続けていきます。
HTML画面のずっと下の方に「ブログタイトル」のという項目があります。

ブログタイトルの中から、「.header-title a{ 」を探して、

font-family:"Nico Moji”;

を追加します。

HTMLの中から簡単に必要な項目を見つける方法は「Ctrl」キーと「F」キー同時押しで、検索バーを出して下さい。

出てきた検索バーに「ブログタイトル」と打ち込んで「Enter」キーを押せば該当の項目にたどり着きます。
(検索バーの文字を変えると他の項目も簡単に見つかります。指定ワードが複数存在する場合は、「Enter」キーを希望の項目にたどり着くまで何度か押してください。)



変更後がこちらです。
コミカルな文字ですので、姉妹サイトの四コマ漫画ブログのタイトルを変えてみました。

©さんがつ日記「文字のフォントを変える」4

(ヘッダーの緑は広告です、中身は黄色で塗りつぶしたので少々分りにくいですが、ご了承下さい・・・。)


変更しましたが、どうやらニコモジは、「漢字には非対応」みたいですので、却下・・・。


と思ったのですが、ブログの下の説明文をルビみたいな感じで書いて、フォントを活かしてみます。

説明文は、先ほどの部分からすぐ下にある「.header-description p{ 」の部分に同じ様に追加します。

ニコモジは少し小さく見えますので、フォントも大きくしてみましょう。

「font-size:28px;」の数字の部分を替えればOKです。

そして説明文を少々変えて・・・・

©さんがつ日記「文字のフォントを変える」5


出来上がりはこの様な感じです。
少し無理がありますが、まぁこんな感じです。

文字を真ん中に寄せたい場合は、「text-align: center;」も一緒に追加すれば大丈夫です。

この要領でいきますと、タイトルを「Rounded M+1c」で、説明文を「ニコモジ」の設定も可能です。

複数の文字を使う場合は、<head>の下に使う文字のタグを書き込んで下さい。
2種類使いたい場合は、2つの書き込みが必要です。

では、出来上がりです。

©さんがつ日記「文字のフォントを変える」6


どうでしょうか?
漢字の部分に丸みを帯びたので、ニコモジ単体より少し見やすくなったような気がします。

統一感は無いですが、何となくコミカルな感じになりましたね。
この辺りは好みの問題ですので、好きなように変えてみましょう。



・・・という事で、色を替える様に、フォントを変える事で全体の雰囲気も変わりますので参考にしてみて下さい。


3 件のコメント :

Adelheid.H さんのコメント...
さんがつcubicle さんのコメント...
Adelheid.H さんのコメント...