• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

高度なカスタマイズ

好きな箇所に好きなWebフォントでテキストを表示しよう

DigiPressは、テーマファイルを直接編集することなくHTMLのヘッダ(head)に独自のmetaタグやlinkタグなどheadタグ内に記述したい定義をいつでも追加することができます。

このHTMLヘッダー設定オリジナルスタイルシート設定を利用して、好きなWebフォントを読み込んでサイトの任意の箇所に反映させることができます。

ここでは、無料で大量のWebフォントを拝借できる Googleフォント から任意のWebフォントを選んでテーマに反映させる方法をご紹介します。

Googleフォントからフォントを選ぶ

Googleフォントにアクセスして利用したいフォントを選びます。
好みのフォントから、Webページに反映したいものだけを選び、右上のをクリックして追加します。
googlefonts

ページ表示速度に影響するため、読み込むWebフォントは1つだけに絞り込むことを推奨します。

フォントを絞り込む場合

Googleフォントで提供されているフォントの種類は膨大にあるため、右側のメニューから好みに合わせてフォントのタイプや言語を絞り込んで効率的に必要なフォントのみを表示して選ぶことも出来ます。
font-category

書体の厚さ(Thickness)や斜体具合(Slant)、対象フォントに含まれるスタイルの数(Number of styles)、幅を指定してさらに絞り込むこともできます。
capture-2016-12-07-9-32-49

Webフォント用のリンクタグを取得

ページ下部にフォントファミリーが選択されていることを示すバーがあります。これをクリックして開きます。
clickopen

読み込むフォントのスタイルを選ぶ

CUSTOMIZE」タブを開き、対象フォントがサポートするフォントのスタイルから必要なものだけをチェックします。
customize
Load Time“ は「Fast」→「Moderate」→「Slow」の順にフォントサイズが重くなるため、チェックするものは必ず必要なスタイルのみに限定しましょう。

Webフォントのリンクタグをコピー

EMBED」タブを開き、”Embed Font“に表示されているリンクタグをコピーします。
embed
Specify in CSS“に表示されているフォントファミリー名が、後に「オリジナルスタイルシート設定」に追記するfont-familyの値となるため、これも控えておきましょう。

HTMLヘッダーにリンクタグを設置

Step2でコピーしたリンクタグをDigiPressテーマのHTMLヘッダーに出力させます。
[詳細設定] → [HTMLヘッダー設定] の “<head>~</head>内のユーザー定義” にリンクタグをペーストして「保存」します。
capture-2016-12-07-10-39-09

オリジナルスタイルシートにてWebフォントを指定する

DigiPressの[ビジュアル設定]→[オリジナルスタイルシート設定]に移り、Webフォントを反映させたい箇所についてのCSS定義を追加します。
capture-2016-12-07-10-43-15

反映箇所を指定する場合の設定例を以下に示します。

サイト全体に反映させる場合

記事だけに反映させる場合

その他、Webフォントを反映させる任意の箇所を調べる

その他、フォントを反映させる対象要素を確認するには、以下をご参照ください。

Return Top