一歩先を行くQHMユーザのためのTips

ページ２

このページには以下を記述してあります。

#main_visual(メインビシュアルでスライドショー)

リンク付きの画像とソーシャルボタンを横に並べる方法

facebookロゴにリンクなし

ブロック要素のものを横にならべるときは、以下の通り。ただし、これでは画像にリンクを張ることはできない。

コード

#show(facebook.jpg,aroundl,facebook)
#social_buttons(fb,large,left)

facebookロゴにリンクあり

インライン要素とブロック要素のものを横に並べるときは、以下のように #style2 で段組を作り、その中に並べたいものを入れる。facebookの画像はインライン要素なので、[[ ]] のおまじないでリンクが張れる。

コード

#style2(style=width:20%;float:left;text-align:left){{
[[&show(facebook.jpg,,facebook);>http://facebook.com]]
}}
#style2(style=width:70%;float:left;text-align:left;margin-left:10px){{
#social_buttons(fb,large,left)
}}
#clear

東京電力の電力使用状況

使用量は東京電力発表のグラフをもとにYahoo! Japanが類推した値です。画像データをYahooが定期的に更新しているようです。
詳細は以下を参考にしてください。
http://setsuden.yahoo.co.jp/

以下のコードを貼り付けるだけで、電力使用量の画像を表示します。
コード

#html{{
<img src="http://setsuden.yahoo.co.jp/images/meter/meter_setsuden.gif" />
}}

QHMの基本デザイン(横幅 750px)では画像が少しはみ出ます。幅を広くするか、wide系のデザインを使用してください。

CSSでツールチップを変更する方法

以下のTitleの上にマウスカーソルを置いておくと、いつまでもツールチップが消えません。なぜでしょう。CSSで小細工をしています。

TitleこれはTooltipのテスト。カーソルを移動しない限りいつまでもToolTipが消えません

【コード】

#html{{
<a href="#">Title<span>これはTooltipのテスト。カーソルを移動しない限りいつまでもToolTipが消えません</span></a>
}}

#beforescript{{
<style type="text/css">
<!--
a{
	z-index:10;
}
a:hover{
	position:relative;
	z-index:100;
}
a span{
	display:none;
}
a:hover span{
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:-2.2em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;
}
-->
</style>
}}