floating-box:gr

このデザインについて

awawawa サンプル
	カテゴリー：クール	ベーステーマ：なし	ヘッダー：■標準(細)
	登録日：2009/03/08	更新日：2009/03/08	利用数：261
フローティングボックス[http://a.hatena.ne.jp/designset/21]が更なる進化を遂げました。 ■特徴　・ボックスサイズをらくちん変更　・サブメニューで自分好みのモジュール配置 ■簡単な説明　●ボックスサイズ　　・スタイルシートの「いろいろな設定」でボックスのサイズや敷き詰め具合を調整できます。　　　スリムサイズにしたり、はたまた左から右までギッシリ敷き詰めるのもあり。　●サブメニュー　　・両サイドにあるサブメニューには、リンクリストやモジュールを配置できます。　　・サブメニューは、display:noneやフッター部から削除することで簡単に非表示にできます。　　・id="sub1"が左配置、sub2が右配置です。　●そのほか　　・左上の△▽リンクをあなたのidに変更して、シンプルヘッダナビを用意できます。詳細はヘッダやフッタ、スタイルシートの記述をご覧下さい。 ■注意事項　・サイドバーに記述したリンク集など（モジュール以外）は、プライベート設定で非公開にしていても、誰からも閲覧可能です。

ヘッダ／フッタ／スタイルシート

ページのヘッダ

<div class="box">
<h1><hatena name="title"></h1>
<hatena name="incfilter">

<!--
このスペースにいろいろなタグでいろいろな事を記述できます。
--->

<div class="main">

ページのフッタ

</div>

<!--
このスペースにいろいろなタグでいろいろな事を記述できます。
--->

</div>


<!-- ●左上におなじみの三角マークを追加 -->
<div id="navi">
	<a class="prev" title="はてなワールド" href="http://w.hatena.ne.jp/sample/">△</a>
	<a class="next" title="はてなブックマーク" href="http://b.hatena.ne.jp/sample/">▽</a>
</div>


<!-- ●サブメニュー1（消せます） -->
<div id="sub1" class="sub-common">
	<h2>Shortcut</h2>
	<ul>
		<li><a href="http://www.hatena.ne.jp/sample/">はてなプロフィール</a></li>
		<li>
			<a href="http://b.hatena.ne.jp/sample/">sampleのブックマーク</a>
			<p>sampleのブックマーク</p>
		</li>
		<li>
			<a href="http://d.hatena.ne.jp/sample/">sampleの日記</a>
			<br>ブログ
		</li>
		<li>
			<a href="http://f.hatena.ne.jp/sample/">sample's fotolife</a>
			<p></p>
		</li>
	</ul>

	<h3>アンテナ関連</h3>
	<ul>
		<li><a href="/check">手動更新チェッカー</a></li>
		<li><a href="/designset">公開デザイン一覧</a></li>
	</ul>

	<h4><a href="http://hatenaantenna.g.hatena.ne.jp/">はてなアンテナのヘルプ</a></h4>
	<ul>
		<li>
			<a href="http://hatenaantenna.g.hatena.ne.jp/keyword/アンテナのデザインを変える">アンテナのデザインを変える</a>
			<p>はてなアンテナで使えるモジュールの一覧</p>
		</li>
		<li>
			<a href="http://hatenaantenna.g.hatena.ne.jp/keyword/JavaScriptを利用した拡張機能で便利に読み進める">JavaScriptを利用した拡張機能で便利に読み進める</a>
			<p>キーボードショートカットや「既読を非表示」ボタンでより便利に</p>
		</li>
		<li>
			<a href="http://hatenaantenna.g.hatena.ne.jp/keyword/自分のサイトを更新チェックされたくない">自分のサイトを更新チェックされたくない</a>
			<p>アンテナされる側向けの情報</p>
		</li>
	</ul>
	<p>リンク集や小見出し、説明書きの例</p>
</div>
<!-- サブメニュー1ここまで -->


<!-- ●サブメニュー2（消せます） -->
<div id="sub2" class="sub-common">
	<hatena name="rss" url="http://b.hatena.ne.jp/hotentry/news.rss" dateformat="%m/%d %H:%i" listlimit="3" template="hatena-module" titlelength="30" desclength="50">
	<p><a href="http://hatenadiary.g.hatena.ne.jp/keyword/RSSを使った最新情報を表示する（rssモジュール）">RSSを使った最新情報を表示する（rssモジュール）</a></p>

	<hatena name="rss" url="http://f.hatena.ne.jp/t/%E7%A9%BA?mode=rss" listlimit="5" template="hatena-photo">
	<p><a href="http://hatenadiary.g.hatena.ne.jp/keyword/はてなフォトライフの写真を表示する（rssモジュール）"><code>template="hatena-photo"</code>を利用したrssモジュール表示</a></p>

	<h2>urlに指定するrssの例</h2>
	<dl>
		<dt>http://b.hatena.ne.jp/sample/rss</dt>
		<dt>http://b.hatena.ne.jp/hotentry.rss</dt>
		<dt>http://b.hatena.ne.jp/はてなid/asin.rss</dt>
		<dd>コレクションページがあるユーザだけです。</dd>
	</dl>
</div>
<!-- サブメニュー2ここまで -->


<!--<div class="footer">控えめに注意書きしたい場合はこんな風にどうぞ。</div>-->

スタイルシート

/* http://a.hatena.ne.jp/designset/159 */

/* ------------------------------------------------------------

 いろいろな設定

------------------------------------------------------------ */
/* ●文字の大きさ（％指定で） */body
 { font-size: 90% }

/* ●メイン枠の大きさ */div.box, #toggle_visited
 { width: 70%/*100%*/   }

/* ●サブメニューの幅 */div.sub-common
 { width: 13%;/*display:none*/   }

/* ●ボックスの大きさ */div.main ol li
 { width: 13.5em; height: 10em }

/* ●ボックスの高さ（シンプル表示） */#hatena-antenna-simple div.main ol li
 { height: 4em !important }

/* ●ボックスの高さ（イメージ表示） */#hatena-antenna-image ol.image li
 { height: 11em !important }

/* ●背景画像 */body
 { background: url("http://img.f.hatena.ne.jp/images/fotolife/a/awawawa/20090308/20090308051125.gif") repeat-x left top }
/*
blue:   http://img.f.hatena.ne.jp/images/fotolife/a/awawawa/20090308/20090308051125.gif
black:  http://img.f.hatena.ne.jp/images/fotolife/a/awawawa/20090308/20090308051124.gif
pink:   http://img.f.hatena.ne.jp/images/fotolife/a/awawawa/20090308/20090308051126.gif
yellow: http://img.f.hatena.ne.jp/images/fotolife/a/awawawa/20090308/20090308051127.gif
*/

/* ●ボックスの背景画像 */div.main ol li, th, div.sub-common li, div.sub-common dt
 { background: url("http://img.f.hatena.ne.jp/images/fotolife/a/awawawa/20090308/20090308051120.gif") repeat-x center top }
/*
blue:   http://img.f.hatena.ne.jp/images/fotolife/a/awawawa/20090308/20090308051120.gif
black:  http://img.f.hatena.ne.jp/images/fotolife/a/awawawa/20090308/20090308051119.gif
pink:   http://img.f.hatena.ne.jp/images/fotolife/a/awawawa/20090308/20090308051121.gif
yellow: http://img.f.hatena.ne.jp/images/fotolife/a/awawawa/20090308/20090308051122.gif
*/

/* */
/*ol[style] { display: none }*/
/* ------------------------------------------------------------

 いろいろな設定ここまで

------------------------------------------------------------ */


/* ------------------------------
 misc
------------------------------ */
body, div { margin: 0; padding: 0 }
h1, h2, h3, h4, h5, h6, p, ol, ul, dl, table, pre, textarea, #toggle_visited, div.hatena-inc_filter { margin: 0.4em 0 0.8em; padding: 0 }
* { line-height: 1.4 }
h1, h2, h3, h4, div.hatena-moduletitle { padding: 0.2em 0.2em 0; border-bottom: 0.05em dotted }
h2, h3, h4, div.hatena-moduletitle { margin-bottom: 0.2em; padding-top: 1em }
div.box, #toggle_visited { margin-right: auto; margin-left: auto }
div.footer { margin-top: 0.5em; margin-bottom: 0.5em }
#hatena-antenna-search p.diff b { padding: 0.1em 0.2em 0.05em }
/* a */
a { text-decoration: none; padding: 0.2em }
a:hover { text-decoration: underline !important }
/* */
p.pager { position: relative; bottom: 1000em }
p.pager b, p.pager a { position: relative; top: 1000em }
p.pager b { text-decoration: underline; padding: 0.2em }
p.pager { margin-top: 0; margin-bottom: 0.2em !important }
/* */
th, td { margin: 0; padding: 0.2em; border: solid 0.05em }
table { width: 100%; border-collapse: collapse }
ul, ol { list-style-position: inside }
/* text-align */
div.hatena-moduletitle, div.hatena-inc_filter, p, h1, h2, h3, h4, h5, h6, blockquote, pre, textarea, ul, ol, dl, form { text-align:left }
body, div.box, div.footer, input.search-button { text-align: center }
#toggle_visited, p.pager, div.adminmenu, form.hatena-searchform { text-align: right }
/* clear */
div.footer { clear: both }
p { clear: both }
/* */
input.search-button, input[type="submit"] { cursor: pointer }
input.search-word, #inc_filter, div.hatena-inc_filter, input.hatena-searchform { font-family: monospace }
div.hatena-moduletitle { font-weight: bold }


/* ------------------------------
 box
------------------------------ */
div.main ol { list-style-type: none }
div.main ol li { margin: 0.2em; padding: 0 0.2em 0.2em; float: left; overflow: hidden; border: solid 0.05em }
#hatena-antenna-search ol li { padding-top: 0.2em }
#hatena-antenna-detail ol li, #hatena-antenna-search ol li { float: none !important }
/* wide */
#hatena-antenna-detail ol li, #hatena-antenna-search ol li { margin-right: 0; margin-bottom: 1em; margin-left: 0; width: 100% !important; height: auto !important }
/* in */
div.main ol li p { line-height: 1.2 !important; margin: 0.2em 0 0; padding: 0 0.2em }
#hatena-antenna-detail ol li p, #hatena-antenna-search ol li p { line-height: 1.4 !important; width: 100%; height: auto }
span.modified { font-family: "Courier New", Courier, Monaco, monospace; letter-spacing: -0.05em; display: block; width: auto }
span.author, img.icon { margin-left: 0.5em }
#hatena-antenna-normal a.screenshot img { margin-top: 0; margin-bottom: 0; width: 5em; height: auto }
/* ad */
ol[style] li { background-image: none !important; width: auto !important; height: auto !important; float: left !important; overflow: visible !important; border-style: none !important }
/* text-align */
span.modified { text-align: center }
/* clear */
div.main ol li { clear: none !important }
div.main ol { clear: both }


/* ------------------------------
 sub
------------------------------ */
div.sub-common { margin: 0; padding: 0; position: absolute; top: 25%; overflow: hidden }
#sub1 { left: 0 }
#sub2 { right: 0 }
div.sub-common ul, div.sub-common ol, div.sub-common dl { list-style-type: none; margin: 0; padding: 0; width: 100% }
div.sub-common li, div.sub-common dt { margin: 0 0 0.4em; padding-top: 0.2em; padding-bottom: 0.1em; width: auto; overflow: hidden; border: 0.1em solid }
#sub1 li, #sub1 dt { padding-right: 0.2em; border-right: 0.5em solid; border-left: none }
#sub2 li, #sub2 dt { padding-left: 0.2em; border-left: 0.5em solid; border-right: none }
div.sub-common p, div.sub-common dd { margin: 0; padding: 0 0.5em }
div.sub-common dd { margin-bottom: 0.5em }
/* */
div.sub-common ul.hatena-photo li { display:inline; border:none !important; width:auto; background:none; padding: 0 !important }
div.sub-common ul.hatena-photo img { width:5em; border: 0.05em solid }
/* text-align */
#sub1 li, #sub1 dt, #sub2 li p { text-align: right }


/* ------------------------------
 font-size
------------------------------ */
h1 { font-size: 1.4em }
h2 { font-size: 1.2em }
h3 { font-size: 1.0em }
h4 { font-size: 0.9em }
div.sub-common h2 { font-size: 1.0em }
div.sub-common h3 { font-size: 0.9em }
div.sub-common h4 { font-size: 0.8em }
div.sub-common p, div.sub-common h3, table { font-size: 0.95em }
div.main ol li p, span.modified, p.pager, div.footer, span.adminmenu a { font-size: 0.9em }
div.sub-common li, div.sub-common dt, div.sub-common dd, #hatena-antenna-normal div.main ol li p { font-size: 0.85em }
span.author { font-size: 0.8em }


/* ------------------------------
 color
------------------------------ */
/* */
body { color: #405497; background-color: #fff }
/* */
h1 { border-color: #405497 }
div.main ol li, div.sub-common *, th, td, div.sub-common ul.hatena-photo img { border-color: #bfd7f3 !important }
/* */
div.main ol li p, div.sub-common p, div.sub-common li, div.sub-common dt, div.sub-common dd , td { color: #818397 }
span.modified, span.author, p.pager b { color: #a7a7a7 }
#hatena-antenna-search p.diff b { color: #fff; background-color: #e37fac }
/* */
div.footer { color: #ccc }
/* a */
a:visited { color: #a6b7d7 !important }
a:link, ul.link a:visited, span.adminmenu a:visited { color: #4f8bff !important }
a:hover, a:focus { color: #d700a7 !important }
span.adminmenu a:hover { color: #4f8bff !important }
ol[style] li a:link { color: #afcfff !important }


/* ------------------------------
 navi
------------------------------ */
#simple-header { background-color: transparent !important }
#navi a { font-size: 10px !important; text-decoration: none !important; padding: 0 }
#simple-header a, #navi a { color: rgb(166,186,227) !important }
#navi a { position: absolute; left: 140px }
#navi a.prev { top: 4px }
#navi a.next { top: 14px }
#simple-header input.search-word { margin-left: 25px !important }
#simple-header a { font-weight: normal !important; padding: 0 }


/* ------------------------------ */
div.message {position:fixed;left:30%;bottom:15%;width:40%;z-index:99;background-color:#ffc !important}div.message input {cursor:pointer}