google web fontの使用のご質問

scott · 2024 年 11 月 27 日午前 5:39

【環境情報】
・baserCMSのバージョン： 5.0.19
・レンタルサーバー名：sakura
・使用テーマ：サンプルテーマ( BcThemeSample )
・PHPスキル（自己評価）：全くわからない(HTMLぐらい)

いつもお世話になっております。
久々の質問になります
現在、会社のホームページを作成中ですが、そろそろ仕上げの段階になりまして、中間報告時に上司から文字が固く見えるから変えて欲しいと言われました。
それでgoogle web fontを見つけまして、チャレンジしているところですが…反映されない状況です。
分かっている方がいらっしゃれば教えて頂きたいです。

まず、フォントを選んで@importをコピーし、/vendor/baserproject/bc-front/webroot/css/style.cssのbodyの上に貼り付けました。
あと、bodyの中にCSS calssesのcodeをコピーし貼り付けましたが、反映されず以前と同じフォントで表示されています。
ネットで色々調べてやってみましたが…無理でした。
google web fontを使っている方がいらっしゃれば教えて頂けますでしょうか？
宜しくお願いします。

GUSSAN · 2024 年 11 月 27 日午前 6:55

まず、以前にも何度かお話ししましたが、ご指摘の/vendor/baserproject/bc-front/webroot/css/style.cssは、コアテーマ内のファイルですので、今後のアップデート等で、内容が上書きされることもあります。
よって、以下のドキュメントの「テーマを作る」項以降の記述に倣って、/plugins/BcThemeSample（デフォルトのテーマをそのまま使っているのであれば）内の該当するファイルを修正、変更をされることをお勧めします。

baserCMS Documentation/クイックスタート

具体的には、/plugins/BcThemeSample（デフォルトのテーマをそのまま使っているのであれば）/layout/default.phpの<head></head> 内に、以下のEmbed codeを記述し、
/plugins/BcThemeSample（デフォルトのテーマをそのまま使っているのであれば）/webroot/css/style.cssのbody要素に、CSS classに記載されているfont-familyのプロパティの内容を追記（変更）すれば反映されると思います。

こんな感じです。オリジナルのcssに特に手を入れていなければ、302行目辺りに記述されています。

body {
  text-align: center;
  font-family: Arial, Verdana, "M PLUS Rounded 1c", "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #000;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}

追記

ノールックで、style.cssのbody要素にと安易に申し上げましたが、よくよく、開発ツール等で適用されているcssを見てみると、body要素に定義されているfont-familyのプロパティは、ほとんどの要素に効いておらず、別のcssファイル（editor.css）等に記載されているclassで細かく定義されていました。

よって、開発ツール等で、変更したい要素ごとに適用されているclassを確認し、個別に変更、追記していく手順が必要になりそうです。

なお、editor.cssを変更する場合は、/vendor/baserproject/bc-front/webroot/css/editor.cssを/plugins/BcThemeSample（デフォルトのテーマをそのまま使っているのであれば）/webroot/css/editor.cssの位置にコピーし、それを変更することをお勧めします。

scott · 2024 年 11 月 28 日午前 3:18

ありがとうございます！！
いつもご丁寧な指摘ありがとうございます。
もちろんコアテーマ内のファイルはコピーして修正しました。

本当にありがとうございます！！