Blogger カスタマイズ Tips

Social_Media_DimSumここでは、Bloggerのカスタマイズに役立つTipsを紹介していきたいと思います。私自身、FC2以外のブログサービスは初めてで、分からないことだらけですが、よろしくお願いします。
photo credit: The Daring Librarian via photo pin cc



最新情報


新しく書き直しました。よろしくお願いします。



フォントや背景をカスタマイズ

まずは、フォントや背景をカスタマイズしていきたいと思います。ちなみに、使用するのは、"Blogger SimpleTemplate"です。



管理画面から テンプレート > カスタマイズ と選択します。



そこで、フォントの大きさや背景をカスタマイズしていきます。この初期設定はそれほど迷うことはないと思います。

HTMLを編集する

HTMLを編集するには、前提として以下の手順を踏みます。 テンプレート > HTMLの編集 > 続行 > ウィジェットのテンプレートを展開



"投稿:Atom"を削除する



デフォルトでは、ブログの下の方に"投稿:Atom"や"ホーム"などのリンクが表示されていますよね。ここでは、それらの表示を削除する方法を紹介します。

"投稿:Atom"の表示を消すには、以下の箇所を見つけてそれを削除します。テンプレートによっては内容が異なるかも知れませんが、キーワードは似たようなものなので、何となく分かるかと思います。

<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>


"ホーム"を削除する



以下の箇所を見つけて削除します。テンプレートによっては内容が異なるかも知れませんが、キーワードは似たようなものなので、何となく分かるかと思います。

なお、今まで削除と言ってきましたが、もちろんコメント化でも構いません。コメント化は、指定箇所を <!---->で囲みます。

<a class='home-link' … </a>


"前の投稿"を削除する



以下の箇所を見つけて削除します。テンプレートによっては内容が異なるかも知れませんが、キーワードは似たようなものなので、何となく分かるかと思います。



なお、新しい投稿を削除するの場合は、 'blog-pager-new-link' などの箇所を見つけて、上と同じように削除します。

"Powered by Blogger"を削除する



attributionという文字を検索し、そこにある truefalse にします。

そして、管理画面のレイアウトにでてくる Attribution を削除するとブログの下に表示されていた"Powered by Blogger"が表示されなくなります。

タイトルとメインコンテンツを分ける線を表示する





HTML編集にて、 .main-inner という箇所を探し、以下のように追記します。

.main-inner {
  padding-top: $(main.padding.top);
  padding-bottom: $(main.padding.bottom);

border: solid 2px #ffffff;
border-top-color: #F2F2F2;
}


タイトル文字に常にリンクを貼る



<b:include name='title'/>の部分を以下のようにリンクタグで囲います。
<a href="URL"><b:include name='title'/></a>


ブログタイトルにSNSアイコンを表示する





ヘッダの編集には、HTMLを直接編集する方法プラグインを追加する方法があります。ここでは、直接的にHTMLのタイトルタグ内にアイコンを入れていく方法を紹介します。

HTMLの編集にて<!--No header image -->を探します。そこで、<h1 class='title'>の後に以下の様なタグを挿入します。

<h1 class='title'>
<div style='float: right; width: 350px;'>
<a href='URL' target='_blank'>
<img alt='RSS' border='0' height='26' src='画像URL' style='background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px' title='RSS' width='26'/>
</a>
<a href='URL' target='_blank'>
<img alt='twitter' border='0' height='26' src='画像URL' style='background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px' title='twitter' width='26'/>
</a>
</div>
<a href='http://mba-hack.blogspot.jp/'><b:include name='title'/></a></h1>


ちなみに、アイコンは以下からダウンロードすると良いと思います。



CSSを編集する

管理画面から テンプレート > カスタマイズ と選択します。

そこで、アドバンス > CSSの追加 からCSSを編集します。



現在のCSS

現在は、以下のようになっています。具体的には、 code, SyntaxHighlighter , Gist Tag の見た目をカスタマイズしています。



使い方は以下のとおりです。

#コードを美しく表現する
<pre class="brush: c; highlight: [1]; title: Hello.c;">コード</pre>
#Gist Tagを埋め込む
<script src='https://gist.github.com/3122127.js'></script>
#キーワードを美しく表現する
<span class="code">キーワード</span>

 SyntaxHighlighter Option
 brush: //使用する言語
highlight: //ハイライトする行
title: //タイトル


なお、 SyntaxHighlighter を使用する場合は、リンク先からコードを作成し、それを管理画面の テンプレート > HTMLの編集 より </head> の真上に貼り付けます。また、テーマは デモ より確認できるので、好みのものを選択してください。

ダウンロードリンクにアイコンを使用する



管理画面から テンプレート > カスタマイズ と選択します。そこで、アドバンス > CSSの追加 からCSSを編集します。



.button a {
  display: block;
  height: 50px;
  width: 200px;
  background: #00b7ea;
 
  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;

/*CSS3*/
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;


使い方は以下のとおりです。

<div class="button">
  <a href="URL">Download</a>
</div>


メニューを表示する



まず、CSSを追加していきます。具体的には、以下のタグを追加します。CSS3 dropdown menuの引用ですが、変更箇所があります。

/* Main */
#menu{
 width: 100%;
 margin: 0;
 padding: 10px 0 0 0;
 list-style: none;  
 background: #111;
 background: -moz-linear-gradient(#444, #111); 
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); 
 background: -webkit-linear-gradient(#444, #111); 
 background: -o-linear-gradient(#444, #111);
 background: -ms-linear-gradient(#444, #111);
 background: linear-gradient(#444, #111);
 -moz-border-radius: 7px; /* 変更箇所 */
 border-radius: 7px; /* 変更箇所 */
 -moz-box-shadow: 0 2px 1px #9c9c9c;
 -webkit-box-shadow: 0 2px 1px #9c9c9c;
 box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
 float: left;
 padding: 0 0 10px 0;
 position: relative;
}

#menu a{
 float: left;
 height: 25px;
 padding: 0 25px;
 color: #999;
 text-transform: uppercase;
 font: bold 12px/25px Arial, Helvetica;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
 color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
 color: #fafafa;
}

#menu li:hover > ul{
 display: block;
}

/* Sub-menu */

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111); 
    background: -ms-linear-gradient(#444, #111); 
    background: linear-gradient(#444, #111); 
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

#menu ul a{    
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */   
 height: 10px;
 width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */    
 height: 10px;
 width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
 background: -moz-linear-gradient(#04acec,  #0186ba); 
 background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
 background: -webkit-linear-gradient(#04acec,  #0186ba);
 background: -o-linear-gradient(#04acec,  #0186ba);
 background: -ms-linear-gradient(#04acec,  #0186ba);
 background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec; 
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

HTML編集より以下のタグを探します。

<div class='header-cap-bottom cap-bottom'>


そして、その上に以下のタグを挿入します。



[続きを読む]をアイコンにする



まずは、CSSの追加にて、以下の様なCSSを追加します。

.button01 a {
    background: #EEE;
    padding: 3px 12px;
    border: 2px solid #CCC;
    text-decoration: none;
    color: #000!important;
    border-radius: 3px;
    -webkit-transition: all 0.3s ease;
}
.button01 a:hover {        
    border: 2px solid #06c;
    background: #06c;
    color: #fff!important;
}​



そして、HTML編集にてdata:post.urlとでも検索し、以下の様な箇所を見つけます。

<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>


それを以下のように変更します。
<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <div class="button01"><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div></div>
    </b:if>


コメントフォームを改良する

コメントフォームには、DISQUSのウィジェットを使用するのがいいと思います。



まず、DISQUSにてアカウント登録した後、Blogger専用ページに移動し、add site "xxxx" to Bloggerをクリックします。


Bloggerのページャーをボタンで表現する



BloggerのPagerをButtonで表現するには、HTMLの編集にて、【新しい投稿】などが表現されている部分をタグで囲ってやるだけです。具体的には、以下のようになります。



<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>

<!--"###新しい投稿###"-->
      <span id='blog-pager-newer-link'>
      <div class='button01'><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Next</a></div>
      </span>

<!--"新しい投稿"バックアップ
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
-->

    </b:if>

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

<!--"古い投稿"-->
      <span id='blog-pager-older-link'>
      <div class='button01'><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Prev</a></div>
      </span>
 
<!--"古い投稿"バックアップ
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
-->

    </b:if>

<!--"ホーム"--> 
<div class='button01'><a class='home-link' expr:href='data:blog.homepageUrl'>HOME</a></div>

<!--"ホーム"バックアップ
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
-->
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>


あとは、 CSSの追加 にて、以下の様なCSSを追加します。

.button01 a {
    background: #EEE;
    padding: 3px 12px;
    border: 2px solid #CCC;
    text-decoration: none;
    color: #000!important;
    border-radius: 3px;
    -webkit-transition: all 0.3s ease;
}
.button01 a:hover {        
    border: 2px solid #06c;
    background: #06c;
    color: #fff!important;
}​



BloggerのページャーにJavaScriptを使用する

簡単に見た目を変更したければ、 JavaScriptを使用します。ただし、私はこのやり方はあまり好きじゃないのですが、簡単に見た目を変更するには、お勧めです。





以下を </body> の上に貼り付けます。なお、`Script`の読み込み箇所は、自身が管理する`Server`に`Upload`し、変更してもいいと思います。



postperpagenumshowpage の部分は、環境によって数字を変更しましょう。

そして、 Accents を検索し、当該箇所を以下のようにします。
/* Accents始まり
---------------------------------------------- */
.section-columns td.columns-cell {
  border-$startSide: 1px solid $(body.rule.color);
}

<!--"点線"を削除
.blog-pager {
  background: $(paging.background);
}
-->

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}

.footer-outer {
  border-top: none;
}

<!--###".footer-outer"のバックアップ
.footer-outer {
  border-top: $(footer.bevel) dashed #bbbbbb;
}
-->

<!--###"ページ"のリストを表示する-->
.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;} 
.showpageNum a,.showpage a {background:#069; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;} 
.showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}
.showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}

/* Accents終わり
---------------------------------------------- */


ページャーの表示には、直接関係のない箇所もありますが、参考のために載せておきました。

Bloggerのタイトルを画像にする

Bloggerの管理画面にてレイアウト > Headerを編集します。



そこで、アップロードした画像を適用するだけです。なお、アップロードする画像はサイトの幅などを考慮し、カスタマイズするといいと思います。



Bloggerでサイトマップを表示する

Bloggerの管理画面にてページ > 新しいページを選択します。



そこで、以下のタグを本文に挿入し、保存すると、サイトマップのページが完成します。あとは、そのページのURLを使ってリンクを貼るなりしましょう。なお、ハイライトされた部分は、自分のサイトのURLを使います。

<script type="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script type="text/javascript" src="
http://mba-hack.blogspot.jp
/feeds/posts/summary?redirect=false&amp;max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>


Bloggerの画面下に表示されている点線を削除する

初期状態では、画面下にフッターの領域を示す点線が表示されていますが、それを消していきます。

Bloggerの画面下に表示される点線を削除するには、テンプレート > HTMLの編集 と進み、 .footer-outer という箇所を見つけて以下のように編集します。

.footer-outer {
  border-top: none;
}

<!--###".footer-outer"のバックアップ
.footer-outer {
  border-top: $(footer.bevel) dashed #bbbbbb;
}
-->


次に、線が何もないのは寂しい気もするので、コンテンツ部分に下線を表示してみます。以下の部分を編集してください。

.main-inner {
  padding-top: $(main.padding.top);
  padding-bottom: $(main.padding.bottom);
<!--コンテンツに枠線を表示する-->
border-bottom-style:solid;  
border-bottom-width:2px;  
border-bottom-color:#F2F2F2;  
}


引用(blockquote)をCSSでカスタマイズする

引用(blockquote)をCSSでカスタマイズする方法を紹介します。
カスタマイズ後は、このようになります。

<blockquote>カスタマイズ後は、このようになります。</blockquote>


まず、管理画面にてテンプレート > カスタマイズ > アドバンス > CSSの追加 と進みます。



そして、以下を追記して保存します。

blockquote {
position: relative;
 padding: 20px 50px;
 min-height: 20px;
 background: url(quote_start.gif) no-repeat 10px 10px #eeeeee;
 }
 blockquote:after {
position: absolute;
 bottom: 10px; right: 10px;
content: url(quote_end.gif);
}


そして、引用符の画像をアップロードし、アップロードした画像URLを上のquote_start.gifquote_end.gifの部分に挿入します。

Bloggerの記事末尾にSNSボタンを設置する

まず、忍者おまとめボタンのページにて、アカウント登録を終えてください。そして、以下の様な手順を踏みコードを発行します。





そして、管理画面にてテンプレート > HTMLの編集 > 続行 > `ウィジェットのテンプレートを展開`と進みます。



そこで、div class=’post-footer’という文字列を検索し、最初にヒットした<div>タグ内にコードを挿入し、編集を保存します。

<div class='post-footer'>

<!--###ここから###-->
<div class='ninja_onebutton'>
<script src='http://omt.shinobi.jp/xxxxxxxx' type='text/javascript'/>
<span class='ninja_onebutton_hidden' style='display:none;'><data:post.url/></span><span class='ninja_onebutton_hidden' style='display:none;'><data:post.title/></span>
</div>
<!--###ここまで###-->
<div class='post-footer-line post-footer-line-1'><span class='post-icons'>


忍者おまとめボタンは遅くなりすぎるので、公式ボタンを使ってみる

忍者おまとめボタンは遅くなりすぎるので、公式ボタンを使ってみます。例えば、Bloggerの各種記事をブックマークしてもらうには、個別記事のURLを表現するdata:post.urlと個別記事のタイトルを表現するdata:titleを使います。


また、<b:if cond='data:blog.pageType == "item"'></b:if>で囲むことで、トップページに表示しないように出来ます。

<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'
     class="hatena-bookmark-button"
     expr:data-hatena-bookmark-title='data:post.title + " : " + data:title'
     data-hatena-bookmark-layout="standard"
     title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
     alt="このエントリーをはてなブックマークに追加"
     width="20" height="20" style="border: none;" />
</a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</b:if>
</b:if>


以上のタグを上で説明した場所に追記すると、はてなブックマークの公式ボタンを使用できます。

Bloggerのラベルのスタイルを簡単にカスタマイズする方法

今回は、有志が作成し、公開している Blogger の Widget を用いて、ラベルの表示を簡単にカスタマイズする方法を紹介します。


blogger_widget_labels


まずは、以下のサイトからWidgetを追加します。



widget_labels_add


そして、ラベルのWidgetを追加します。Bloggerの管理画面にて、 レイアウト > ガジェットの追加 を選択し、ラベルを追加します。

labels


なお、ラベルの設定は、以下のようにしてください。

blogger_widget_labels_setting


これで、ラベルのスタイルが変更されます。また、ラベルのスタイルを独自にカスタマイズしたい人には、 こちら に詳しく解説されています。



Bloggerに瞬時にブログトップまで移動できるアイコンを表示する方法

今回は、BloggerにTopまで移動するアイコンを表示する方法を紹介していきたいと思います。ほとんどが こちら の記事の引用ですが、変更部分があります。


まずは、Bloggerの管理画面にて、 テンプレート > HTML編集 を選択します。そして、以下を </head> の上に追記します。


<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
});
</script>


そして、 </body> の上に以下を追記します。

<p id="back-top">
<a href="#top"><span></span></a>
</p>



次に、Bloggerの管理画面にて、 レイアウト > アドバンス > CSSの追記 を選択し、以下を追記します。

/* backtotop */
#back-top {
position: fixed;
bottom: 5px;
right: 20px;
margin-right: 85%;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}

/* arrow icon (span tag) */
#back-top span {
width: 50px;
height: 50px;
display: block;
margin-bottom: 0px;
background: #eae5e3 url(※用意した画像のURL) no-repeat center center;

/* rounded corners */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

#back-top a:hover span {
opacity:0.5;
}


なお、画像は、以下のサイトにてダウンロードしアップロードするといいと思います。




また、上で指定した画像サイズにするために、画像サイズを変更します。以下のコマンドで画像サイズを変換することができます。

brew install imagemagick

convert -resize 50x50 src.png dst.png


これで、Bloggerの画面下の方にTopに戻るアイコンが表示されたと思います。

blogger_top_icon


なお、今回参考にした記事はとても分かりやすく書かれているため、分からない人は、そちらを見てもらうのが一番かと思います。


Bloggerのフッターをカスタマイズする方法

まずは、Bloggerの管理画面にて、 テンプレート > カスタマイズ を選択し、レイアウトを変更します。

blogger_template_lei


そして、後は、Blogger管理画面のレイアウトにて、フッター部分に新しいウィジェットを追加していくだけです。


また、HTMLを編集することでもフッターのカスタマイズは可能です。例えば、以下の部分を見つけ、フッター領域に背景画像を使用してみます。

.footer-outer {
border-top: none;
background-image: url("ここに画像URLをいれる");
background-repeat: no-repeat;
}



はてなブログパーツを貼り付ける


はてなブログパーツを設定し、コードを取得します。ここで、このコードをそのまま貼り付けるのではなく、一部変更することで、 1usersの記事でも表示することができます。


hatena


主に、変更する箇所は、ハイライトしておきます。


<script language="javascript" type="text/javascript" src="http://b.hatena.ne.jp/js/widget.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
Hatena.BookmarkWidget.url   = "http://mba-hack.blogspot.com/";
Hatena.BookmarkWidget.title = "人気エントリー";
Hatena.BookmarkWidget.sort  = "count";
Hatena.BookmarkWidget.width = 250;
Hatena.BookmarkWidget.num   = 7;
Hatena.BookmarkWidget.theme = "default";
Hatena.BookmarkWidget.load();
</script>



なお、Bloggerを使用する場合は、URLを http://mba-hack.blogspot.jp/ではなく、 http://mba-hack.blogspot.com/のようにする必要があります。






BloggerにZenBackを表示する方法


ZenBackに登録することで、SNSや関連記事などをブログに表示してくれるコードを取得できます。メールアドレスとパスワードの設定、ブログの登録という手順を踏めば、すぐにでもコードを発行してくれます。簡単で便利です。以下のリンクからアクセスします。

ZenBack





以下のように、 <b:include data='post' name='comments'/> を検索し、その上に取得したコードを貼り付けます。ただし、ハイライトされている文字列を追加してください。

<!-- X:S ZenBackWidget --> <script type='text/javascript'>
// <![CDATA[
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//mba-hack.blogspot.jp/&nsid=754389589028945890238940803285493&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
// ]]>
</script> <!-- X:E ZenBackWidget -->

<b:include data='post' name='comments'/>