ブログのフォントをメイリオに変更(livedoorブログ編)
今自分がやってるブログって、どれもずっとフォントがいまいち「コレじゃない感」があったんです。
デフォルトからサイズは変えてるけど基本フォント自体はそのままで、何にしていいかも分からずに今までやってきた。
ところが先日ふと、イマドキのフォントは メイリオ というものがシャレオツだというのを見かけたので、変更してみることにしました。
この記事をアップする頃には既に完了しているんだけどね。
いつもの備忘録ってことで、やり方を書いておきます。
私はここのBlogger以外にlivedoorブログもやってるので、その2つのやり方を。
まずは先にlivedoorブログの方から。
① ブログ管理画面にて、[ ブログ設定 ] → デザイン/ブログパーツ設定の [ PC ] → [ カスタマイズ ] タブ、と進む。
② そうすると、[ CSS ] というタブが開いている画面になる。
この [ CSS ] の中身が、変更する対象。実際には下図の青線枠内のテキストを編集していくことになる。
※なお、ここではデザインテンプレートに『 デフォルト2012 』を使用している例の画像を用いている。
③ 次に、②の青線枠内から編集する箇所を探す。
使っているデザインテンプレートによって箇所が異なることが想像されるけど、詳細は違えど以下のどちらか2パターンになる思う。
よって、ブラウザの検索機能を [ Ctrl + F ] のショートカットキーか、もしくはメニューから立ち上げて、上記の2つを検索してみる。
注意点としては、検索するときにコロン(:)を忘れないこと。
私はブラウザにChromeを使っているので、一応、その場合のイメージ画像も添付。
検索文字の入れ方はこんな感じ。
そして、『 デフォルト2012 』の場合だと以下のオレンジ部分が検索でヒットするはず。
これはつまり、赤線の1行が今回編集するべき箇所だということになる。
上図は”font:”の場合の例だが、”font-family:”も同様に検索でヒットした1行が編集箇所となる。
④ ③で検索した箇所を編集する。
【 ”font:”の場合 】
対象の1行には、フォントに関するいくつかの要素が指定されているが、今回変更したいのはフォントの種類のみである。
それに該当するのは行末のセミコロン(;)直前の記述部分。
ここに書かれるのがフォント種類だとルール上決まっているのだが、注意したいのがコンマ(,)で、これは複数のフォント種類を指定するときにつなぎとして使われる記号である。
つまり、これで接続されるものすべてが現在の指定フォント。
前のものほど優先度が高い。
先の画像例では、「 Helvetica,Verdana,sans-serif 」が該当し、最優先のフォントは「 Helvetica 」ということになる。
ここでようやく、メイリオの登場。
この複数フォントの指定の先頭に、メイリオを加えてやればOK。
まるっとコレ↓を追加しましょう。(※念のため英語版と日本語版の2つの記述を追加)
例ではこんな感じ。
~余談~ 面倒なら読み飛ばしても問題なし。
「 font: 」の後ろに「 14px/1.2 」という文字列があるが、これはフォントのサイズと行の高さを指定する記述部分である。
この場合、フォントサイズ14px、一行の高さはフォントサイズの1.2倍という意味。
【 ”font-family:”の場合 】
実はこっちの方が、”font:”よりも単純。
なぜなら「 font-family: 」の後ろに並んでいるのがフォントの種類だけだから。
言い換えると、さっきの”font:”はサイズだの行高だのって他の要素もあったけど、これはフォント種類の指定だけの内容で構成されているということ。
つまり編集箇所が明確!
「 font-family: 」の後すぐに、同じくコレ↓を追加しましょう。
例>
⑤ 最後に [ 保存する ] ボタンを押すのを忘れないように。
・・・あれっ。
意外とlivedoorブログの方を書くだけで時間かかっちゃったな。
一気にBloggerのも書くつもりだったんだけど、スイマセン、また明日にします。
デフォルトからサイズは変えてるけど基本フォント自体はそのままで、何にしていいかも分からずに今までやってきた。
ところが先日ふと、イマドキのフォントは メイリオ というものがシャレオツだというのを見かけたので、変更してみることにしました。
この記事をアップする頃には既に完了しているんだけどね。
いつもの備忘録ってことで、やり方を書いておきます。
私はここのBlogger以外にlivedoorブログもやってるので、その2つのやり方を。
まずは先にlivedoorブログの方から。
◆ livedoorブログのフォントをメイリオに変更する方法
① ブログ管理画面にて、[ ブログ設定 ] → デザイン/ブログパーツ設定の [ PC ] → [ カスタマイズ ] タブ、と進む。
② そうすると、[ CSS ] というタブが開いている画面になる。
この [ CSS ] の中身が、変更する対象。実際には下図の青線枠内のテキストを編集していくことになる。
※なお、ここではデザインテンプレートに『 デフォルト2012 』を使用している例の画像を用いている。
③ 次に、②の青線枠内から編集する箇所を探す。
使っているデザインテンプレートによって箇所が異なることが想像されるけど、詳細は違えど以下のどちらか2パターンになる思う。
- ”font:”の設定部分
- ”font-family:”の設定部分
よって、ブラウザの検索機能を [ Ctrl + F ] のショートカットキーか、もしくはメニューから立ち上げて、上記の2つを検索してみる。
注意点としては、検索するときにコロン(:)を忘れないこと。
私はブラウザにChromeを使っているので、一応、その場合のイメージ画像も添付。
検索文字の入れ方はこんな感じ。
そして、『 デフォルト2012 』の場合だと以下のオレンジ部分が検索でヒットするはず。
これはつまり、赤線の1行が今回編集するべき箇所だということになる。
上図は”font:”の場合の例だが、”font-family:”も同様に検索でヒットした1行が編集箇所となる。
④ ③で検索した箇所を編集する。
【 ”font:”の場合 】
対象の1行には、フォントに関するいくつかの要素が指定されているが、今回変更したいのはフォントの種類のみである。
それに該当するのは行末のセミコロン(;)直前の記述部分。
ここに書かれるのがフォント種類だとルール上決まっているのだが、注意したいのがコンマ(,)で、これは複数のフォント種類を指定するときにつなぎとして使われる記号である。
つまり、これで接続されるものすべてが現在の指定フォント。
前のものほど優先度が高い。
先の画像例では、「 Helvetica,Verdana,sans-serif 」が該当し、最優先のフォントは「 Helvetica 」ということになる。
ここでようやく、メイリオの登場。
この複数フォントの指定の先頭に、メイリオを加えてやればOK。
まるっとコレ↓を追加しましょう。(※念のため英語版と日本語版の2つの記述を追加)
meiryo,メイリオ,
例ではこんな感じ。
~余談~ 面倒なら読み飛ばしても問題なし。
「 font: 」の後ろに「 14px/1.2 」という文字列があるが、これはフォントのサイズと行の高さを指定する記述部分である。
この場合、フォントサイズ14px、一行の高さはフォントサイズの1.2倍という意味。
【 ”font-family:”の場合 】
実はこっちの方が、”font:”よりも単純。
なぜなら「 font-family: 」の後ろに並んでいるのがフォントの種類だけだから。
言い換えると、さっきの”font:”はサイズだの行高だのって他の要素もあったけど、これはフォント種類の指定だけの内容で構成されているということ。
つまり編集箇所が明確!
「 font-family: 」の後すぐに、同じくコレ↓を追加しましょう。
meiryo,メイリオ,
例>
font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","MS Pゴシック",sans-serif;
↓
font-family: meiryo,メイリオ,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","MS Pゴシック",sans-serif;
font-family: meiryo,メイリオ,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","MS Pゴシック",sans-serif;
⑤ 最後に [ 保存する ] ボタンを押すのを忘れないように。
・・・あれっ。
意外とlivedoorブログの方を書くだけで時間かかっちゃったな。
一気にBloggerのも書くつもりだったんだけど、スイマセン、また明日にします。
コメント
コメントを投稿