Emporio、テーマデザイナーでできるオススメ設定

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

これがなかなか微妙なところがあるツールで、そのへんは以下にまとめた。

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

が、テーマデザイナーでできる有用な設定ももちろんたくさんある。

今回はテーマEmporioで、テーマデザイナーを使ってできるオススメの設定を紹介する。
すべて自分でもやっている設定である。

とりあえずテーマデザイナーの”使える”側面を知っていただければ幸いです(・∀・)

サイドバーの幅

Emporioでトップページのサイドに広告を出そうとして、幅が足りないということがあった。

これはテーマデザイナーの「上級者向け＞幅」で調整できる。

出したい広告のサイズに合わせ、デフォルトの280px→300pxに変更している。

ちなみにテーマのHTMLのここのとこ↓に反映されてます。


<Group description="Widths">
  <Variable name="sidebar.width" description="Sidebar width" type="length" min="100px" max="1000px" default="280px"  value="280px"/>
  <Variable name="posts.width.stream" description="Post width (stream)" type="length" min="100px" max="1000px" default="385px"  value="385px"/>
</Group>


テーマデザイナーで変更後は黒字にした280pxが300pxになっている。

なおEmporioではトップページと個別記事でサイドバーの設定が別なのか、個別記事ではこの幅変更が効いてこないように思う。

個別記事ではどう設定するのか？わかる人は教えて下さい m(_ _)m

タブの背景色

Emporioのレイアウト画面で「ページ」ガジェットを使うと、トップページ上部にタブを出すことができる。

ユーザにナビゲートしやすくする基本的な機能だろう。

しかしこのタブ、デフォルトでは背景色が白になっている。

ページ全体の背景色と違うので何かタブだけ浮いて見える。
幅がその下の「注目の記事」ガジェットと合ってないのも目立つ。

これはタブの背景色を変更することで回避できる。

テーマデザイナーの「上級者向け＞タブ」でタブの背景色が#ffffff（白）になっているので、これを#f7f7f7に変える。

ページの背景色が#f7f7f7なので同じにしてるのだが、それもテーマデザイナーで確認できるので探してみてください。

というわけで自分の英語学習のサイトではタブが背景に溶け込んで違和感なくなってます＾＾

ガンボジアブログのほうも直そうかなあ。。考え中。

サイドバーの区切り線

細かい話だが、Emporioはトップページのサイドに表示されたガジェットの間に区切り線が必ず付く。こんな感じ↓

これを消したい場合、テーマデザイナーの「上級者向け＞サイドバー」の「区切り線」設定でできる。

正確に言うと消すのではなく線を透明にするという設定ができ、「区切り線」設定で「透明」にチェックを入れればよい。

ただ結局区切り線を入れることにしたので必要なかったという（￣▽￣

CSSを追加する

テーマデザイナーの「上級者向け＞CSS追加」ではページ内の要素の見た目を定義するCSSを追加できる。

テーマのHTMLに直でCSSを書いても同じなのだが、テーマデザイナーからやれば直接HTMLをいじるより誤って他のところを壊さずに済むと思う。

自分のCSS定義も基本的にテーマデザイナーから追加している。

というわけで以上の設定はテーマデザイナーで確実にできるのを実際に確認できているので、そのへんのカスタマイズに興味あるひとは参考にしてみてください＾＾


その他、テーマデザイナー関連の情報はこちら

Emporio、テンプレートデザイナーでできないフォント調整とその対処
BloggerでCSSを追加してフォントを調整する基本戦略

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