Emporio、テンプレートデザイナーでできないフォント調整とその対処

Bloggerではテンプレートデザイナーというテーマの設定ツールが提供されている。

カンボジアブログ「GET A LIFE in Khmer!」（テーマはEmporio）ではこのツールで、

• 画像下のキャプションのフォント
• 投稿記事本文のフォント

のカスタマイズを試みた。

しかしこのテンプレートデザイナー、設定ができそうなのにできないとか、いろいろとクセの強いツールなのである。。

今回はこのテンプレートデザイナーでなぜかできないことを、脱力まじりにお送りする。

テンプレートデザイナーはこんなやつ

「テーマ」画面でオレンジ色の「カスタマイズ」ボタンを押すとテンプレートデザイナーに行ける。

テーマデザイナーでは背景の色やらフォントやら、いろんなサイト上の項目を設定できる。

テーマをデザインするツールなのでテーマデザイナーでいいと思うのだが、Bloggerのテーマは昔テンプレートと呼んだので、テンプレートデザイナーと呼ばれている。

用語統一しろと誰かツッコんで（￣▽￣

画像のキャプションを変更。。おーっとできない！

カンボジアブログで使っているEmporioはデフォルトのままだと画像の下のキャプションのフォントがでかい。

何しろ本文のフォントよりデカいのでいかにも不格好に見える。

一斉にフォントを変える、そんなときこそテンプレートの威力発揮のときなのだが。。

フォント修正がまだら（￣∇￣

というわけでテンプレートデザイナーで10pxに修正してみた。テンプレートデザイナーはこんな画面↓

画像のキャプションのフォントは、↑の画面の「上級者向け＞Pictures」で設定できる。

しかしやってみると、設定が効いている画像とそうでない画像がある。。(^_^;)
別ブログからインポートした記事が多いので、そのせいもあるかもしれない。

インポートでなくここで新規に作った記事だけなら効く可能性はあるが、そうでない以上どうしようもなく、結局はCSSをいじるしかなかった。

画像キャプションのフォントは結局CSSで

というわけで面倒ながらCSSをいじることに。

手順としてはまず「テーマ」画面で灰色の「HTMLの編集」ボタンでHTMLを出して、

で、キャプションのCSSをいじる。以下のクラスがそう。


.tr-caption {
  color: $(picture.caption.text.color);
  font: $(picture.caption.font);
  font-size: 12.8px;
  font-style: italic;
}


太字のところが修正点で、元は「1.1em」となっていた。1.1なので本文よりでかい字になってたのね。

なおこれはテンプレートデザイナーの「上級者向け＞CSS」で追加してもいいかも。
動くかどうか試してみてください。

また上のクラスをどうやって探したかなど、詳細は以下にまとめたので興味があれば読んでみてね。

>> 超初心者・俺氏のための、BloggerでCSSを修正する手順

投稿本文のフォントの選択肢がない

テンプレートデザイナーで起こる問題には、

「設定できる項目はあっても必要な選択肢がなくてカスタマイズできない」

というパターンもある。

かすれたEmporioのフォント

Emporioの記事本文に適用される日本語フォントは、PCで見ると何かかすれてるというか、特に高齢のひとに読みづらいものになってるように思う。

今書いているエディト画面のテキストのほうがよっぽど読みやすい。
スマホのほうは普通のフォントになるんだけど。

旧来のテーマと同じフォントにしといてくれればいいのにめんどくさい、まあ直すか、、

と思ってテンプレートデザイナーの設定をあさってみたが、「上級者向け＞投稿」で設定できるフォントのリストの中に日本語フォントがそもそも無い！

のであった orz

CSSを追加

というわけでこれはCSSをいじるしかない。

自分はテンプレートデザイナーの「上級者向け＞CSS」で以下を追加した。


* { font-family: meiryo,メイリオ,"ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif !important; }


これでフォントがメイリオになり、元のフォントより見やすくなるはず。

CSSを使いこなせ

というわけで、テンプレートデザイナーがいまいち使えないので、細かな調整には結局CSSの知識が必要となる。

とりあえずpxとかemとか、今回いじったフォントサイズについては以下が参考になる。

>> あなたはどれにする？CSSの文字サイズ指定「px、em、%」 | デザインメモ

その他、基本的なことはこういうの↓で一度体系的に勉強してもいいかもしれない。

スラスラわかるHTML＆CSSのきほん サンプル実習 [ 狩野祐東 ] 価格：2052円（税込、送料無料) (2017/5/27時点)

またフォントについては本文以外もいろいろと調整したので、別途まとめた。

>> Emporioサイトでフォント調整のため設定した、実際のCSS定義を公開する

自分がEmporioで新しくブログを作るとき、フォント関係はこのワンセットなので参考にしてみてください。


その他、Emporioカスタマイズ情報はこちら
新規Bloggerブログで最低限カスタマイズする5項目～TLD、目次、Twitterカード、関連記事、アフィリ～
技術に疎くてもできる、Emporioを無理くりローテクでカスタマイズする方法
超初心者・俺氏のための、BloggerでCSSを修正する手順