Bloggerテンプレートのちょっとしたカスタマイズのまとめ

投稿日 2012/12/19 更新日 2020/08/31

今回Bloggerテンプレートをちょっとカスタマイズする機会があって、何をどうカスタマイズしたか忘れそうなので備忘録としてエントリ。Bloggerテンプレート「シンプル」のHTMLを編集した。

※注意：以下のカスタマイズをする前に必ずテンプレートを別に保存しておくこと。いくつかは変更・削除したりすると元に戻せなくなるものもあるので。あくまで自己責任にてお願いする次第である。

2013年3月6日追記：
bloggerのフッタのちょっとしたカスタマイズ（非推奨）も記事にしたので参考までに。

参考サイト

以下のサイトを参考。非常に助かりました。深謝。

WILL FEEL TIPS: Blogger カスタマイズ Tipsまとめ
MBA-HACK: Blogger カスタマイズ Tips
Bloggerのヘッダー（header）をカスタマイズする方法 - AIUEO Lab

テンプレートに使用言語を指定

ダッシュボード＞テンプレート＞HTMLの編集で、<html>タグに「lang='ja'」を追加

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='ja' ↵
xmlns='http://www.w3.org/1999/xhtml' ↵
xmlns:b='http://www.google.com/2005/gml/b' ↵
xmlns:data='http://www.google.com/2005/gml/data' ↵
xmlns:expr='http://www.google.com/2005/gml/expr'>
（※実際は1行で表記）

テンプレートに`<meta>`を追加

テンプレートの<head>内には、使用するテキストエンコーディング、使用言語、CSS、javascriptを指定する<meta>が無い。ダッシュボード＞テンプレート＞HTMLの編集で、<head>内に以下を追加。

<meta content='text/html; charset=UTF-8' http-equiv='content-type'/>
<meta content='text/css' http-equiv='content-style-type'/>
<meta content='text/javascript' http-equiv='content-script-type'/>
<meta content='ja' http-equiv='content-language'/>

`<title>`のブログ名と記事名の記述形式を変更

通常「Blog名: 記事タイトル」なのを「記事タイトル | Blog名」に変更。

通常は「Blog名: 記事タイトル」の形式。

ダッシュボード＞テンプレート＞HTML の編集で「ウィジェットのテンプレートを展開」のチェックを外し、

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

の部分をまるまる

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

に差換えることで、各記事ページのタイトル表記は「記事タイトル | Blog名」と表示される。

変更後、「記事タイトル | Blog名」の形式に。

ただし今回は、ヘッダに画像を何枚か用意してリロードする度に画像が変わるようなギミックを採用したため、Blog名を書き込む箇所のあるheaderガジェットが邪魔で削除してしまったので（削除方法は後述）、

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

と直接HTML内に書き込んだ。

ページ最下部の「投稿:Atom」を削除

ダッシュボード＞テンプレート＞HTML の編集で「ウィジェットのテンプレートを展開」にチェックを入れ、以下の箇所を見つけ「」で囲みコメント化して表示させないようにする。

<!-- <data:feedLinksMsg/>
  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'>↵
     <data:f.name/> (<data:f.feedType/>)</a>
  </b:loop> -->

ページ最下部の「ホーム」を削除

上記『「投稿:Atom」を削除』に同じ要領で。
ダッシュボード＞テンプレート＞HTML の編集で「ウィジェットのテンプレートを展開」にチェックを入れ、以下の箇所を見つけ「」で囲みコメント化して表示させないようにする。

<!-- <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> -->

ページ最下部の「投稿:Atom」と「ホーム」の削除前。

削除後。

header部分を可動化（削除可能化）

デフォルトではheader部分は移動不可の仕様になっているが、これを移動可能にする。

デフォルトではheader部分は上記赤枠のようになっており移動ができない。

デフォルトでは削除もできない。

ダッシュボード＞テンプレート＞HTML の編集で「ウィジェットのテンプレートを展開」にチェックを入れ、以下の箇所を見つけ「true」を「false」に変更。

<b:widget id='Header1' locked='false' title='test (Header)' type='Header'>

「true」から「false」に変更で、header部分は上記赤枠のように移動可能な状態に。

削除ボタンが出現！

これでheader部分の移動・削除が可能に。

このブログを検索

つくりてのざれごと