「Blogger」テンプレート【Simply Simple】をカスタマイズ中
 |
「Blogger」のブログのテンプレートについて、別の記事でテンプレートのカスタマイズを検討し、早速取り掛かりました。
カスタマイズ作業が、半分くらい進んだので、投稿記事にして、変更内容を記録していきます。
なお、テンプレート変更ができる設定は残して、カスタマイズする。
ヘッダーを固定した
テンプレートのHTMLで、「.header-inner .Header .titlewrapper」を検索（Ctrl + F）すると、ヘッダーの「CSS」が表示されるので、内容を下のように変えることで、ヘッダーを固定することができた。
- 変更前のCSS
.header-inner .Header .titlewrapper {
padding: 22px 0;
}
- 変更後のCSS
.header-inner .Header .titlewrapper {
padding-top: 12px;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 0px;
width: 100%;
z-index: 100;
position: fixed;
top: 0;
left: 0;
margin-top: 0px;
background-color: #ffffff;
border-bottom: solid 1px #aaa;
}
一応上手くいったものの、ヘッダーに画像を配置すると、良い感じにならないので、次の課題とする。テキストだけであれば、このままで行けるんだけどね。
やっぱり画像が良いかなぁ。
ヘッダー画像を設置
先ほども書いたように、現在はヘッダー画像を配置していないので、次回ヘッダーに画像を配置したいと考えている。
ラベルの表示を変更した
「Simply Simple」のテンプレートでは、ラベル名の先頭に「Labels :」と追加されるので、これを取り払いました。
- 変更前のタグ
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:top.showPostLabels and data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
上の「<data:postLabelsLabel/>」を削除することで、ラベル名だけが表示されるようになりました。
目次を追加した
別の記事で、目次の追加方法を紹介している方法で追加しました。
現状の目次を転用しました。
パンくずリストを追加した
こちらも目次と同様に、別の記事で投稿しているやり方で追加しました。
ちゃんと表示されています。
なお、表示の確認は、テスト用のブログで行っています。
不要なレイアウト枠を削除した
「Simply Simple」のテンプレートでは、レイアウト内に「Cross-Column」「Cross-Column 2」「footer-1」というレイアウト枠があり、それらを削除しました。
テンプレートでは、判断がしにくいので、少々苦労しましたが、何度かこれかな？というのを削除してみて、確認しながらレイアウト枠を削除しました。
しかしながら、ガジェットを追加したい場合には、全部削除すると、後々面倒になりそうなので、1つは「ガジェットの追加」が行えるレイアウト枠は残しても良いかもしれません。
テキストの行間を調整した
投稿記事だけ、行間を広げました。
変更前のCSS
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}
変更後のCSS
.post-body {
font-size: 110%;
line-height: 1.6;
position: relative;
}
フォントサイズを18pxほどに、テーマのページにある「カスタマイズ」ボタンをクリックして、左側メニューの詳細設定から「ページのテキスト」で変更しています。
リンクの表示を変更した
こちらは今後予定と言うことで、リンクにカーソルを重ねた際に、表示を変えようと思っています。
テスト用のブログでテンプレートを変更中ですが、一部は変更予定の内容を追記してみました。
他にも追加で変更する箇所があるかもしれませんので、順次投稿記事を更新していきたいと思います。
