英語とappleとDIYと

apple製品、英語関連、DIYについて

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

Check!!!▼

スポンサーリンク

f:id:buchibuchi4647:20170421174152j:plain

サイトをカスタマイズしていて絶対に変更してほしいのはフォントの調整や文字の大きさ、余白の設定です。特にフォントはそのサイトの個性です。今回はフォントの変更方法〜文字の大きさや余白やスペースについてコピペのみで簡単に設定しましょう。

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

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

フォントを変更することによってサイトがまったく違うものに見えます。フォントを変更する1番簡単は手順はwebフォントを使います。

 webフォントとは

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

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

webフォント導入してフォントを統一することに何か意味があるのかと思う人もいるかもしれません。しかし、webフォントは導入するだけでseo効果やサイトの差別化やレスポンシブに最適といろいろメリットはありますので変更することをおすすめします。

webフォントのデメリット

f:id:buchibuchi4647:20170421161342j:plain

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

僕も別ブログのwordpressでは実際webフォントを導入していません。それは使用しているサーバーがあまり良くないからです。

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

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

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

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

googleフォントの使い方

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

f:id:buchibuchi4647:20170421182753p:plain

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

f:id:buchibuchi4647:20170421204454p:plain

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

 

f:id:buchibuchi4647:20170421204622p:plain

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

f:id:buchibuchi4647:20170421204958p:plain

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

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

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

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

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

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

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

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

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

オシャレなフォント

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

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

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

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

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

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

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

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

 

english-apple-diy.hatenablog.com