blogger　ヘッダー横に広告を表示させるOkissta.com 元ＤＱＮの話したいこと

前回に引き続きbloggerカスタム備忘録になります。参照サイトへのリンクを表示しているので、「お前の説明じゃよくわからない！」と思ったらリンク先へお願いします。ではスタート

ヘッダー横に表示させたい

ヘッダーの横にアイコンや広告を表示させたいと思ったことはありませんか？そこで、レイアウトをいじろうとしてもヘッダーは横長になっていて、その横にガジェットなどを置くことができません。ではどうするか。HTMLを編集しましょう。参照リンク元「なんでもエンジニ屋」×日記さん

１．ｈｔｍｌ編集からウィジェットテンプレートを展開

２．ctrl＋Fを使って「」を探しましょう

ここにコードを入力するとタイトルの左側に表示

<b:include name='title'/>

ここにコードを入力するとタイトルの右側に表示

</h1>

<b:include name='title'/>の上が左表示、下が右表示になっています。これらはbloggerテンプレートシンプルの白色を使用していますので、ダウンロードしたものとは少し違うかもしれません。

例によってAdsenseを貼り付けてみる

エンティティ文字に変換されたアドセンスコードを先ほどの場所にペタリ。これで完璧ですね。プレビューで確認・・・・

表示されてません

ここで表示されてない方はタイトル画像を使っている方ではありませんか？ためしにタイトル画像を消してみると表示されていると思います。ボクがそうでしたからね。

ブログタイトルが長すぎて上手く横に配置できない方はクリボウさんのところで確認してみてください。

ググッても良く分からなかった

例によってググッても見つからないという非常事態のためホームページを作る人のネタ帳さんのソースコードを覗いて見る。そして気づきました。bloggerを気にしすぎていたようです。単純に画像の大きさを指定して配置するだけでいいんじゃないか。きっと、それくらいならFC2時代にやってます。

<b:include name='title'/>がタイトルっぽいので画像に差し替えてみる

<b:include name='title'/>

↓

これで表示できたと思います。<b:include name='description'/>がブログ説明になりますが、SEO的に消していいのか悪いのか分からずじまいでした。

ブログの説明を残すにしても

文字の大きさなどを編集しようにもできない。またもやhtmlを開かなくてはなりません。ですが、すぐに見つかりました。→バカメモさんのところで詳しく解説されてます。

Variable name="description.text.size"これをテンプレート内で検索すると雰囲気で分かります。雰囲気

今日はこれくらいで、ヘッダー画像を作りに行きたいと思います。ブログも結構完成されてきたので、記事ネタを集めなくてはいけませんね。

※2012年５月９日追記

IEで表示してみたところ、ものの見事に改行され二段に表示されていました。そこで、float指定をして解決したので追記しておきます。

CSSに下記を追加します。bloggerテンプレートシンプル（白）ならば.Header h1 a で検索して下記のように「float」を追加してあげれば上手く表示できるかと思います。

.Header h1 a {
color: $(header.text.color);
　float: left;
　width:222px;
}

TOPに移動