Bloggerのカスタマイズ日記

amazon
一応、当初予定していた形にブログが完成した(今頃

photo-credit: IconAarchive


パンくずリストのラインが上手く表示されないことがある



実はこのブログには、パンくずリストの上下のラインが上手く表示されないことがありました。




実は、だいぶ前から認識していた問題なのですが、放置していました...。この度、ようやく修正する気になりました。

.loading .columns {
overflow: inherit;
}

/* 一応、「.breadcrumbs」の方もカスタマイズします */
.breadcrumbs {
height:39px;
line-height:39px
}

.breadcrumbs > a {
height:39px;
}

パンくずリストを作成する方法


Bloggerに無限スクロールを追加する




Bloggerに無限スクロールを追加しました。Googleが推奨しているようです。


設置するポイントは、①重複なしということと、②対象範囲にアクセス可能ということらしいです。


Bloggerにオートロード機能を付ける


トップページには表示しない



無限スクロールを追加すると、javascript:timestampspan.data要素が上手く表示されないので、トップページには表示しないようにしました。これについては、メールにて質問されたので、ここで紹介しておきます。


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


<!-- ###ここから -->
<div class='datebox'>
<script type='text/javascript'>
var timestamp = &quot;<data:post.dateHeader/>&quot;;
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='date'><script type='text/javascript'>document.write(timestamp);</script></span>
</b:if>
<div style='clear: both;'/>
</div>
<!-- ###ここまで### -->


Bloggerでコンテンツをトップページでは非表示にする方法


その他、細かな修正


1. ブログフッターにあるTwitter Widgetを左に移動。
→無限スクロールには、フッター領域までスクロールしなければならず、Twitter Widgetが邪魔になる。

2. モバイルサイトのTwitter Widgetをトップページに表示しないようにした。
→上と同じ理由。モバイルサイトにTwitter Widgetを設置した理由は、コメント補完です。コメント欄は設置してないので、管理者とのコンタクトは、できればTwitterでお願いしますという意思表示。

3. モバイルサイトのトップにスクロールするアイコンのマウスオーバー色を青から黒に変更。
→理由は、青が思っていた以上に眩しかったから。モバイルでは、クリックすると、マウスオーバーも残るようで...。


Customize Simple Template in Blogger -Bloggerのカスタマイズまとめ-