Bloggerテンプレートをカスタマイズした結果→操作不能→思い切って一からカスタマイズしてみた。

管理人です。昨年から本格的にブログでの情報発信を始めて1年Bloggerのアクセス数も増え「やりがい」を感じながら記事を投稿していますが、この度Bloggerのデザインを一新いたしました。理由としては素人がコツコツと先人の知恵を拝借して更新していましたが、テンプレートにゴミが増えたこと　レイアウトの更新ができない（Bloggerのレイアウトが更新できない!!　モバイルテンプレートをカスタマイズしたらレイアウトが更新できない件）などの問題を抱えていたためです。この際だからと無料テンプレートを適用してみましたがメンテナンスが出来ずあきらめました。最終的にはBloggerシンプルテンプレートをカスタマイズし広告やウィジェットを再配置しました。

カスタマイズ内容をまとめてみます。（注意：ウィジェット＝ガジェット）

１．画面上の「navbar」ナビゲーションバーを削除して無駄な空白を消す
navbarウィジェットを「オフ」にしてから、テンプレート→カスタマイズ→「上級者向け」→「CSSを追加」で
　　#navbar {
height: 0;
　　　}

を追加する　これだけ

２．ヘッダーを移動できるようにするヘッダーにAdsense広告を組み込む為ヘッダー部分のブログタイトル・説明部分を移動できるように<b:widget id=’Header1′ locked=’true’ title=’単刀直入に申しますと (Header)’ type=’Header’>を探してlocked=’false’へ書き換える。これでヘッダーを移動できるようになる。

次に「HTML/JavaScript」ウィジェットを追加して左側にブログのタイトルと説明を画像ファイルで表示、右側にAdsense広告のコードを貼り付けて実現させる。HTMLはこんな感じです。
<div style=”position: relative;”>
<a href=’http://1192japan-koz.blogspot.jp/’ style=’display: block’>
<img border=”0″ src=”タイトル画像ファイルのURL”/>
<div style=”position: absolute; top: 5px; left: 330px;”>　←左側画像サイズが収まるようにGoogleAdsenseのコードを貼り付け
</div> </a></div>
「HTML/JavaScript」ウィジェットを保存したら、ウィジェットをheaderの上に移動して動作確認するとこんな感じ。

３．個別記事にLinkwithinの設置する今さらですが、BlogにLinkWithinを埋め込んだら関連記事へのアクセス数が増えて月間PV数は3万を超えてきました。を参考にしながら設置する

４．ページトップへアニメーションしながら戻るボタンを追加する
テンプレート→HTMLの編集で下記のコードを追加する　追加位置は</head>の直前でいいと思います
<!– PageTop code 開始 –>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
<!– PageTop code 終了 –>

次に、テンプレート→カスタマイズ→「上級者向け」→「CSSを追加」で下記のコードを追加する
<!– PageTop CSS 開始–>
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a {
background: #666;
text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}
<!– PageTop CSS 終了–>
最後に、下記のタグを追加する
</footer>
　<p id=’page-top’><a href=’#wrap’>PAGE TOP</a></p> <!– content –>