Blogger用Schemaテンプレートのカスタマイズ

外部テンプレート提供サイトで入手したBlogger用テンプレート"Schema"のカスタマイズについての備忘録です。ここでは、このリンクのテンプレートの事例を紹介します。

このリンクのテンプレートを適用した後で、以下の項目を修正していきます。

基本編

ロゴ削除

Blogger管理画面の「レイアウト」→「ヘッダーの設定」で「画像を削除」。

Mobile Logo

「イメージを表示」の✔をオフ。

Main Posts

投稿者名(Posted by:)、投稿日をカスタマイズ。

広告表示をカスタマイズ。インライン広告は記事の間に割り込んで目障りなので、できるだけ間隔をあけるのがおすすめ。

Sidebar Right(A)

Adsenseを最上段にドラッグしてから設定変更。広告の色は「テンプレートを組み合わせる」と、広告のテキストが自動的にデザインになじむ色になります。

Menu Footer

Menu Footer Widgetを削除して、Sidebar Right(A)のAttributionをフッターに移動。

Main Menu

コンテンツがある程度できて、メニューが組めるようになるまでは後回し。

Adsense設定

ある程度コンテンツができたら、広告のレイアウト指定します。

Header Ads 728x90からHTML/Java Scriptを削除して、他のAdsenseをこのエリアに移動。

Adsenseがダブって表示されたら、いったん「テーマ」に移って、バックアップしてから、「レイアウト」に戻り、Adsenseのダブりを削除。

外部のテンプレートを適用すると、しばしばこのような余計な項目が追加されることがあります。

応用編

外部テンプレートでは、背景画像やテキストの色の指定がBloggerの管理画面でできないようになっている場合があります。下記のようなBlogger専用項目を設定することで、管理画面からの設定が可能になります。

Blogger専用項目	タグ	備考
Variable name="body.background"	URL以降を他のブログからコピペ	背景画像を入れるとき設定
Variable name="link.hover.color"	なければ他のブログからコピペ	マウスオーバー時のリンクの色指定
Variable name="link.visited.color"	なければ他のブログからコピペ	訪問済みリンクの色指定

その他にもこのブログでは、Style Sheetを以下のようにカスタマイズしています。

ID/class	タグ	備考
blockquote	color:#888;削除	元々の色が薄くて読めない
#footer-wrapper .footer .widget:first-child	color:#fff	元々の色が暗くて読めない
.header-header	background-color:transparent	背景に画像を入れる時の設定
#outer-wrapper	background-color: rgba(255,255,255,0.8)	背景に画像を入れる時の設定
.post-content	font-size:1.2em	新しいClassを挿入
.post-content ul li	text-indent: -0.5em	liタグの字下げ
.post-body a:hover	color:$(link.hover.color)	マウスオーバー時のリンクの色設定
.post-body a:visited	color:$(link.visited.color)	訪問済みリンクの色設定
sup	Reset CSSから削除	リセットされると上付き文字にならない
.widget .post-body ol	padding削除	olタグの番号が表示されない問題の解決