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

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

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

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

Free-Photos / Pixabay

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

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

 webフォントとは

Nietjuh / Pixabay

現在あなたはどのデバイス(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

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

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

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

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

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

[st-mybox title=”おすすめ” fontawesome=”” color=”#757575″ bordercolor=”#BDBDBD” bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]

【はてなブログ】月収10万達成!初心者の稼ぎ方やコツをリアル具体的に語ろう

[/st-mybox]

今回は以上になります。カスタマイズはほどほどにしてそろそろ本格的に記事を更新していきましょうね。

当サービスお得情報紹介・5名限定モニター生募集

当サイトのサービスはサイト作成だけでなく修正・カスタム・アクセスアップだけに留まらず、初心者向けに副業・アフィリエイトのノウハウも紹介しております。少しでも購入者が満足できるようなサービス提供を心がけております。

特に購入して終了ではなく。サービス終了後も定期的なやりとりを通じてお客様の相談・依頼をいただくことが一番重要だと思っております。長い付き合いになると思いますが、当サービスを利用して会社の利益アップ・脱ノウハウコレクターとなりませんか?

サービス概要に関してはこちらです。

 

学生・主婦の方から社会人の方まで幅広くご依頼をいただいております。

上記のサービスはいずれも好評です。特にアフィエイトをしている人でなかなか成果の出ない人や初心者で何からすれば良いのかわからない人にはおすすめのサービスとなっております。

サービスご依頼ご希望の方はサイト内に設置「お問い合わせ」フォームより依頼・または下記よりご連絡ください。当サービスはプロフィールにもありますよう「ココナラ」にて500件以上の販売実績と評価4.8以上であるプラチナ会員認定

ココナラ経由ではなく当サービスの「お問い合わせ」よりご依頼いただいた方には貴重な特典・割引価格で提供しております。このチャンスにぜひご検討ください。

ご依頼お待ちしております。

また、2020年にはあるモニター生が私のコンサルサポートを実施してココナラ での販売を開始しました。2020年7月末から8月末までの1ヶ月間での成果ですが。売り上げではなく、実際の収入見込みが22万達成できました。新規アカウントです。この調子で頑張って欲しいです。

上記のモニター生同様、ココナラ を使って副業サポートコンサル希望のモニター生を5名募集しております。

モニター価格は2種類あります。私が徹底的にサポートまたは定期的なアドバイスの2パターンあります。興味のある方は、こちらも合わせてお問い合わせよりご連絡ください。5名限定なので迷ったらとりあえずご連絡ください。

ご依頼・ご質問等はコチラから。内容を確認次第、順次対応させて頂きます。

お名前
必須
メールアドレス
必須
サービス内容
メッセージ本文
 
最新情報をチェックしませんか?