Sohoカスタマイズ[2]: 日本語をGoogleフォントに変更する
前の記事に書いた理由のため、テーマデザイナーからフォントの変更を行ったり、CSS追加は行わない。すべて[HTMLを修正]から行う。
<head></head>タグ内に、使いたいGoogleフォントのコードを貼り付ける。
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<link href='https://fonts.googleapis.com/css?family=Shippori+Mincho+B1:wght@400;500' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400' rel='stylesheet'/>
<title><data:view.title.escaped/></title>
<b:include data='blog' name='all-head-content'/>一例として、以下に投稿のタイトルと本文のフォントの変更方法を記載する。
<Group description="Posts">を探し出し、変数の名前がpost.title.font.small、post.title.font.large、post.text.font.small、post.text.font.largeを以下のように修正する。
.smallが付くものはスマホ用で、.largeが付くものはPC用の値となっている。
英数字も日本語フォントにしたい場合は先頭に日本語フォントを追加し、日本語だけ日本語フォントにしたい場合は、英語フォントの後ろに日本語フォントを追加する。
またこの段階で、フォントの太さを400（通常）から500（太め）や300（細目）に変更したり、フォントサイズを変更したりしている。
<Group description="Posts"> <Variable name="post.text.background.color" description="Background color (text-only post)" type="color" default="#302c24" value="#f4d6d3"/> <Variable name="post.title.font.small" description="Title font (small)" type="font" default="$(garamond20)" value="normal 500 20px Noto Serif JP, EB Garamond, serif"/> <Variable name="post.title.font.large" description="Title font (large)" type="font" default="$(garamond24)" value="normal 500 26px Noto Serif JP, EB Garamond, serif"/> <Variable name="post.title.color" description="Title color" type="color" default="#000" value="#2c1d14"/> <Variable name="post.text.title.color" description="Title color (text-only post)" type="color" default="#fff" value="#000000"/> <Variable name="post.header.font" description="Header font" type="font" default="$(montserrat12)" value="normal 400 12px Montserrat, sans-serif"/> <Variable name="post.header.color" description="Header color" type="color" default="rgba(0, 0, 0, 0.54)" value="rgba(0, 0, 0, 0.54)"/> <Variable name="post.text.header.color" description="Header color (text-only post)" type="color" default="rgba(255, 255, 255, 0.54)" value="rgba(0, 0, 0, 0.54)"/> <Variable name="post.footer.font" description="Post Footer Font" type="font" default="$(montserrat12)" value="normal 400 12px Montserrat, sans-serif"/> <Variable name="post.footer.color" description="Footer color" type="color" default="#bf8b38" value="#a93e33"/> <Variable name="post.text.font.small" description="Text font (small)" type="font" default="$(lora14)" value="normal 400 14px Lora, Noto Serif JP, serif"/> <Variable name="post.text.font.large" description="Text font (large)" type="font" default="$(lora16)" value="normal 300 16px Lora, Noto Serif JP, serif"/> <Variable name="post.text.color" description="Text color" type="color" default="#000" value="#000000"/> <Variable name="post.text.footer.color" description="Footer color (text-only post)" type="color" default="#bf8b38" value="#a93e33"/> <Variable name="post.blockquote.font.small" description="Blockquote font (small)" type="font" default="$(montserrat16)" value="normal 400 16px Montserrat, sans-serif"/> <Variable name="post.blockquote.font.large" description="Blockquote font (large)" type="font" default="$(montserrat24)" value="normal 400 24px Montserrat, sans-serif"/> <Variable name="post.blockquote.color" description="Blockquote color" type="color" default="#000" value="#000000"/> <Variable name="post.caption.font" description="Caption font" type="font" default="$(montserrat12)" value="normal 400 12px Montserrat, sans-serif"/> <Variable name="post.caption.color" description="Caption color" type="color" default="#000" value="#000000"/> </Group>
