【コピペ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など)によっても、少し見え方が変わります。変更したときは、お手持ちの端末の、さまざまなブラウザで表示を確認してみてね。では、また♪

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

かつて社畜だった僕のように
いつか、会社を辞めて、自由に生きるために
まず、月10万をネットで稼ぐ「現実的な方法」を紹介します

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

当ブログも使っている
WordPressテーマ「STORK」です。

12 件のコメント

  • 詳しい解説ありがとうございます!
    記事を参考にさせていただきながら、色々とカスタマイズしております^^

    フォントについて、1点ご質問させていただきます。

    ヘッダータイトルや、記事下の「RECOMMEND」や「ABOUT」に使われている丸いフォントを、ゴシックに変更したいと考えております。
    もし方法をご存知でしたらご教示いただけないでしょうか。

    お手数おかけいたしますが、よろしくお願いいたしますm(__)m

    • 三浦さん、コメントありがとうございます!
      参考にして下さり、嬉しいです(*’▽’)

      「ヘッダータイトル」などに使われているフォントの変更について、
      別の方からもご要望頂きましたので、早めに記事にしたいと思っております
      コピペで使えるようにする予定ですので、今しばらくお待ちいただけますでしょうか(*’▽’)

      今週中か来週には、お届けできると思います♪

  • ご返答ありがとうございます。

    「リクエスト集」の記事ですよね?
    これから拝読し、カスタマイズさせていただきます。

    勇気を出して質問してよかったです^^

    誠実かつ迅速なご対応、本当にありがとうございます!

      • 狐火兎さま

        お世話になります。三浦です。
        おかげさまで、自分好みのカスタマイズが進んでおります。
        ありがとうございます!

        不躾なお願いですが、もしご存知でしたら以下部分の変更についてもご教示いただけないでしょうか。
        デフォルトの太いポップなフォント部分を、全てメイリオにしたいと考えております。

        ・ヘッダーのサイト内検索ボタン
        ・グローバルナビ
        ・公開日、更新日
        ・ハンバーガー「menu」「close」

        お手数おかけいたしますが、何卒よろしくお願いいたしますm(__)m

        • 三浦さん、またコメント下さり、ありがとうございますね!
          喜んで頂けて、何よりです(*’▽’)

          「デフォルトの太いポップなフォント部分を、全て」とのご要望、了解です♪
          少しお時間頂きますが、また記事を更新する形で、お応えさせて頂きますね!
          (きっと他にも知りたい方がいらっしゃると、思うので)

          更新したら、ご連絡いたしますので、しばしお待ちくださいませ(>ω<*)

          • お忙しいところ、ご丁寧にお返事ありがとうございます!
            また、お応えいただけるとのこと、本当に感謝いたします。

            楽しみにしておりますので、何卒よろしくお願いいたしますm(__)m

  • 狐火兎さま
    先日こちらのブログを発見し、カスタマイズに精を出しております。

    今回はGooglefontのことでご質問させていただきます。
    こちらのブログと同じ「Noto Sans JP」を導入したのですが、どうもトップページの記事一覧の文字の太さが同じようになりません。(狐火兎さまのブログの方が細くて見やすい、投稿日も少し大きく表示されている)
    もしよければ、こちらのカスタマイズも教えていただけないでしょうか。

    また、他にも投稿コメントの大きさの変え方や、いつもご使用になっているCSSコード記載時の枠(黒い背景)についても教えていただけないでしょうか。

    質問ばかりで申し訳ないですが、よろしくお願い致します。

    • のぼるさん、コメントありがとうございます♪
      当ブログは、文字サイズなども変えているので、まったく同じにはならないと思います(*_*;
      完全にご期待に沿えるられるかわかりませんが、簡単なやり方を、「リクエスト」記事に追加する形で、ご紹介させて頂きますね。

      「投稿コメントの大きさ」とは、コメント欄でしょうか?文字の事でしょうか?

      また、「CSSコード記載時の枠(黒い背景)」については、こちらにやり方がありますので、是非参考にして下さいね(*’▽’)
      「STORK」なら、こんな記事が作れる!便利なテクニック集
      https://tajuso.com/stork_post_technique

      • 返信ありがとうございます。
        ぜひ、記事一覧についてのカスタマイズ詳細を教えて頂ければ幸いです。
        コメントにつきましては、コメント欄とコメントの大きさどちらもいじってみたいです。
        こちらもリクエスト致します。

        コード表示の黒枠については記事を参照して、うまくできました。

        ありがとうございました。

        • コメント欄と、コメント文字の大きさですね!了解いたしました(*’▽’)
          リクエスト頂きありがとうございます♪
          今月中には投稿するつもりなので、少しお待ちくださいね。
          (本業優先のため、お時間かかって申し訳ないです)

          コード表示、できたとのことで良かったです~!

  • コメントを残す

    ABOUTこの記事をかいた人

    社畜エンジニアから、2014年に独立、フリーランスに。 「お金のための仕事」が、嫌になりました。 「好きな生き方を選べるように」、ネットで稼ぐ方法をお届けします。 *デザイン・機械・創作物・食べること が好き