このブログの内容
bloggerでフォントを変えることはできないの？
テーマのZELOにはもともと、各端末で読みやすくきれいに見えるフォントが設定されています。
でもブログをいじっていると、もうちょっと個性を出したくなっちゃう←
このまま使うのが、一番表示スピードも速いし視認性も問題ないしいいのですよ！
でも！！！
変えたくなっちゃうんですよねぇ←
私もです。
フォントをかわいくしたり、オシャレにしてみたくなりますよね。
そこで調べてみると、どうやらWebフォントを使うと良さそうだ！
ネットにあるようにコピペしてえいっ！
あれ、なんでならないの…泣
普通のWebサイトにやるのと同じように、WEBフォントをbloggerで使おうとすると、エラーで使えないことがあるんですね～。
bloggerでのフォント攻略方法をお教えしましょう！
Webフォントの使い方
Webフォントというのは、Web上にあるフォントです。
端末に依存せずにどの端末からも使用できるので、サイトのフォントを統一できて便利です。
無料で使えるものもたくさんあり、このブログでも使用しています。
bloggerでも使用できます！
使い方をご紹介しますね！
Google Fonts
引用：Google Fonts
URL：https://fonts.google.com/
無料で使用することができる、GoogleFontsです。
英数字用のフォントはもちろん、日本語フォントもたくさんあります。
私は本文などはそのままZELOの設定を使用し、見出しや強調などポイント部分にWebフォントを使用しています。
私のブログで使用しているフォントはこちらです。
Noto Sans JP
ここまで↑
トップページ記事タイトル、記事ページタイトルなど、見出しh2、3、4に使用しています。
くせのないやわらかな雰囲気が気に入っています。
Thin 100の細字を使用しています。
太さもたくさん選べるのでお勧めフォントです！
M PLUS 1p
ここまで↑
強調テキスト、引用文、ページ移動ボタンなど、ポイントとなる部分に使用しています。
ころころと丸いフォルムで、可愛いです。
少し個性的なので、部分使いに良いです！
Google Fontsをbloggerで使うには
Google Fontsの「Noto Sans JP」を適用するやり方を一緒にやってみましょう。
GoogleFontsのサイトを開きます。
この時ブラウザが勝手にサイトを日本語に翻訳してしまうことがありますが、翻訳をしないようにしてください。
コードが翻訳されて壊れてしまいます。
SearchFontsの欄に、「Noto Sans JP」と入力します。
「Noto Sans Japanese」が出てくるので選択します。
下の方に「Style」がある場合、太さを選択できます。
私は「Thin 100」にしたいので「Select Thin 100 +」をクリックします。
するとサイトの右側に、選択したフォントが出てきます。
この上のコードをhead内に貼り、下のコードをCSSとしてフォントを変えたい場所に貼ります。
というのが、通常のやり方ですが、bloggerはこのままではわかってくれません。
癖がありまして…。
headにフォントを読み込む指定
ひとまず、通常通りに、上のコードをheadに貼ります。
ペタリ。
閉じる表記が必要
が、これだと、一つ一つのlinkが終了していないと判断されてしまいます。
そこで、終了を表す「/」を入れてあげます。
これで終了が伝わりました。
属性省略は不可
しかしまだダメです。
「crossorigin」の後ろが赤くなっているのが分かりますか？
これはエラーを表しています。
ここは次のように変更します。
「crossorigin」を「crossorigin="crossorigin"」と書くのです。
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="crossorigin"/>
ここまでやればできたかな？
特殊文字置き換え
いえいえ、これでもまだダメなんですよ。
Bloggerは分かってくれません。
実はBloggerは一部を特殊文字に置き換えてあげないといけないんです。
コレにはかなりはまりました。。。
「&」を「&」と書くのです。
そういう文字いくつあるんだ！？と涙目になっていましたが、
でも大丈夫、とても素敵なツールを作ってくださっている方がいました！
引用：HTML ⇔ 特殊文字 変換ツール
URL：https://blogger-learning-rab.blogspot.com/2020/07/html-text-converter.html
コードを載せたいときにも特殊文字変換が必要なので、わたくし、大変お世話になっております！！
こちらに、hrefの中身を張り付けて変換します。
「&」を変換してくれました！！
変換したコードを張り付けます。
これで、フォントを使う準備ができました！！
やっと…
CSSにフォントを指定
つぎはこれを使う場所に、CSSを設定します。
記事ページタイトルに使いたい場合は、「.entry-title」にGoogleFontsのCSSをコピペします。
実行するとこんな感じです。
左は変更前、右が変更後です。
やっとできました～！
おわりに
Webフォントの設定、いかがでしたでしょうか？
好きなフォントを組み合わせて、自分だけのブログにしてみましょう！
ぜひチャレンジしてみてくださいね。
無料で自由なbloggerを楽しみましょう！
0 件のコメント :
コメントを投稿