はてなブログ【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]

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

当サービスお得情報紹介

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

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

 

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

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

サービスご依頼ご希望の方はサイト内に設置「お問い合わせ」フォームより依頼・または下記よりご連絡ください。当サービスはプロフィールにもありますよう[ランサーズ・スキルクラウド・ココナラ」などCtoCサービスで1000件以上の販売実績があります。常にお客様の満足できるサービスを意識して運営しています。

現在ココナラでおすすめの案件

ここならでは現在全てのサービスを半額以下で販売中でございます。
コンテンツ副業「再販権・テンプレ付き」販売します 副業続かない・初心者「セールスレター・再販権付きサービス」
特におすすめの案件がコチラ!これ弊社の記載が悪いのか?あまり売れてないですが、絶対におすすめの案件です。なぜ売れないのか?逆に心配してます。おそらくココナラで1番の穴場案件です。この案件だけで絶対に成功します。

そのほかの安定した人気サービスもぜひご利用お待ちしております。

最新情報をチェックしませんか?