DigiPressは、テーマファイルを直接編集することなくHTMLのヘッダ(head)に独自のmetaタグやlinkタグなどheadタグ内に記述したい定義をいつでも追加することができます。
このHTMLヘッダー設定とオリジナルスタイルシート設定を利用して、好きなWebフォントを読み込んでサイトの任意の箇所に反映させることができます。
ここでは、無料で大量のWebフォントを拝借できる Googleフォント から任意のWebフォントを選んでテーマに反映させる方法をご紹介します。
INDEX
Googleフォントからフォントを選ぶ
Googleフォントにアクセスして利用したいフォントを選びます。
好みのフォントから、Webページに反映したいものだけを選び、右上のをクリックして追加します。
注意
フォントを絞り込む場合
Googleフォントで提供されているフォントの種類は膨大にあるため、右側のメニューから好みに合わせてフォントのタイプや言語を絞り込んで効率的に必要なフォントのみを表示して選ぶことも出来ます。
書体の厚さ(Thickness)や斜体具合(Slant)、対象フォントに含まれるスタイルの数(Number of styles)、幅を指定してさらに絞り込むこともできます。
Webフォント用のリンクタグを取得
ページ下部にフォントファミリーが選択されていることを示すバーがあります。これをクリックして開きます。
読み込むフォントのスタイルを選ぶ
「CUSTOMIZE」タブを開き、対象フォントがサポートするフォントのスタイルから必要なものだけをチェックします。
“Load Time“ は「Fast」→「Moderate」→「Slow」の順にフォントサイズが重くなるため、チェックするものは必ず必要なスタイルのみに限定しましょう。
Webフォントのリンクタグをコピー
「EMBED」タブを開き、”Embed Font“に表示されているリンクタグをコピーします。
“Specify in CSS“に表示されているフォントファミリー名が、後に「オリジナルスタイルシート設定」に追記するfont-familyの値となるため、これも控えておきましょう。
HTMLヘッダーにリンクタグを設置
コピーしたリンクタグをDigiPressテーマのHTMLヘッダーに出力させます。
- テーマカスタマイザー対応のテーマ(fresco以降)の場合
-
[外観] → [カスタマイズ] よりカスタマイザーを開き、[headセクション／メタタグ設定] → [headセクション内の独自コード(PC)] および [headセクション内の独自コード(モバイル)] にリンクタグをペーストします。
- DigiPress専用テーマオプション画面(Luminous以前)の場合
-
[詳細設定] → [HTMLヘッダー設定] の “<head>～</head>内のユーザー定義” にリンクタグをペーストして「保存」します。
オリジナルスタイルシートにてWebフォントを指定する
- テーマカスタマイザー対応のテーマ(fresco以降)の場合
-
[外観] → [カスタマイズ] よりカスタマイザーを開き、[オリジナルCSS設定] にアクセスして、Webフォントを反映させたい箇所についてのCSSを追記します。
- DigiPress専用テーマオプション画面(Luminous以前)の場合
- DigiPressメニューの[ビジュアル設定]→[オリジナルスタイルシート設定]に移り、Webフォントを反映させたい箇所についてのCSSを追記します。
反映箇所を指定する場合の設定例を以下に示します。
サイト全体に反映させる場合
body {
font-family: [ここに控えたWebフォント名を入力], Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Meiryo,'メイリオ','ＭＳ Ｐゴシック',sans-serif;
}
記事だけに反映させる場合
.entry {
font-family: [ここに控えたWebフォント名を入力];
}
その他、Webフォントを反映させる任意の箇所を調べる
その他、フォントを反映させる対象要素を確認するには、以下をご参照ください。