2010/11/18

そんなBloggerテンプレートで大丈夫か？


ラベル:

LaughK  「一番いいテンプレートを頼む」

?????? 「神は言っている、自分で作れと...」

LaughK  「 (  ﾟДﾟ)  」



ってことで（？）、ここ2,3日のうちにこのブログも随分と見た目が変わりましたが、
今回の改修では結構突っ込んでいろいろ調べたことと、最近コンテンツにおいて当たり前になっていきつつある
FacebookだったりTwitterの共有ツール導入もしてみました。
※需要ないんじゃないの？って突っ込んだら負け。

大抵新しいツールを積極的に導入しやすそうなのがWordPressだったりするのですが、
Bloggerではどうなのよ、と思い調べてみるとそれなりに情報はあるものです。
とはいえ、情報があまりにもバラバラすぎて
一貫してどんな感じにひとつのブログにしてくんだよ！ってのを掴むのに非常に苦労しました。
そういう事もあって、別にhtmlもcssもかけるわけでもないのにひと通りのメモにしておきましたよ。
とりあえず、まだまだBloggerで戦えそうですｗ

そんなわけで今回はAndroidにもUbunntuにも触れない番外編的なエントリーでございます。
どっちかっていうと一つ一つの要素に関して突っ込んだものではなく、
「とりあえず普通のBloggerとは違うビジュアルにしたいんだけどhtmlどういじるの？」ということに視点を当てています。

以下、テンプレートのどの辺に何いれんのよ？って視点でつらつらめもっときます。
気になる方はご参考までに。


テンプレートを選ぶ。

基本的に私はBlogger公式のテンプレは使いません。
種類が少ない上に、比較的平凡なものが多く、デフォルトでエントリースペースの横幅が狭く、
またカスタマイズ機能でもそこまで横幅が広がらないからです。
やっぱり、手順書的なものを記述したりするのもそうなんですが、
一行の文章がちょっと長くなっただけで勝手に変なところで折り返されてしまうと、
個人的には表示がレイアウトが汚いな...と感じてしまうので、やはり横幅は大事だなと思うのです。

そういう訳でテンプレートは大抵はここから探しています → Link || btemplates.com

ただ、ここにあるテンプレートも大抵のものはデフォルトの状態では横幅は広くありません。
選ぶ基準は、CSS弄って無理やり横幅広げてもテンプレで使われている画像サイズからそれほど違和感のなさそうな物を選びます。
モノによってはデフォルトでエントリー部分の下に画像を表示させて、エントリーが画像の上にのっかているように見せるものもありますが、
そういうものでCSSの数値を弄って無理やり横に引き伸ばすと当然画像からはみ出て見えてしまうわけで、
これもまた汚いレイアウトになってしまいます。
   ※GIMPとかで画像を再加工してどこかに上げるという力技もあるようですが、正直そこまでしようとは思いません。。。
まあ大抵のものは一度プレビューしてみて、明らかに変な崩れ方してなければ「いけるな！」っと思う程度ですが。


CSSの中に仕込む物、 ”]]></b:skin>”の手前

● エントリーの中で <pre></pre> で囲んだ部分を黒背景で小窓みたいに表示させる。
    テンプレートによってはデフォで入っている場合もあるけど、ほとんどのやつでは実装されていない。

pre {
     border:1px solid #333;
     background:#222;
     padding:10px 20px;
     margin:0 0 1em 0;
     overflow-x:scroll;
     color:#ffffff
}

● ページ全体とエントリースペースの横幅を広げる。

これはテンプレによって違うんで具体的には書き出せませんが、
CSS部分の " width:" で指定された数値が 660px から 800px 位の物は怪しいですね。
大抵の場合は近くに"body"だったり"entry"だったり怪しい単語が並んでいるため
CSSがよくわからなくても何とかなるかとは思います。。
ちなみに私個人的にはエントリー部分は 900px くらい、ページ全体では 1300px 位まで引き伸ばすと好みな広さになります。


 </head>の直前においておく物（<head></head>のなかならどこでもいいが）

● FacebookのShareボタンの追加のための情報収集をするスクリプト
## 情報なくて苦労したな。。。

<!-- Facebook Shareボタン 情報取得スクリプト -->
<script src='http://connect.facebook.net/en_US/all.js'/>
<script>
  FB.init({
    appId  : &#39;&#39;,
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true  // parse XFBML
  });
</script>
<!-- Facebook Shareボタン 情報取得スクリプト おわり-->


● TOPSY版ツイートボタン用の情報収集スクリプト。
## ちょっと重いのが玉に瑕なんだよな。。。今は使っていない。

<!-- リツイートボタン TOPSY版 情報取得スクリプト -->
  <script type="text/javascript">
       var topsy_nick = "laugh_k"; <!-- 自分のtwitterID -->
       var topsy_theme = "brown";  <!-- 色を指定 -->
       var topsy_style = "big"; <!-- アイコンのサイズを指定 -->
       var topsy_order = "retweet,count,badge"; <!-- おまじないでおｋ -->
       var topsy_tweet_text = "ReTweet"; <!-- tweetするボタンのところの文字を指定（日本語可） -->
       var topsy_retweet_text = "ReTweet"; <!-- tweetされた数を表示するボタンのところの文字を指定（日本語可） -->
  </script>
  <script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script>
<!-- リツイートボタン TOPSY版 情報取得スクリプト おわり -->



<b:includable id='post' var='post'>
<div class='post' id='post'>
直後部分に置く物。※テンプレートによってclassで指定するのが違うかも。。。
エントリーのタイトル横あたりに表示される。


● 公式では実装されていない"Del.icio.us"、"はてなブックマーク" 、"livedoorクリップ" 、"Yahoo!ブックマーク" の追加ボタンをエントリーのヘッダーに追加

<!-- その他の共有(ヘッダー) -->
  <span style='float:right; margin-bottom:2px'>
   <!-- Del.icio.us -->
     <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='このエントリをdel.icio.usに追加する'><img alt='このエントリーをdel.icio.usに追加' height='12' src='http://www.kuribo.info/image/delicious/delicious_s.gif' style='border: none; margin: 0pt 0pt 0px 0px; float: none;' width='12'/></a>

    <!-- はてなブックマーク -->
       <a expr:href='&quot;http://b.hatena.ne.jp/append?&quot; + data:post.url'><img alt='このエントリーをブックマークに追加' src='http://b.hatena.ne.jp/images/append.gif' style='border: none; padding: 2px;' title='このエントリーをブックマークに追加'/></a>
    <!-- Livedoorクリップ-->
       <a expr:href='&quot;http://clip.livedoor.com/clip/add?link=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='このエントリをlivedoorクリップに追加'><img alt='このエントリをlivedoorクリップに追加' src='http://parts.blog.livedoor.jp/img/cmn/clip_16_12_w.gif' style='border: none; padding: 2px;'/></a>
    <!-- Yahoo!ブックマーク -->
       <a expr:href='&quot;http://bookmarks.yahoo.co.jp/action/bookmark?t=&quot;+ data:post.title + &quot;&amp;u=&quot; + data:post.url'><img alt='Yahoo!ブックマークに登録' height='16' src='http://i.yimg.jp/images/sicons/ybm16.gif' style='border: none; padding: 2px;' title='Yahoo!ブックマークに登録' width='16'/></a>
  </span>
<!-- その他の共有(ヘッダー)おわり -->


<div class='post-header-line-1'/>
<div class='entry'>
直後に置く物。※これもテンプレによってはclassで指定するものが違うかも。。。
各エントリーの上の部分に具体的に追加するのもが中心


● GoogleBuzzでつぶやくためのボタン。公式版

<!-- GoogleBuzz ボタン -->
    <div style='float:right;margin-left:10px;'>
       <a class='google-buzz-button' data-button-style='normal-count' data-locale='ja' href='http://www.google.com/buzz/post' title='Google バズに投稿'/>
       <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
    </div>
<!-- GoogleBuzz ボタン おわり-->


● Tweetmeme版のリツイートボタン。
## 公式版よりも検索制度も良く、ページの表示も早いので今はこれを採用中
## → 変なbotに変な形でツイートされたんで今は使うのをやめています。
## ー→ 他のボタンだと投稿の際のURLの取得がうまくできなかったりとグダグダなので戻しました。

<!-- リツイートボタン(Tweetmeme版)-->
    <div style='float:right;margin-left:10px;'>
              <script type='text/javascript'>
                   tweetmeme_url = &#39;<data:post.url/>&#39;;
              </script>
              <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
    </div>
<!-- リツイートボタン(Tweetmeme版)おわり-->

● Tweetボタン（公式版）
## 画面の表示は最速だけど、検索でショートurlが対応できてないんで微妙。
## 今は使ってない。

<!-- Tweetボタンを追加(右上) (公式版)-->
      <div style='float:right;margin-bottom:5px;margin-left:15px;'>
         <a class='twitter-share-button' data-count='vertical' data-via='cyblogger' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
           <b:if cond='data:post.isFirstPost'>
             <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
           </b:if>
      </div>
<!-- Tweetボタン(右上)終わり (公式版)-->

●  Tweetボタン（TOPSY版）
## 検索精度はかなりいいけど、ページがかなり重くなってしまう。。。
## 今は使ってない。headにスクリプトを仕込んでおく必要あり。

<!--  リツイートボタン TOPSY版 (右上)-->
     <div class="topsy_widget_data" style="float:right;margin-left:10px;">
        &lt;!--
           {
            "url": "<data:post.url/>",
            "title": "<data:post.title/>"
           }
       --&gt;
     </div>
<!--  リツイートボタン TOPSY版 (右上)おわり -->

● Tweetボタン (BackType版)
## 検索精度もよく、表示速度もそこまで遅くない。Tweetボタンに以外にも機能がありそうなんでこちらに移行。
## → ショートURLの取得がうまくできないため、今は使ってません。それ以外は完璧なんだけどな。。。
## 詳細はこちらから → Link || backtype | BackTweets Widget

<div style='float:right;margin-left:10px;'>
       <script type='text/javascript'>
           tweetcount_url = '<data:post.url/>';  // 投稿記事のURL
           tweetcount_title = '<data:post.title/>'; // 投稿記事のタイトル
           tweetcount_via = true; 
           tweetcount_links = true;
           tweetcount_size = 'large';
           tweetcount_background = '000000';
           tweetcount_border = '008B8B';
           tweetcount_text = "FFFFFF" ;
           tweetcount_api_key = '5c3bba3f5d77a46a13453091e36dc1cde4335e9299a1edeeaa3c31d193b33fda'; // デフォの値そのままで平気っぽい。
       </script>
    <script src='http://widgets.backtype.com/tweetcount.js' type='text/javascript'/>
    </div>


●  FacebookのShareボタンの設置。スクリプトから得た情報を返す。

<!-- Facebook Shareボタン -->
    <fb:share-button type='button'/>
<!-- Facebook Shareボタン おわり-->

● mixiチェックボタン。意外なことに一般ブログでも追加可能なんだな。
## 事前にこちらのページからデベロッパー登録（無料）をしてIDを取得しておく必要あり。
##    → Link || デベロッパー登録（個人の方） << mixi Developer Center (ミクシィ ..

<!-- mixi チェック ボタン-->
            <a class='mixi-check-button' data-key='[取得したキー]' expr:data-url='data:post.url' href='http://mixi.jp/share.pl'>Check</a>
            <script src='http://static.mixi.jp/js/share.js' type='text/javascript'/>
<!-- mixi チェック ボタン おわり-->


<div style='clear: both;'/><!-- clear for photos floats -->
<div style='clear'/>
</p>
直後に置く物。※ここもclassの指定とかがテンプレによって違うかも
各エントリーのフッター部分に追加される。

● 各エントリーの文末に、ブログ内の関連する記事をピックアップして表示する。
## <div style='clear: both;'/><!-- clear for photos floats -->
## <div style='clear'/>
## の間の行に以下を追記。別途スクリプトを仕込んでおく必要あり。

<div id='related_posts'/>


● Facebook用のいいねボタンの追加

<!-- Facebookの&#8221;いいね&#8221;ボタン追加 -->
  <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
<!-- いいねボタン終わり -->


□ 以下のものは <b:if cond='data:blog.pageType == &quot;item&quot;'></b:if>でまとめてくくる。
    こうすることによってエントリー単体でページを開いたときのみ表示されるようになる。

### 公式では実装されていない"はてなブックマーク" "livedoorクリップ" "Yahoo!ブックマーク" の追加ボタンをエントリーのフッターに追加
### ヘッダーに付けていたものと表示はちょっと違う。
         <!-- その他の共有(フッター)-->
             <!-- Del.icio.us -->
            | <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='このエントリをdel.icio.usに追加する'><img alt='このエントリーをdel.icio.usに追加' height='12' src='http://www.kuribo.info/image/delicious/delicious_s.gif' style='border: none; margin: 0pt 0pt 0px 0px; float: none;' width='12'/></a>
             <!-- はてなブックマーク&#12539;ボタン-->
            | <a expr:href='&quot;http://b.hatena.ne.jp/append?&quot; + data:post.url'><img alt='このエントリーをブックマークに追加' src='http://b.hatena.ne.jp/images/append.gif' style='border: none; padding: 0px;' title='このエントリーをブックマークに追加'/></a>
            <!-- このエントリーを含むはてなブックマーク -->
              <a expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url'><img alt='このエントリーを含むはてなブックマーク' expr:src='&quot;http://b.hatena.ne.jp/entry/image/&quot; + data:post.url' style='border: none; padding: 0px;' title='このエントリーを含むはてなブックマーク'/></a>
            <!-- Livedoorクリップ&#12539;ボタン-->
            | <a expr:href='&quot;http://clip.livedoor.com/clip/add?link=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='このエントリをlivedoorクリップに追加'><img alt='このエントリをlivedoorクリップに追加' src='http://parts.blog.livedoor.jp/img/cmn/clip_16_12_w.gif' style='border: none; padding: 0px;'/></a>
            <!-- このエントリーを含むLivedoorクリップ -->
              <a expr:href='&quot;http://clip.livedoor.com/page/&quot; + data:post.url' target='_blank'><img expr:src='&quot;http://image.clip.livedoor.com/counter/small/&quot; + data:post.url' style='border: none; padding: 0px;'/></a>
            <!-- Yahoo!ブックマーク&#12539;ボタン-->
              | <a expr:href='&quot;http://bookmarks.yahoo.co.jp/action/bookmark?t=&quot;+ data:post.title + &quot;&amp;u=&quot; + data:post.url'><img alt='Yahoo!ブックマークに登録' height='16' src='http://i.yimg.jp/images/sicons/ybm16.gif' style='border: none; padding: 0px;' title='Yahoo!ブックマークに登録' width='16'/></a>
            <!-- このエントリーを含むYahoo!ブックマーク -->
              <a expr:href='&quot;http://bookmarks.yahoo.co.jp/url/&quot;+ data:post.url'><img expr:src='&quot;http://num.bookmarks.yahoo.co.jp/image/small/&quot;+ data:post.url' style='border: none; padding: 0px; height:12px'/></a> |
           <!-- その他の共有(フッター)おわり-->

### Tweetボタン公式版の小さいほう。
### 表示は早いので、ボタンだけの実装ならこっちのほうがいいかな。
          <!-- Tweetボタン(フッター)-->
           <div style='float:right;'>
              <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a>
              <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
           </div>
          <!-- Tweetボタン(フッター)終わり-->

### FacebookのShareボタン。ヘッダーのものと全く同じ。違うのはコメントのみ。
          <!-- Facebook Shareボタン (フッター)-->
             <fb:share-button type='button'/>
          <!-- Facebook Shareボタン (フッター)おわり-->

### mixiチェックボタン。ヘッダーのものと全く同じ。違うのはコメントのみ。
          <!-- mixi チェック ボタン (フッター)-->
             <a class='mixi-check-button' data-key='[取得したキー]' expr:data-url='data:post.url' href='http://mixi.jp/share.pl'>Check</a>
             <script src='http://static.mixi.jp/js/share.js' type='text/javascript'/>
          <!-- mixi チェック ボタン (フッター)おわり-->

● GoogleAdsense を追加。
## ここに置くとページのフッターとコメント欄の間に大きめの広告を置けるので個人的には丁度いい。
## 直前で</b:if><BR/>と一度とじて、再度<b:if ・・・></b:if>でくくったほうがきっと綺麗

<!-- Google Adsense -->
       <b:if cond='data:blog.pageType == &quot;item&quot;'><!-- エントリー単位でのみ表示 -->
           [取得したコード]
       </b:if>
<!-- Google Adsense おわり -->
コードはこちらから → Link || Google Adsense

</body></html>のすぐそば。最後のほうに置いているやつ
● Google Analytics のコード。
## これ付けないとブログの詳しい統計が取れない。
## ここはそれぞれ入手したコード貼ってね。→ Link || Google Analytics

● 各エントリーの文末に、ブログ内の関連する記事をピックアップして5つまで表示する。（スクリプト）
## 前にこっちのエントリーで触れています。→ Link || Bloggerで関連記事の追加してみた

<!-- 関連記事の追加 -->
  <script src='http://www.google.com/jsapi' type='text/javascript'/>
     <script type='text/javascript'>
       window.brps_options = {&quot;title&quot;: &quot;<h3>関連記事</h3>&quot;, &quot;max_results&quot;: 5}
     </script>
  <script src='http://brps.appspot.com/brps.js?key=[取得したキー]' type='text/javascript'/>
<!-- 関連記事の追加 End-->

● ブログページの全体に"Follow me!"という札を表示して、クリックするとTwitterに飛ぶようにする。
## ここに乗っけるのはあくまでも私の場合ですので、
## ちゃんとIDとか色の指定は参考にしたページのリンク先より確認した上でコードを入れてください。

<!-- [Follow Me のメッセージを横に表示]twitter follow badge by go2web20 -->
  <script src='http://www.go2web20.net/twitterfollowbadge/1.0/badge.js' type='text/javascript'/><script charset='utf-8' type='text/javascript'>&lt;!--
     tfb.account = &#39;laugh_k&#39;;
     tfb.label = &#39;follow-me&#39;;
     tfb.color = &#39;#262626&#39;;
     tfb.side = &#39;l&#39;;
     tfb.top = 136;
     tfb.showbadge();
  --&gt;</script>
<!-- [Follow Me のメッセージを横に表示] end of twitter follow badge -->

参考にさせていただいたページ。

以上、お疲れ様でしたー。

＜追記＞ 関連記事追加に関して間違いがあったため修正しました。失礼しました。

-- 2010/11/24 --
＜追記＞ Tweetボタンに関してBackType版の物を設置する手順を追加。
              Del.icio.usへの追加ボタンを設置する手順追加。