header (version 03) v2

幅を1120pxに延長

Bloggerでインライン広告が表示されない

Bloggerでは「ブログの投稿」ガジェットの編集から、投稿の間に広告を表示する にチェックを入れることにより、簡単にインライン広告を設定できるようになっていますが
カスタマイズされたテンプレートでは表示されないことがあります(このテンプレートもそう)

• Shakingidea: AdSense インライン広告

古い情報ですが、こちらの方法で何とかなるかも?

[Blogger] main(-wrapper) にガジェットを追加できるようにする

サイドバーに追加したガジェットをドラッグすれば、移動での追加はできるんですが

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>

no を yes に

[Blogger] 個別エントリに最終更新日を表示

• Bloggerで記事に最終更新日を付ける方法 – 某氏の猫空 さん

からコードをもらってきただけです

header (version 03)

左の数字を03に変更しました

これは色違いの兄弟テンプレートから拝借

• Blogger Classic Template Store: Snapshot Blogger classic template by Dave Shea

関連エントリ:

• header背景画像のリンク切れを修正
• Bloggerでクラシックテンプレート Snapshot: Tequila を使う

まぁロゴは入れたいと思っているんですが、追々考えていきたいと思います

header ( 「ページヘッダー」 のガジェット ) を移動可能にする

最近のBloggerの変更で、右下に[フィードバックを送信]のボタンが付いた結果、レイアウトの編集画面が狭まり、ロックされているガジェットの編集ボタンが押せなくなってしまいました

<div id='header-wrapper'>

<b:widget id='Header1' locked='true'

を

locked='false'

に

これで ( 「ページヘッダー」 のガジェット ) をドラッグで移動して編集ボタンを押せます

関連エントリ:

• [Blogger] header下にガジェットを追加できるようにする

[Blogger]ブログリストガジェットでStoreという空白の項目が追加される

なんだろうこれ気持ち悪い
削除もできないし

RSSがうまく取得できない場合(独自ドメイン等)に起きるみたい?です

BloggerにPocketボタンを追加

• [Blogger] あとで読む？ブログに「Pocketボタン」を設置する方法 | Bloggerをカスタマイズするときに見るブログ

こちらからコードをもらってきて、記事タイトル横のはてなブックマークボタン隣にコードを追加してみましたが、(参照) :

• 記事タイトル横に "はてなブックマークボタン" を追加

タイトル文字下に標示されますね(^^:)

記事タイトルの側にあった方が良いと思うので
まぁこのままでも問題ないかな

[Blogger][CSS] blockquote class="code"

.code{
margin: 0;
padding: .5em;
text-align: left;
background: #d5ff82;
border:#a3aeb9 1px solid; /* 枠線 */
}

やっぱりpreでは問題があるのでとりあえずこんな感じに

<blockquote class="code">.code{
margin: 0;
padding: .5em;
text-align: left;
background: #d5ff82;
border:#a3aeb9 1px solid; /* 枠線 */
}</blockquote>

(上の)HTML記述はこう

[Blogger][CSS] preとcode

pre {
margin:2px;
padding:5px;
background:#d5ff82; /* 背景 */
border:#a3aeb9 1px solid; /* 枠線 */
}

code {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1em;
}

こんな感じかなぁ
表示はもちろん上の様になる
preのCSS一部はblockquoteから流用

• Modified Snapshot: Tequila: 引用部分(blockquote)

Bloggerの関連記事表示を考える

関連記事の表示はどうするか
以前使用していた LinkWithin ははっきり言って使い物にならないわけで

調べてみると、最近はMilliardを使っている人が多いみたいです

• Milliard関連ページプラグインについて | シスウ株式会社

国産だし、Blogger専用のコードを吐き出してくれる模様
やったぜ、これで外人に差をつけられるぞ！！というわけです

ブログ個別の専用コードなので、テンプレートのバックアップを目的としている当ブログには導入できませんが、現在のメインブログに導入してみます

他はこちらが気になります

• 【Blogger】関連記事を表示させる方法 | バナナのBloggerカスタマイズ日記

[Blogger] 記事下に広告を表示

こちらを参考に

• Blogger Beta Tips: ものを記事のページにしか表示させない方法

まぁ貼らないよりはマシです

header背景画像のリンク切れを修正

第三者が作成したテンプレートで画像を使用しているものはリンク切れに注意
CSSを見ると

#header {
background: transparent url(http://img160.imageshack.us/img160/2641/bgxk7.jpg) bottom left no-repeat;
}

imageshack.us の画像リンクが切れています

幸いにも元となったクラシックテンプレートの画像リンクは切れていないので

• Modified Snapshot: Tequila: Bloggerでクラシックテンプレート Snapshot: Tequila を使う

こちらのHTMLを参照して

#header div {
background: transparent url(http://www.blogblog.com/snapshot_tequila/header-02.gif) bottom left no-repeat;
}

このヘッダー画像を修正しました

画像はどこにアップロードすれば良いか？
外部ホスティングサービスだと削除やサービス終了の問題が付きまといます
Bloggerにアップし、リンクするのが管理も一緒にできて楽でしょう

[Blogger] header下にガジェットを追加できるようにする

<div id='main-wrapper'>前に

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

を追加

CSS:

#crosscol-wrapper {
clear: both;
background: #E9EAEB url(http://www.blogblog.com/snapshot_tequila/bg-footer.gif) bottom left no-repeat;
border-top: solid 1px #fff;
min-height: 15px;
}

こちらはfooterのCSSをそのまま流用

これでヘッダー下にページナビゲーション ( 「ページ」 のガジェット ) が追加できます