GoogleBloggerを使って、自由にホームページが構築できるようになってきました。
仕事でも、すでに3社ほど導入実績を作ってしまいました。
一応規約でも調べたんですが、こういう使い方をしちゃダメという内容は無かったので、全然違反もしていないワケですよ。
Blogger コンテンツ ポリシー
確かにブログとしても、ホームページとしても、禁止事項は必要なので、これに準拠することで、法律も遵守しているという認識でもいいかもしれません。
そんな便利なブロガーでいつものようにカスタマイズしていた時に、cssの@importで読み込むはずのfontがダウンロードされていないことに気がついてしまいました。
ブロガーのcss基本セット
GoogleBloggerを便利に使いたい人は、過去に書いた以下のブログを参照してください。
カンタンBlogger学習
今回のポイントは、Bloggerでサイト全体にcssを埋め込むためのテーマ設定の箇所で、基本的に書き込む必要がある
b:skinタグです。
この中に普通にcssを書き込むと、サイト全体のcssとしてセットされます。
記入例
<b:skin><![CDATA[
body{
background-color:skyblue;
}
]]></b:skin>
Google fontが読み込まれない？！
その中で、いつも便利な
GoogleFontを使っているんですが、
CSSだけでフォントセットの読み込みができてしまう、@import方式で記述すると、GoogleBloggerではエラーになってしまう事象を確認しました。
GoogleFont設定画面
実際にセットしたコード
<b:skin><![CDATA[
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
.roboto-condensed {
font-family: "Roboto Condensed", serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}
]]></b:skin>
エラーも何も出ないので、最初は気が付きにくいんですが、これだとフォントが読み込まれないようです。
※PlaneなHTML+CSSや、他のフレームワークでは読み込めています。
別の方法で対応
下記のように、styleタグで読み込むことで、無事に外部フォントが読み込めるようになりました。
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
</style>
<b:skin><![CDATA[
.roboto-condensed {
font-family: "Roboto Condensed", serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}
]]></b:skin>
あとがき
GoogleFontのページをよく見てみたら、ちゃんとstyleタグで別に書いてありますね。
でも、理論的にできないわけではないハズなのに、GoogleBloggerでできないということは、b:skinでは、@importが使えないという事なのかもしれない。
他の読み込みでは試してないので明確なことは言えませんが、この挙動を知っていないと、作業にハマること間違いなしです。
0 件のコメント:
コメントを投稿