はてなブログ【webフォント・文字の大きさ・余白設定】コピペで簡単カスタマイズ

サイトカスタマイズで外せないのがフォントの調整や文字の大きさ、余白の設定です。

特にフォントはそのサイト・ブログの個性とも言えます。今回はフォントの変更方法〜文字の大きさや余白やスペースについてコピペのみで簡単に設定しましょう。

フォントをオシャレにカスタマイズ

フォントはあなたのブログ・サイトの個性です。特にはてなブログはテーマが被りますのでカスタマイズしてあなたのオリジナリティを演出しないといけません。そこで１番大切なのはフォントの変更です。

フォントを変更することによってサイトがまったく違うものに見えます。フォントを変更する１番手っ取り早くかつ簡単な方法はwebフォントを使います。

 webフォントとは

現在あなたはどのデバイス（windows、mac、スマホなど）によって、このブログを閲覧していますか。フォントはあなたの使用しているデバイスによって決まるので、統一感がありません。

フォントをネットワーク上に設定することで、どのデバイスから閲覧しても統一されたフォントで表示されます。これがwebフォントです。

webフォント導入してフォントを統一することに何か意味があるのかと思う人もいるかもしれません。

しかし、webフォントは導入するだけでseo効果やサイトの差別化やレスポンシブに最適といろいろメリットはありますので変更することをおすすめします。

webフォントのデメリット

webフォントにデメリットもあります。１番有名なのがサイト全体が重くなってしまい、遅くなるのではないかと心配になります。

僕も別ブログのwordpressでは実際webフォントを導入していません。それは使用しているサーバーがあまり良くないからです。余談ですが、さくらサーバーを使ってワードプレスを運営すると本当に重いです。

しかし、はてなブログはその心配はありません。今のところ、動作など閲覧に関してそれほど変化を感じていません。大切なのはサーバーに負荷を与えないように最低限度のカスタマイズをすることです。

webフォントを導入する手順

今回は無料で簡単に利用できる「googleフォント」の導入方法を紹介します。使い方を簡単に説明しますが、後述するコードを貼り付けるだけで僕と同じデザインのフォントに変更できます。

自分のオリジナルのフォントを探したいのであれば「googleフォントの使い方」このサイトと同じフォントに設定するのであれば「このサイトのフォントコード」を確認してください。

googleフォントの使い方

googleフォント（https://fonts.google.com/）にアクセス。

右上の「search」から好きなフォントを見つけます。または、下にスクロールして好みのデザインを選んでください。

デザインを決めたら「SERECT  THIS FONT」をクリック。

 

クリックすると下の部分に「Family Selected」の表示がでますのでクリックしてください。

コードが2つ表示されました。

①は設定→詳細設定→「headに要素を追加」にコードを貼り付けます。

②はデザイン→カスタマイズ→「デザインCSS」にコードを貼り付けます。

webフォントの設定は以上です。

このサイトのフォントコード

僕のサイトで使っているwebフォントのコードを紹介します。コピペで簡単に利用できます。

手順①: 以下のコードを設定→詳細設定→「headに要素を追加」にコードを貼り付けてください。

手順②:以下のコードをデザイン→カスタマイズ→「デザインCSS」にコードを貼り付けます。

レスポンシブ設定対応しています。パソコンとスマホを別々にカスタマイズしているなら、両方に貼り付けてください。

オシャレなフォント

フォントをオシャレにカスタマイズと見出しで書きましたが、オシャレは好みによります。僕が使っているフォントは僕がいろいろ探した中で見つけたフォントですが、気にいらないなら別のフォントをおすすめします。

たとえば、「はてなブログ おすすめ フォント」で検索した場合、こんなサイトもありましたので紹介します。

コピペでOK！ブログのフォントをカスタマイズする方法【はてなブログカスタマイズ】 – North-Geek

文字の大きさ、余白設定、行間設定

文章設定はそのままでも大丈夫ですが、読者にストレスなく記事を読んでほしいならある程度文字の大きさや、余白、行間設定をしましょう。最近はスマホユーザーのほうが多いのであまりにも行間が広すぎるとスクロールが大変で記事を読んでくれません。

では、どんな文章設定にしたらいいのか。検索しても正解なんては見つかりません。サイトよってあえて文字を大きくしていたり、余白があったりします。

しかし、ある程度はみなさん一緒なので以下に僕の使っている文章設定コードを貼り付けますのでコピペして使ってください。

数字の値を変更するとそれぞれの大きさを好みに合わせて設定可能です。

 

今回は以上になります。カスタマイズはほどほどにしてそろそろ本格的に記事を更新していきましょうね。[article id=”171,53,” cat_name=”1″ layout=”grid” ]

インスタグラムのフォント

はてなブログのフォントを変更したところでせっかくならあなたが使用しているインスタグラムのフォントも変更しませんか？インスタグラムのフォントも簡単に変更できますのでこの機会にサクッとオシャレで可愛いフォントにしましょう。

[getpost id=”1996″]

設定の詳細は上記の記事をアクセスしていただければ確認できます。ただ、snsやインスタグラムの運用は自分にとって不要という方は飛ばしてください。これからの時代インスタグラム は必須のアクセス集客ツールであることは間違い無いです。そのためにも他人と差をつける方法としてプロフィールをオシャレにする手段があることは認識しておいてください。今は不要な人も今後必要になるかもしれません。その時は今後のためにもブックマークくらいはつけといてね。