Bloggerのタイトル横にガジェットを配置したいと思い、いろいろ調べてましたがBlogger記事を多く投稿されているクリボウさんの設置方法が一番簡単そうだったので紹介＆やり方をメモしておきます。
タイトル横にガジェットを配置する方法
レイアウトからガジェットを配置できればよかったんですが、配置できるようにするにはちょっと時間がかかりそうだったので、HTMLの編集機能を使います。
- テンプレート→HTMLの編集を選択
- ウィジェットのテンプレートを展開にチェック
- <!--No header image -->配下の<h1 class=’title’>を探す
- 表示させたい内容をh1タグ内の<b:include name='title'/>の前後どちらかに貼り付ける
配置したHTMLと配置結果はこんな感じ！
配置したHTMLは下記の通りです。
※2012.01.27 width:400pxをwidth:350pxへ変更しました。
<!--social_marks_start—>
<div style='float: right; width: 350px;'>
<a href='http://feeds.feedburner.com/blogspot/KhQzt' target='_blank'>
<img alt='RSS' border='0' height='26' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfZz-LY9vn1dbCmGXjke3nA6M5DRg_ETxNVDHWhFOfWskxjZz4CfOnuL48ub5mLlMHdAzAfvQNfz1MWwpoZvy_zyOzFMjC3NeODiyhyphenhyphenwuqXGBzrh8dyStNU7yBhCmBsOoJvbcMtr4ecNT_/s1600/1324252443_RSS_02.png' 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='https://twitter.com/#!/nasunotw' target='_blank'>
<img alt='twitter' border='0' height='26' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBU2eu_h4AHVRqKW8nPHNsOy-edMFHneYK1oQNw10VKm5jjp0On-9t7NFraDqbbLDdSvN8BLpkkPvuURPQE8NF4OaNuJrWa0AycfZtUfCi5lv6WC0WsGk17icHC_GypZA7moQz89enhFHa/s1600/1324252430_twitter_02.png' 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>
<a href='https://plus.google.com/118129099057547285261' target='_blank'>
<img height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNqYtIQTd8eGZghN_Zt72-gb18giyfSdGkFVrfB50yrjx9e8pVRZpMdOgHko6mdv31j4lvENg2i0aEJMBvaMFz8JqJzm96Ezq9p_6ryBPZMGQJpN7mTiW6sbeMPJrCQ1l0_1ZtzF-qI84/s1600/gplus.png' style='margin-right: 5px;' width='24'/>
</a>
</div>
<!--social_marks_end—>
配置した結果はこんな感じです。
モバイル版も考慮しましょう！
※2012.01.27 追記
モバイル版を考慮してませんでした！すみません
<div style='float: right; width: 400px;'>にしてしまうと、HTC DesireHD & Dolphin Brawser HDでみるとガジェットが左に行きすぎています。
見た目が恐ろしく悪いので、先ほどwidth:400pxをwidth: 350pxに変更しました。
モバイル用CSSで制御してもいいと思います。
ソーシャルメディアのアイコン配置は人それぞれですが、私はユーザがWebページを見て「あ、登録してるんだ！」と気づいてもらうには画面上部に配置した方が効果的かなと思っています。