現在はてなダイアリーで「Dot-pink」をデザインテーマに使用しているのですが、右上部分(ヘルプの下辺り)が若干さびしく感じるため、ここにAmazonのサーチリンク等を配置したいです。(サーチリンクは現在サイドバーに配置)
今のレイアウトを崩さずにそれを実現するためには、スタイルシートにどのような指定を行なえば良いでしょうか?ブラウザの種類に左右されない方法でお願いいたします。
http://d.hatena.ne.jp/akkun_hobby/
ご希望されている配置には、要素の絶対配置が便利です。例えば「詳細デザイン設定」の「ページのヘッダ」と「スタイルシート」にそれぞれ以下のように記述すると、Amazonのサーチリンクをページ右上に表示することができます。
<div class="searchlink"> <iframe src="http://rcm-jp.amazon.co.jp/e/cm?t=akkunhobby-22&o=9&p=20&l=qs1&f=ifr" width="120" height="90" frameborder="0" scrolling="no"></iframe> </div> <div class="main">
div.searchlink { position: absolute; /* 絶対配置(基準はこの場合 div.hatena-body) */ top: -50px; /* div.hatena-body の上辺から-50px下=50px上 */ right: 20px; /* div.hatena-body の右辺から20px左 */ }
Yuichirouさん、いつもお世話になっております。早速適用したとろこ、まさに私の望みどおりに配置することができました。
的確なご回答ありがとうございました。
今後はもう少しスタイルシートについて勉強します。