例はMT使用時。
もちろんjQuery。
カテゴリ＝トップニュースの最新記事を一件のみ表示させています。
記事があれば、ページを開く時(bodyタグで指定)に勝手に開きます。
表示ウィンドウはサイズ可変。
幅はCSS固定指定ですが、高さが可変で記事量による。
閉じるが画像。HTMLで指定してます。
サンプル
http://seika.ito-gakuen.ed.jp/
参考
http://ascii.jp/elem/000/000/478/478300/
■HTML
<!-- (bodyタグ 記事の有無を確認しています) -->
<mt:SetVar name="count" value="0">
<MTEntries lastn="1" offset="0" category="トップニュース">
<body onLoad="window_open()">
<mt:SetVarBlock name="count"><$mt:EntriesCount$></mt:SetVarBlock>
</MTEntries>
<mt:If name="count" eq="0">
<!-- / カテゴリに記事が無ければ表示しない -->
<body>
</mt:If>
<!-- (bodyタグ 記事の有無を確認しています) -->
<div id="TopNews">
<a href="" class="close"><img src="<$mt:BlogURL$>img/close.png" alt="閉じる" /></a>
<dl>
<dt>甲斐清和トップニュース</dt>
<dd>
<MTEntries lastn="1" offset="0" category="トップニュース">
<p><abbr title="<$MTEntryDate format="%x %k時%M分"$>">
<$MTEntryDate format="%x"$> <strong><$MTEntryTitle$></strong></abbr><br />
<$MTEntryBody$></p>
</MTEntries>
</dd>
</dl>
</div>
■CSS
/************************************************
* TopNews *
************************************************/
#TopNews{
display:none;
position:absolute;
top:350px;
left:350px;
/* トップニュース TOPNEWS サイズ変更 */
width:400px;
/* height:300px; */
/* トップニュース TOPNEWS サイズ変更 */
z-index: 99;
}
#TopNews a.close{
position:absolute;
right:10px;
top:1px;
}
#TopNews dl{
width:100%;
height:100%;
background: #FFFFFF;
border: solid 1px #666666;
margin:0;
}
#TopNews dl dt{
height:25px;
line-height:25px;
text-indent:1em;
font-weight:bold;
cursor:move;
color: #FFFFFF;
background: #3D3D3D;
}
#TopNews dl dd{
margin:0;
padding:1em;
line-height:1.5;
}
■JavaScript
<script type="text/javascript">
// オープン時に表示させたいので、イベント外
function window_open(){
$("#TopNews").fadeIn("slow");
}
$(function(){
// 閉じる
$("#TopNews a.close").click(function(){
$("#TopNews").fadeOut("fast");
return false;
})
// ハンドル
$("#TopNews dl dt").mousedown(function(e){
$("#TopNews")
.data("clickPointX" , e.pageX - $("#TopNews").offset().left)
.data("clickPointY" , e.pageY - $("#TopNews").offset().top);
$(document).mousemove(function(e){
$("#TopNews").css({
top:e.pageY - $("#TopNews").data("clickPointY")+"px",
left:e.pageX - $("#TopNews").data("clickPointX")+"px"
})
})
// IE6対策
$("body").bind('selectstart', function(){
return false;
})
// IE6対策
}).mouseup(function(){
$(document).unbind("mousemove");
$("body").unbind('selectstart');
})
})
</script>