近松おこめの秘密基地

ちょっと休憩。ちょっと得する。

【はてな】まずはとにかくマネるべし!他人のブログのフォントを確認する方法

※当ブログのコードで不具合が発生した場合の責任は負いかねますので、ご了承ください。カスタマイズは自己責任でお願いいたします。

f:id:kometika:20180625012042j:plain

ブログってほんとに人それぞれですよね。

 

みなさん素敵な個性を存分に発揮していて、見ていて楽しい空間を作り出しています。

 

そんなブログを見ていると

 

これパクり・・・マネして~

 

そう思う事ってありますよね?というわけで、今回は好きなあの人のブログのフォントを確認して、自分のブログに取り入れる方法を紹介していこうと思います!

 

 フォントを確認する方法

まずは、chromeで好きな人のブログの記事を開きます。

 

他の方のブログを公開すると色々と問題がありそうなので今回はぼくのブログを例に説明していきます。

 

f:id:kometika:20180625012332p:plain

 

ページを開いたら、右クリックして検証を押します。

 

 

f:id:kometika:20180625012352p:plain

 

右からにゅっと何かが出てくると思いますので、画像の部分をスクロールしていくとフォントを確認できます。

 

それでは早速コピーして取り入れていきましょう!!

 

フォントを取り入れる方法

www.north-geek.com

 

今回の方法はこちらの記事を参考にさせていただきました!

 

body { font-family: "コピーしたフォント"; }

 

デザイン→カスタマイズ→デザインCSSに上記のCSSを書き込んでいきます。

 

先ほどのフォントを取り入れたい場合は

 

body { font-family: "Quicksand", "ヒラギノ角ゴ ProN W3", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif; }

 

このようになります。これをデザインCSSにコピーして貼り付ければこのブログのフォントになります。

 

これで、フォントを変更できました。

 

フォントサイズもついでに変える

ついでにフォントサイズも変更していきましょう。

 

というのも

 

www.okuni.me

 

こちらの記事によると、はてなブログではほとんどのテーマの文字サイズが14pxのようで、読みにくいのはもちろんSEO的にも不利みたいなんです。

 

本当にちょっとしたことですが、変えておいた方が絶対いいので、今回はついでにフォントサイズも変えておきましょう。

 

.entry-content p {font-size: 16px;}

 

こちらのCSSを先ほどと同じデザインCSSに書コピペするだけです。

 

数字の部分を変えればフォントサイズが変わります。もし16で気に入らなかったら個人で変えてください。

 

おわりに

というわけで、簡単ですがフォントを確認し、自分のブログに取り入れる方法の紹介でした。

 

ブログのカスタマイズって楽しいんですけど、難しいんですよね~

なのですごくこだわっている人のブログを見ると

 

あー!!

もうカスタマイズ方法全部教えてーー!!

 

と発狂してしまいそうになることも多々あったんですよね(笑)

 

なので、今後はなるべく当ブログで行ったカスタマイズは公開していこうと思いますので、また近々記事にしていこうと思います!!

 

以上!!記事を書いた時間よりカスタマイズした時間の方が長いかもしれない近松おこめでした。

自己紹介 プライバシーポリシー お問い合わせ