BloggerにMedium UIテンプレートを適用する際の注意点

Bloggerで運用しているブログにMedium UIテンプレートを適用したときに試行錯誤したことを備忘録としてまとめておきます。

画面全体表示

このテンプレートは、ディスプレイモニターの大きさに関わらず、画面いっぱいに表示することが特徴です。しかし、テンプレート適用後、なぜか左側に偏って表示されてしまいました。これを修正するには、「レイアウト」→ [CSS Options] → [boxedVesion]を編集し、trueからfalseに変えます。

広告枠にAdsense

BloggerでGoogle Adsenseを運用している場合は、広告枠をAdsenseに入れ替えましょう。

「レイアウト」→ [Advertisement] を編集します。

削除します。

「ガジェットを追加」をクリックし、Adsenseを追加します。サイズは「レスポンシブ」でかまいません。

他の[Advertisement]も同様に編集します。

[Adsense]を追加します。

不要なガジェットの削除

以下のガジェットは、テンプレート（テーマ）の変更時に自動的に挿入されます。これらは、「レイアウト」で削除することができます。

ロゴ画像の追加

予め240×40ピクセルの大きさのロゴ画像を用意しておきます。Bloggerの管理画面の「レイアウト」→ [Header Logo] を編集し、「パソコンから画像アップロード」します。

画像なしでタイトルを表示させたい場合は、「画像のURL」を削除します。

タイトルが長い場合、すべての文字が表示しきれないことがあります。その場合、「テーマ」を編集し、header-logo で検索して、.header-logo h1 の font-size を小さくしてみましょう。

メニューの修正

「レイアウト」のメニューリストを修正します。アイコンのタグについては、Remix Icon - Open source icon libraryを参考に修正します。

titleタグの修正

元のままだと、ページのタイトルしかtitleタグに表示しません。

<title><data:view.title.escaped/></title>

ページのタイトルとブログのタイトルを両方表示するには、上記の1行が書かれているところをブラウザで検索して、下記のように書き換えます。

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

コードをよく確認して「保存ボタン」をクリックします。

ブログ記事部分の書式の修正

記事の左右の余白が狭い場合、「テーマ」を編集し、post-body で検索して、item-post .post-body の padding の左右の数値を5~10px程度に増やします。

日本語の場合、line-height も1.6~1.8em程度に広げたほうが読みやすくなります。

箇条書きの書式の修正

通常の箇条書きでは、箇条書きマーカーの次の行に自動的にぶら下がりインデントがかかります。ところが、Medium UIで箇条書きを設定すると、ぶら下がりインデントがかかりません。そこで、記事の領域については、ぶら下がりインデントがかかるように修正します。

post-body ul li:beforeで検索し、その部分を削除するか、コメント行にし、代わりに以下のタグを追加します。

 .post-body ul li{list-style:disc}
 .post-body ul ul li{list-style:circle}
 .post-body ul ul ul li{list-style:square}

次にその上にある、.widget .post-body ul,.widget .post-body olのところに、以下のタグを追加します。

 padding-left:2em

post-body olで検索し、post-body olに関わる以下のタグを削除するか、コメント行にします。

日本語フォントの設定

海外テンプレートでは、日本語フォントの設定がありません。日本語フォントの設定を加えておきます。body の font-family の 'Barlow' と sans-serif の間に、'Yu Gothic' などの日本語フォント名をカンマ区切りで追加します。

font-family: ’Barlow', 'Yu Gothic', sans-serif;

見出しのフォントを変えたい場合は、.post-title に font-family を追加します。 

font-family:'Barlow', 'Meiryo', sans-serif;

同様に、.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6 にも font-family を追加します。

font-family:'Barlow', 'Yu Gothic', sans-serif;

文字色の設定

デフォルトでは、マウスオーバーしたリンクや訪問済みリンクの色が変わりません。色を変えたい場合は、以下の設定を加えます。

<Group description="Theme Body" selector="body">の内側

<Variable name="link.hover.color" description="Link Hover Color" type="color" default="#カラーコード"  value="#カラーコード"/>

<Variable name="link.visited.color" description="Link Visited Color" type="color" default="#カラーコード"  value="#カラーコード"/>

.post-body aの設定の後ろ

.post-body a:hover{text-decoration:underline; color:$(link.hover.color)}

.post-body a:visited{color:$(link.visited.color)}