WordPressのヘッダーデザイン WEBフォント 続編

 

LINEで送る
Pocket

design_001

どうも、Pan Graphicoです。
迷いに迷ったフォント、TypeSquareを利用した場合で、
「リュウミン R-KL」に決めました。

スポンサーリンク

WordPressのヘッダーデザイン WEBフォント 続編

結果的に、ヘッダーだけに限定していましたが、
他のゴシックとあまり相性が良くなかったので、現状すべてのfont-familyに指定してみました。

導入も簡単に行えたので、メモとして残しておきます。

TypeSquareのフォント指定方法

今回は無料プランにて新規会員登録します。

ユーザー情報を登録すると、確認メールが送信されてきますので、
指定のURLへジャンプすると、ユーザー登録が完了します。

登録後は、「プラン・オプション設定」から、契約内容やプラン専用のタグが設定できます。

プラン専用タグ

申し込んだプランを確認したら、プラン専用タグがページの最初で設定できます。

すぐにコピーして、指定の場所へ貼り付けたくなりますが、
URLオプションとして、以下を先に設定します。

  • 標準 (フェードインなし)
  • デフォルトフォントを非表示 (フォントがロードされ次第表示)
  • フェードインあり
  • フェードインまでの時間(0~99の整数)

標準だと、ロードまでにデフォルトのフォントが読み込まれて表示されてしまうので、
フォードインありをお勧めします。

契約内容とPV数レポート

過去1年間の月間平均PVと合計PVが表示されます。
無料プランは1万PVまでなので、こちらで状況を確認することができます。

フォント配信を停止してもプランの契約および課金は継続されます。
PVは配信を開始した時点から計測されます。

と、ありますので、プラン内容によっては注意が必要ですね。

利用書体一覧

いよいよ導入したいフォントを選択します。
選択が終えると、CSSが表示されるので、任意の箇所へ追加します。
無料プランは1書体のみですので、プランによっては変更する場合は、
既存の書体を削除して新規追加することができます。

利用サイトURL一覧

最後に利用するサイトのURLを登録して終了です。
こちらも、無料プランでは1ドメインなので、複数のサイトで使用する場合はプランの追加が必要となります。

最後に

ヘッダーにしても、記事部分やサイドバーなどまだまだ発展途上ですが、
日々日々進歩で構築していきたいと思います。

 

 - WEB, デザイン
 -


Copyright© キクミミミルメ , 2019 All Rights Reserved.