Bloggerのテンプレートのソースを書き換えてみました

Last Update : 20/Jun/09
Bloggerの標準テンプレートでは上手く出来ないことが多かったので、ソースを弄って見栄えを変えてみました。

その他にもちょこちょこと小修正しました。

【変更した点と参考資料】

①ラベルを２列に

下記のページを参考にさせて頂きました。

・itFun.jpさんのページ
http://itfun.jp/2009/01/blogger-2.html

サイドバーの幅が違うので少し変更しました。

また、上記サイトで紹介されている方法ではIE6から印刷しようとするとエラーが出てしまいますが、ウィジェットの「ul id="tags"」とCSSの「＃tags li{」の部分の「tags」が原因の様ですので、「tags2」に書き換えたら印刷出来る様になりました。

スタイルシートの下記赤字部分を書き換えます。

<b:widget id='Label1' locked='false' title='サイト内キーワード検索' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul id='tags2'>　
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
      </li>
    </b:loop>
    </ul>

合わせて、スタイルシートの下記部分も書き換えます。

赤字部分が追加した部分です。

/* Sidebar Content
----------------------------------------------- */
.sidebar { 
  color: $sidebartextcolor;
  line-height: 1.5em;
 }

.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}

.sidebar #tags2 li {
  float:left;
  width:95px;
}

.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }

② アクセスカウンターを変更

下記サイトの物を利用させて頂いています。

サイドバーのウィジェットに貼り付けています。

・ＩＴＧｅａｒさんのページ
http://cnt.itgear.jp/

③レイアウト崩れ防止＋ソース整形

今迄はBloggerのWYSIWYG編集画面で改行を沢山してレイアウトを整えていたのですが、「ＨＴＭＬの編集」から自分でタグを書き込んで整形する様にしました。

改行の変わりに画像の直後に＜div class="clear"＞＜/div＞を挿入して、テキストの回り込みを解除しただけです。

携帯等のフルブラウザでもレイアウトが崩れなくなったと思います。

下記サイトを参考にさせて頂きました。

・ＣＳＳレイアウト実践講座
http://css.uka-p.com/cause/clear.html

④画像にモザイクを

以前は「ペイント」を使って個人情報を隠してました。

今回から以下のソフトを使わせて頂いています。

下記ページの「ミニアプリ」のリンクからダウンロード出来ます。

・ＭｏＺＡ
http://www.fine-view.com/jp/

⑤「続きを読む」ボタンを導入

Bloggerには標準ではこの機能がありません。

下記サイトを参考にさせて頂き、スタイルシートを書き換え、各投稿のソースも弄りました。

・クリボウさんのBlogger入門http://blogger.kuribo.info/2006/02/blogger_20.html

まず、スタイルシートに下記赤字部分を追加します。

<b:widget id='Header1' locked='true' title='アドエス覚書 ～へなちょこおたくメモ～ (Header)' type='Header'>
<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
<b:includable id='main'>

  <style type='text/css'>
    <b:if cond='data:blog.pageType == "item"'>
      .fullpost {display:block;}
      .readmore {display:none;}
    <b:else/>
      .fullpost {display:none;}
      .readmore {display:block;}
    </b:if>
  </style>

  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == "REPLACE"'>

次に、各記事内で下記タグを使って記述します。

見出し

<div class="fullpost">

本文

以上</div><div class="readmore"><a href="この記事のurl">[続きを読む]</a></div>

また、新規投稿作成用のテンプレートも登録しました。

⑥画像の枠を消す

下記を参考に「秘密のボタン」の枠を消しました。

・digital Labさん
http://slolab.net/digitallab/2006/05/post_8.html

⑦RSSリーダーへのフィードの登録ボタンを追加

下記サイトのソースを参考にさせて頂きました。

ボタンは画像ではなくテキストにしてみました。

・ＳＥＯ対策ドットコム
http://www.seotaisaku.com/smoplus/bmplus.html

⑧スタイルシートのヘッダー部分弄ってブログの説明（description）を左寄せに

「header .description」に「text-align: left;STYLE」を追加しました。

⑨MARQUEEを追加

下記ページを参照させて頂きました。

・Tomyさんのページ
http://www5.airnet.ne.jp/tomy/knowhow/tag.htm

⑩複数のウィジェットを一つに

下記を一つのウィジェットに纏めてみました。

各々のソースを一つのウィジェットにコピー＆ペーストしただけです。

・アクセスカウンタ
・MARQUEE
・フィードの登録ボタン
・自己紹介

この記事ご紹介した内容は「Blogger覚書 ～へなちょこおたくメモ～」でもご紹介しています。

以上

[続きを読む]