Blog内検索

2011/11/13

Blogger カスタマイズ Tipsまとめ

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

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


参考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 == &quot;index&quot;'>と指定することで、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>
この部分の「 + &quot;#more&quot;」を削除
<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を便利に利用する方法」を紹介致します。




関連記事


この記事が気に入ったら
いいね！しよう

最新情報をお届けします

TwitterでWillFeelTipsをフォローしよう！



関連する記事
Facebookコメント
Time: Tag: ,

このエントリーをはてなブックマークに追加

Popular Posts Last 30 days