Googleフォントを導入してブログにちょっとした変化を出す方法【はてなブログを例にとって】2015-09-18Googleフォントを導入してブログにちょっとした変化を出す方法【はてなブログを例にとって】Web制作スポンサーリンク前回記事が、自分にとってけっこう大きいシェアをもらうことができました。ありがとうございます!www.yukihy.comこの記事友人も見ていて、Lineで誤字や脱字をものすごく指摘してきたり、自分でシェアしてたり鬱陶しかったのですが、友人としては何でバズったのかいまいち分からないみたいです。その友人から見ると、フォントの話も補色の話も、ほぼ定石通りなんだそう。僕から見ると意外だったので記事にしたのですが、やっぱり人から聞いた「気づき」だったり、自分が当然だと思っていることも記事にすることは価値があるなあと感じ取れた瞬間でもありました。今回は具体的にGoogleフォントの導入の仕方を、はてなブログを例にとってやってみたいと思います。使いすぎると、すごく重くなります英語しかできません...orzやり方はそこまで難しくありません。Googleフォントにアクセスします。Fontsそしたらタブの「Word」を押します。Text」から、自分が入れたい単語を入れます。すると下の文字に反映されるので、どのフォントが良いか選んでいきます。フォントサイズを下げた方がみやすいですね。フォントの数はものすごくたくさんあるので、選ぶのは正直かなり大変です。自分はかなり考えこんでしまったのですが、あんまり深いこと考えなくっても良いと思います。何にしても、ある程度まとまる気がしますので。これに選んでみることにしました!変化したのが分かりやすいようなのにしてます。するとページが遷移されて、いろいろと設定できるみたいですが、下の方の「3」と「4」が必要な部分です。やり方としてはいろいろあるみたいですが、今回はこの「3」のところをコピーして、はてなブログであれば、設定の「headに要素を追加」にコピペします。一般的にはheadタグの中に入れれば良いと思います。Googleフォントの4番をコピペします。これをはてなブログならば「デザインCSS」、一般的にはスタイルシートに入れて、デザインしていきます。sans-serif;}と言った感じです。後半の「サンセリフ」は、一般的に「body」などでフォントが指定されていると思うので消しても良いかもしれません。するとこんな感じになりました。印象がグッと変わりますよね!その他のところも変えたいのであえば、はてなブログであれば、以前つくった文字の構成図www.yukihy.comを見ていただくと、わりと簡単にできるかなあと思いますのでぜひ試してみてください。まとめちなみにGoogleフォントは、導入すると若干重くなります。本文全体に適応したりすると、とんでもなく遅くなってしまうので気をつけてください。関連記事2015-09-16フォント選びや配色に関して友人と話したらわりと目からウロコだった話だいぶブログもカスタマイズして、ほぼもういじるところが無い...2015-08-04当ブログで行ってきたはてなブログデザインカスタマイズまとめ!PR:はてなブログのテーマ「Naked」を作成しました!デフォルト...2015-07-20Milliard関連記事プラグインのCSSをいじり2列にしてブログになじむようにしてみました関連記事の表記に再びMilliardの関連記事プラグインを使い始め...2015-06-28はてなブログシェア数付きSNSボタンでさらにオシャレな吹き出しコードを追加です7/7追記:重大な不具合を修正しました。はてなブログPro都内に住む大学5年生だったのがこの春から社会人一年目になりました。データ分析職として働いております。Googleアナリティクス※メールでのブログカスタマイズのご依頼は現在受けておりません。@ftmaccho詳しいプロフィールはこちらから。広告依頼など重要っぽい連絡はこちらからお願いします。Lifeスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。