Blogger カスタマイズ Tipsまとめ

2011/11/13　07:282019/02/07　21:16

Google Bloggerを始めてからカスタマイズした内容を、備忘録と情報共有を兼ねて紹介します。

SEO対策やブログを運営していく上で役立つTipsなど、これからBloggerを始める方や既に利用されている方にとって参考になれば幸いです。

Contents

- 0.1. 参考Link
1. Blogger テンプレート HTMLを編集
2. BloggerでのRSSフィードの活用とPINGの送信
- 2.1. 参考Link
3. BloggerでのJavascriptの活用
- 3.1. 導入方法
- 3.2. 利用方法

参考Link

クリボウの Blogger 入門

このサイトでは、初めて Blogger にふれる人向けに、Blogger の基本的な使い方や設定方法、ブログ運営などについて紹介しています。 …

Google BloggerブログHacks Tips Tweaks

Google Bloggerブログ、テンプレート、カスタマイズ、SEOなどグーグルブロガーユーザーのためのハック・ティップス・トゥウィークス（Blogger HTT）ブログ。 …

Blogger テンプレート HTMLを編集

1．テンプレートに使用言語を指定する

ダッシュボードからデザイン＞HTML の編集「html」タグに「lang=’ja’」を追加

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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' lang='ja'>

「head」タグ内に以下の「meta」タグを追加

<meta http-equiv='content-type' content='text/html; charset=UTF-8' />

<meta http-equiv='content-style-type' content='text/css' />

<meta http-equiv='content-script-type' content='text/javascript' />

<meta http-equiv='content-language' content='ja' />

2．ブログタイトルをクリックでトップページへLinkさせる
デザイン＞HTML の編集で「ウィジェットのテンプレートを展開」にチェック

<!--No header image -->

<div id='header-inner'>

  <div class='titlewrapper'>

    <h1 class='title'>

      <b:include name='title'/>

    </h1>

  </div>

  <b:include name='description'/>

</div>

この部分の<b:include name=’title’/>を「a」タグで囲んであげる

<!--No header image -->

<div id='header-inner'>

  <div class='titlewrapper'>

    <h1 class='title'>

      <a expr:href='data:blog.homepageUrl'><b:include name='title'/></a>

    </h1>

  </div>

  <b:include name='description'/>

</div>

CSSを追加し、マウスオーバーでフォントのカラーを変更させる

.Header h1 a:hover {

color: #9fc5e8; //Sample

}

3．Titleタグのブログ名と記事名の記述を変更する
通常「Blog名: 記事タイトル」となっているので「記事タイトル | Blog名」にする。

デザイン＞HTML の編集で「ウィジェットのテンプレートを展開」のチェックを外す

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

<title><data:blog.pageTitle/></title>

この部分を以下のように変更する

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<title><data:blog.title/></title>

<b:else/>

<title><data:blog.pageName/> | <data:blog.title/></title>

</b:if>

<b:if cond=’data:blog.pageType == "index"’>と指定することで、indexページ（ホーム）以外で「記事タイトル or Arcive | Blog名」として表示されるようになる。
4．記事内のタイトルにパーマリンク（Permalink）を付ける
デザイン＞HTML の編集で「ウィジェットのテンプレートを展開」にチェック

<h3 class='post-title entry-title'>

<b:if cond='data:post.link'>

  <a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

  <b:if cond='data:post.url'>

    <b:if cond='data:blog.url != data:post.url'>

      <a expr:href='data:post.url'><data:post.title/></a>

    <b:else/>

      <data:post.title/>

    </b:if>

  <b:else/>

    <data:post.title/>

  </b:if>

</b:if>

</h3>

この部分を以下のように変更する

<h2 class='post-title entry-title'>

<a expr:href='data:post.url'>

<b:if cond='data:post.link'>

  <a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

  <b:if cond='data:post.url'>

    <b:if cond='data:blog.url != data:post.url'>

      <a expr:href='data:post.url'><data:post.title/></a>

    <b:else/>

      <data:post.title/>

    </b:if>

  <b:else/>

    <data:post.title/>

  </b:if>

</b:if>

</a>

</h2>

記事タイトルを「h2」へ変更し、「a」タグで囲んであげる。「h2」へ変更することによってフォントの大きさが小さくなるためCSSで任意の大きさに調整してあげる。

/* 記事タイトルフォントサイズ */

h2.post-title a{

font-size: 21px; //Sample

color:#666666; //Sample

}


h2.post-title a:hover{

color:#999999; //Sample

}

5．BloggerのNavバー（ナビゲーションバー）を非表示にする
以下のCSSを追加する

/* navバーを消す */

div#navbar{display:none;}

6．フッターの「Powered by Blogger」を消す
一度消してしまうと復元できなくなるため、編集前にテンプレート保存することをお勧めします。
デザイン＞HTML の編集で「ウィジェットのテンプレートを展開」のチェックを外す

Ctrl+Fで「attribution」を検索→locked=’true’の部分を’false’に変更し保存
ページ要素からAttributionのガジェット編集ボタンをクリックし「削除」
7．「続きを読む」をクリックした時.html#moreから表示されるのを無効にする
デザイン＞HTML の編集で「ウィジェットのテンプレートを展開」にチェック

ウィジェットのテンプレートを「class=’jump-link’」で検索

<b:if cond='data:post.hasJumpLink'>

  <div class='jump-link'>

    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

  </div>

</b:if>

この部分の「 + "#more"」を削除

<b:if cond='data:post.hasJumpLink'>

  <div class='jump-link'>

    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>

  </div>

</b:if>

8．ガジェットのタイトルを「h2」から「p」タグへ変更する
例.ブログアーカイブ

デザイン＞HTML の編集で「ウィジェットのテンプレートを展開」にチェック

ウィジェットのテンプレートを「ブログアーカイブ」で検索する

<b:widget id='BlogArchive1' locked='false' title='ブログ アーカイブ' type='BlogArchive'>

<b:includable id='main'>

  <b:if cond='data:title'>

    <h2><data:title/></h2>

  </b:if>

<h2><data:title/></h2>となっている部分を変更する

<b:widget id='BlogArchive1' locked='false' title='ブログ アーカイブ' type='BlogArchive'>

<b:includable id='main'>

  <b:if cond='data:title'>

    <p><data:title/></p>

  </b:if>

文字サイズや背景など、CSSで好みのデザインに調整する。

BloggerでのRSSフィードの活用とPINGの送信

1．RSSフィードサービスFeedBurnerの活用

BloggerのdefaultでもRSSフィードはありますが、『FeedBurner』を利用することで細かなカスタマイズやフィードへのアクセスを解析することができるようになります。他に、フィードにロゴ画像を載せる、フィードの概要を編集する、本文を一部公開にするなどの設定が可能になります。

参考Link

まとめ：フィード (RSS) 管理に Google FeedBurner を導入したらまずやること | attosoft.info Blog

Web サイトのフィード (RSS) 管理に Google FeedBurner を導入した際に、まずやっておくべきタスクのまとめ

Feedburner Feedflare for Twitter | Thejesh GN

Most of the bloggers use Feedburner to distribute the feeds and also use Twitter to communicate with their readers. How about adding a message at the end of your feed so your feed readers can follow y …

2．更新 Ping（Update Ping）の活用
BloggerにはWeblogs.com以外への更新Pingを打つ仕組みがないため、外部への更新 Ping 送信ツールを利用することをお勧めします。

BlogPeople – ブログ情報ポータル・ブログランキング

BlogPeopleへ登録することで、Ping送信ソフト『BlogPingPing』が利用可能になります。外部サイトへのトラックバックPingを打つことができるようになり、とても便利でお勧めです。

会員登録した後、『こちら』からツールのDownloadができます。

BloggerでのJavascriptの活用

1．BloggerのテンプレートにJavaScriptを入力する
導入したいコードの<script>タグを “//<![CDATA[ " と “//]]>" で内包してあげる。

<script type="text/javascript">

//<![CDATA[

ここに導入したいCodeを記述する

//]]>

</script>

参考：XML用語事典 [CDATAセクション]

尚、記事内やガジェットのHTML/JavaScriptでは「CDATAセクション」の記述は不要
2．BloggerにSyntaxhighlighterを導入してCodeを見やすく表示する
参考記事：44ATTACK｜[Blogger] beautyOfCode を導入しよう

本家のSyntaxHighlighterを導入する方法もありますが、beautyOfCodeというものを利用します。

導入方法

デザイン＞HTML の編集で「ウィジェットのテンプレートを展開」のチェックを外す

headタグ内に以下のCodeを記述する

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

<!-- jQuery / beautyOfCode-->

<script src='http://android-beryl.googlecode.com/hg/api/resources/jquery.beautyOfCode.js?r=b338c627a7179b4d9cb0258f7a719cc3917bf5a4'/>

<script type='text/javascript'>

//<![CDATA[

  <!--

  $.beautyOfCode.init({

  brushes: ['Xml', 'JScript', 'CSharp', 'Plain', 'Php', 'Ruby', 'Java'],

  theme: 'Eclipse',

  ready: function() {

  $.beautyOfCode.beautifyAll();

  $("#someCode").beautifyCode('javascript', {gutter:false});

  }

  });

  //-->

//]]>

</script>

※jQuery1.7ではIEで正しく表示されない
「theme: 'Eclipse’,」の部分を変えることで見た目を変更できます。
参考：SyntaxHighlighter – Themes

利用方法

<pre class="code">

<code class="html">

//classにはコードの種類

//boc-collapseを追加すると、閉じた状態にしておけます。

ここにコードを記述する

</code>

</pre>

Google Codeに予めホストされたものを利用していますが、元ファイルは『こちら』にあります。

実際に利用する場合は、HTMLタグをそのまま入力して表示することができないので、変換ツールを利用すると便利です。

HTMLタグ変換ツール – kzWeb

長くなりましたので、今回はこの辺で…最後まで読んでいただき、ありがとうございました。

次回は、「Bloggerを便利に利用する方法」を紹介致します。

Blogger

自分の指定した任意の場所でJavascriptを実行させる Tips

WindowsのVMwareにインストールしたMac OS X Lionを10.7.2へアップデートする方法

コメント一覧

板垣陽太より:
2012/01/06　01:17 1:17 AM
大変参考になりました。ありがとうございます。

ただ「3．Titleタグのブログ名と記事名の記述を変更する」の項目を適応すると、lightboxでjavascriptがオフになっているような挙動になります。

一度まっさらに戻して、最初から確認してみたので多分ここが干渉しています。

blogger初心者なので、解ったら報告します。
もし解ったら教えて頂けると助かります。
ichitasoより:
2012/01/07　15:40 3:40 PM
設定＞投稿とコメントの「ライトボックスで画像をアピール」のことでしょうか？

そちらを「はい」にして試したところ問題なく動作しました。

Lightbox JSの場合ですと試していないので分かりませんが
普段は、Picasa直Linkのimgタグを挿入するUserScriptと
FancyZoom 1.1を利用しています。
板垣陽太より:
2012/01/08　01:34 1:34 AM
ありがとうございます。
「ライトボックスで画像をアピール」はデフォで「はい」になっていたので、念の為オンオフしてみましたがダメでした(･ω･`)

テンプレート変更前は、浮き上がって画像が表示されるお馴染みのlightbox仕様なのですが、ちょうど
「3．Titleタグのブログ名と記事名の記述を変更する」
を適応すると、その挙動がブラウザ上でjavascriptオフに設定した時と同様（に見える）、ページ移動し画像のみ表示されるようになってしまいます。
さてどうしたものか。

参考記事のscript良いですね！
私のPCだと若干重いのですが色々試してみます。
ありがとうございました。