【コピペOK】STORK(ストーク)をカスタマイズ!「第2弾:フォント テンプレート7選」

現在、ブロガーの間で大人気となっている、テーマ「STORK(ストーク)」を、自分だけのオリジナルデザインにカスタマイズしよう!

今回は、第2弾「フォント編」を、ご紹介します。

 

第1弾「見出し編」も、見てね(↓)

【コピペOK】STORK(ストーク)をカスタマイズ!「第1弾:見出し テンプレート12選」

2017.04.11

 

「STORK」を、自分好みにカスタマイズ!

そもそも「STORK」って?

STORK」を知らない、まだ使っていない・・・という方は、先にコチラ(↓)をどうぞ。なぜ人気があるか、わかってもらえると思います。

ブロガーに大人気! 話題のテーマ 「 STORK(ストーク)」 を使う!

2016.12.21

無料テーマを辞めて、僕が「STORK(ストーク)」を選んだ理由

2016.12.21

 

カスタマイズ!・・・その前に

まずは、たった1時間で、簡単にできるカスタマイズがあります!

「STORK(ストーク)」を、たった1時間で、おしゃれにカスタマイズ!

2016.12.27

これだけでも、ぐっとオシャレオリジナルデザインに、なりますよ♪

 

(↑)のカスタマイズを終えられた方は、早速「フォント」のカスタマイズをしましょう!

 

「STORK」カスタマイズ 第2弾:フォント

フォントは、ブログ内の文字を表現する、大事な要素。

しかし、通常は「アクセスしている端末(PC・スマフォ等)」により、使われるフォントが変わるので、見え方が変わります。「STORK」では最初、このような(↓)感じです。

 

ちなみに、コチラ(↓)がカスタマイズした当ブログのフォントです。

 

フォント1つで、記事の読みやすさ・ブログの雰囲気が、大きく違って見えると思います。しかし、こちらも第1弾「見出し編」と同様、デザインを変える場合、HTML・CSSに詳しくない方には、ハードルが高いと思います。

 

そこで今回は、初心者の方でもコピペで使える、フォントテンプレート「7選」を用意しました!

 

STORK用 見出しテンプレート 7選

実はフォントを変えるには、大きく2つの方法があります。

  1.  内部フォント指定」を変える方法
  2.  Webフォント」を指定する方法

 

この両者のメリット・デメリットを踏まえながら、ご紹介するので、希望に合ったものを選んで、使ってみて下さいね。

 

1.「内部フォント指定」を変える テンプレ 3選

内部フォント指定とは

アクセスしているユーザー側の環境(PC・スマフォなど)で、もともと用意されているフォントを、優先順に指定する方法。

 

メリット
ユーザー側のフォント設定を読み込むので、ブログに負荷がかからない

デメリット
ユーザー側の環境(PC・スマフォ・ブラウザなど)により、見え方が大きく変わる

 

わかりやすく解説すると、

ブログはフォントファイルを持っていないので、ユーザー側で設定されているフォントを読み込むようになっています。例えば、Winodwsでは「MS明朝」「MSゴシック」、Macでは「ヒラギノ明朝」「ヒラギノゴシック」といったフォントがあり、アクセスされた環境が持っているフォントで、あなたのブログが表示されます。

しかし、あなたが「自分のブログは「MSゴシック」表示で見てもらいたい!」と思っても、Macユーザーはそのフォントを表示できません。

つまり、「ユーザー側のフォントを使うから、処理が軽い」反面、「思い通りのフォント表示にはならない」ことがあります。

 

STORK」も本来、この方法を使っていて、このように(↓)フォントを指定しています。

body {font-family: "Lato", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "MS Pゴシック", "MS PGothic", sans-serif;font-family: Arial,Helvetica,"游ゴシック",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-size: 103%;line-height: 1.5;color: #545B63;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;word-wrap: break-word;background: #f7f7f7;}
.f_serif{ font-family: Georgia,serif;}
.f_meiryo{font-family: "メイリオ", sans-serif;}

 

たくさん指定しているのは、ユーザー側のどんな環境(Windows・Mac・iOS・Androidなど)でも対応できるようにしているためです。ただし、左から順に優先して使われるので「なるべく表示させたい優先フォント」を指定できるのです。

 

もっと詳しく知りたい方は

コチラ(↓)のサイト様が、とてもわかりやすく解説されていますので、見てみて下さいね。

font-familyの書き方まとめ:CSSでフォントを指定しよう
HTML&CSS初心者の方でも分かるように「font-familyの書き方の基本」と「Font-familyメーカーの使い方」を解説します。

 

それでは、「内部フォント指定」を変える、テンプレートをご紹介!コピペで使えます。(使い方は最後にあります)

 

① 大人め・高級感

/* フォント変更 */
body {
font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN','Arial',sans-serif;
}

 

② スッキリ・読みやすい

/* フォント変更 */
body {
font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans','Helvetica Neue','Helvetica','Arial',sans-serif;
}

 

③ ポップ・可愛い

/* フォント変更 */
body {
font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN','ヒラギノ角ゴシック','Hiragino Sans','Yu Gothic UI','Arial Black','Arial',sans-serif;
}

 

ほかにも、いろんなフォントがあります!

他のフォントも試してみたい!という方は、コチラ(↓)の「Font-familyメーカー」というツールがとても便利です!

Font-familyメーカー:フォント種類一覧からサクッと指定
Windows・Mac・iOSの標準フォント一覧からドラッグするだけで簡単にfont-familyを作成できます。

 

 

2.「Webフォント」を指定する テンプレ 4選

Webフォント指定とは

Web上で公開されている、フォントファイルを指定し、読み込ませる方法。

 

メリット
ユーザー側の環境(PC・スマフォ・ブラウザなど)を問わず、見え方を統一できる

デメリット
Web上のフォント設定を読み込むので、ブログに負荷がかかる

 

わかりやすく解説すると、

ユーザー側で持っているフォントではなく、Web上の「特定フォント」を読み込んで、表示させることができます。そのため、WindowsユーザーでもMacユーザーでも、同じフォントで、あなたのブログが表示されます。

しかし、ページを表示するたびに、Web上のフォントファイルにアクセスして、読み込む必要があるので、ブログ表示の遅延を招くかもしれません。

つまり、「思い通りのフォント表示にできる」反面、「Web上のフォントを使うから、処理が重い」ことがあります。

 

ただし、このデメリットを限りなくゼロにした「Google Fonts」があります。

Googleの超ハイスペックサーバから読み込むので、約数十ミリ秒という、体感で遅いと感じるレベルでは無いものが、ほとんどです。しかも、ユニークなフォントが多く、オリジナルデザインに向いています。

 

それでは、「Webフォント指定」を変える、テンプレートをご紹介!こちらもコピペで使えます。(使い方は最後にあります)

 

❶ こころ明朝(おしゃれ・和風)

/* フォント変更 */
@import url(https://fonts.googleapis.com/earlyaccess/kokoro.css);
 
body {
     font-family: 'Kokoro', sans-serif;
     font-size: 100%;
}

 

❷ ざわらびゴシック(シンプル・わかりやすい)

/* フォント変更 */
@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);
 
body {
     font-family: 'Sawarabi Gothic', sans-serif;
     font-size: 100%;
}

 

❸ ニコモジ(個性的・可愛い)

/* フォント変更 */
@import url(https://fonts.googleapis.com/earlyaccess/nicomoji.css);
 
body {
     font-family: 'Nico Moji', sans-serif;
     font-size: 100%;
}

 

❹ おまけ:コビトブログの設定

/* Webフォント:Noto Sans JP */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
 
body {
     font-family: 'Noto Sans JP', sans-serif;
     font-size: 100%;
     font-weight:350;
     letter-spacing: 0.1em;
}

当ブログでは「Google Fonts」の、「Noto Sans JP」を使っています。文字の太さや間隔も見やすくしているので、よければどうぞ!

 

ほかにも、日本語対応の「Google Fonts」があります!

他のフォントも試してみたい!という方は、コチラ(↓)を見てみてね。

Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access
As Google makes progress on supporting Japanese web typography, we invite designers and developers to experiment with these Japanese web fonts now available ...

 

 

テンプレートの使い方

外観」→「テーマの編集」を、押します。

 

① 編集するテーマで、子テーマ「stork_custom」を選択
② スタイルシートstyle.css)を選択
③ 好みのテンプレートタグをコピーし、貼り付け後、「ファイルを更新」を忘れずに

 

まとめ

フォントは特に、ブログの印象を大きく左右するので、ぜひお好きな文字に変えて、カスタマイズしてみてください!

もし「こんな風に変えたいけど、やり方がわからない」という方は、気軽にご質問くださいね。

 

第3弾「フッター編は、コチラ(↓)からどうぞ!

STORKをカスタマイズ!「第3弾:フッター(その重要性も説明します)」

2017.04.26

 

STORKユーザーの方は、コチラもみてね
【簡単インポート】「STORK」を使う時、必要なショートコードを、サクッと登録!
STORK(ストーク)で、ランディングページ(LP)を設置するべき、3つの理由と具体例

 

狐火兎
フォントはPC・スマフォの違いだけでなく、見ているブラウザ(Chrome・Firefoxなど)によっても、少し見え方が変わります。変更したときは、お手持ちの端末の、さまざまなブラウザで表示を確認してみてね。では、また♪

好きな生き方を選べるように

2年前まで、社畜サラリーマンだった僕が、ネットで稼ぐようになり、今の気ままな生活になった経緯や、その方法をまとめました。「これからネットで、まず月収10万を稼ぎたい!」という方に向けて、現実的で、わかりやすい方法を解説します。

ブロガー向き テーマ「STORK(ストーク)」

当ブログも使っている、オススメのWordPressテーマが「STORK」です。

コメントを残す

ABOUTこの記事をかいた人

社畜エンジニアから、2014年に、フリーライターへ転身。 たくさんの人を見てきて、「お金のための仕事」が、嫌になりました。 「好きな生き方を、選べるように」、ネットで稼ぐ方法をお届けします。 *WEBデザイン・アート・創作モノ・焼きそば が好き