Joomla!, Microsoft Word, etc.

Joomla!

Cassiopeia Template カスタマイズ (Google Font)

Detail
Written by: fuku-chang
Category: Joomla!
Cassiopeia Template カスタマイズ (Google Font)

現在のJoomla!運用管理Child TemplateのCassiopeia_extendedへ移行するにあたり、当サイトのフォントをGoogle Font指定に変更しました。

概要

  • Child TemplateのCassiopeia_extendedで新たに導入されたFont SettingsでFont Schemeを指定するにあたり、Cassiopeia_extendedで用意されているFont Schemeは利用せず、独自に指定することとしました
  • 指定するフォントはGoogle Fontとし、当方サーバーへダウンロードせず、CDNで導入する方法を選択しました
  • 選択したフォントはNoto Sans JPとM PLUS 1pです

Google Font

  •  Google Fonts
  • わたくしの個人的な好みで2つのフォントを選択しました
    • テキスト全般で使用するフォント: Noto Sans JP
    • 見出しフォント: M PLUS 1p

Noto Sans JP

M PLUS 1p

  • 当サイトの見出しのフォントとして適用します
  • M PLUS 1p | Google Fonts
  • エンタメ系サイトに親和性のあるフォントとして評判のようです
  • 当サイトに合っているのかと言われれば、合っていないのかもしれません
    • 特に平仮名、片仮名が独特です
  •  日本語Webフォント( M PLUS 1p)がつぶれる＆ジャギる問題を解決する | イロコト
    • 確かにフォント表示を試行していた際、当サイトも「ジャギ」っていたような記憶があり、font-weight: 700とすることで胡麻化したりしていたのですが、試しにfont-weight: 400にしたところ、わたくし好みの細みのフォントで「ジャギ」る問題もなかったので、上記サイトで案内されている対処法は行っておりません
    • 次の記事でHomeページにArticles by Categoryを配置したところ、h5のfont-size(1.25rem 16px 1.25 20pxでジャギりましたので、上記サイトの対処にて改善(ごまかし?)しています

 参照

手順

  1. Google Fontsより当該フォントのページへアクセスします
  2. HTMLのEmbed CodeとCSSを入手(コピー)します
  3. Child TemplateのCassiopeia Templateのindex.phpへHTMLのEmbed Codeを貼り付けます
  4. Child TemplateのCassiopeia_Extendedのuser.cssへCSSを貼り付け・編集します

Google Fontからコードを取得

  1. Google Fontsへアクセスします
  2. Noto Sans Japaneseを検索して、フォントの詳細ページの左肩の[Get Font]をクリックします
  3. ページ右肩の[Fonts]をクリックします
  4. M PLUS 1pを検索し、同様に[Get Font]をクリックします
  5. [2 font families selected]のタイトルを確認し、左肩の[Get embed code]をクリックします
    Get embed codeをクリック
  6. 次の手順で表示されたコードを使用します
    Enbed Codeが表示
    1. head要素に挿入するGoogle FontsのCDN呼び出しのlink要素
    2. Noto Sans JapaneseのCSS
    3. M PLUS 1pのCSS

index.phpへHTMLコードを貼り付け

  • 当方サーバーでは、Child TemplateのCassiopeia_ExtendedからChild TemplateのCassiopeia_childのindex.phpをオーバーライドしています
  • Google Fontsの手順のHTMLコード[A]をhead要素内に貼り付けます
  1. 上記Google Fontsの手順のタブは表示したまま、Home Dashboardを操作します
  2. Home Dashboard > System > Template > Site Template > Cassiopeia_child Details and Filesをクリックします
    Cassiopeia_child Details and Filesをクリック
  3. Editor tab > /templates/cassiopeia_child/index.phpをクリックします
  4. Google FontsからHTMLコード[A]をコピーします
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&family=Noto+Sans+JP:このメールアドレスはスパムボットから保護されています。閲覧するにはJavaScriptを有効にする必要があります。&display=swap" rel="stylesheet">
    • このメールアドレスはスパムボットから保護されています。閲覧するにはJavaScriptを有効にする必要があります。 variable fontであるNoto Sans Japaneseでは指定可能なfont-weightの範囲を100-900と規定しています
    • display=swap 代替フォントから指定フォントへの読み込み時の挙動を規定するfont-displayに対し標準的なswapを規定しています
  5. コードエリアのhead要素内にコピーしたHTMLコード[A]をhead要素内に貼り付けます
    HTMLコード[A]をコピー
  6. [Save & Close]をクリックします

user.cssへCSSを貼り付け・編集

  • 当方サーバーでは、user.cssをChild TemplateのCassiopeia_Extendedに配置しています
  • Google Fontsの手順のCSSをuser.cssに貼り付け、編集します
  1. 上記Google Fontsの手順のタブは表示したまま、Home Dashboardを操作します
  2. Home Dashboard > System > Template > Site Template > Cassiopeia_Extended Details and Filesをクリックします
    Cassiopeia_Extended Details and Filesをクリック
  3. Editor tab > /media/templates/site/cassiopeia_extended/css/user.cssをクリックします
  4. Google FontsからCSS[B]をコピーします
    /* <weight>: Use a value from 100 to 900 */
/* <uniquifier>: Use a unique and descriptive class name */
  .noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
  5. コードエリアにコピーしたCSS[B]を貼り付けます
  6. Google FontsからCSS[C]をコピーします
    .m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}
  7. コードエリアにコピーしたCSS[C]を貼り付けます
  8. 貼り付けた[B][C]を当方サーバー用に編集します
    CSS[B][C]を貼り付け
    /* Google Font M PLUS 1p + Noto Sans JP */
/* body */
body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* heading */
h1, h2, h3, h4, h5, h6 {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}
    • Google FontsのCSSはclass指定ですが、当方サーバーでは要素指定としました
    • Noto Sans JapaneseはBody要素に指定します
      • 当該フォントはvariable fontですので複数のfont-weightを指定できますが、とりあえずfont-weight: 400と指定しています
    • M PLUS 1ｐはh1, h2, h3, h4, h5, h6要素に指定します
      • 見出し要素ではありますが、細見のフォントが好みのため、あえてfont-weight: 400と指定しています