フラッシュでなくても、画像でもＯＫです。
◆ フラッシュをヘッダーに設置
① フリープラグインへ追記する
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(function(){
$(".skinHeaderArea").append('<EMBED src="フラッシュのＵＲＬ" loop=true quality=high bgcolor=#000000 WIDTH="800" HEIGHT="350" NAME="header01" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>');
})
</script>
<script type="text/javascript">
$(function(){
$(".skinHeaderArea").append('<EMBED src="フラッシュのＵＲＬ" loop=true quality=high bgcolor=#000000 WIDTH="800" HEIGHT="350" NAME="header01" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>');
})
</script>
● 説明
Ａ. フラッシュのＵＲＬは、フラッシュがある場所のＵＲＬを入れてください
.swf の拡張子です
例 ・・・ アメブロ ２０００万会員突破のペタフラッシュのケース
http://stat.ameba.jp/peta/user/swf/thx2000/peta_button1_thx2000.swf
Ｂ. WITH は幅 HEIGHTは高さです。 フラッシュの幅・高さを指定してください
Ｃ. 下記はフリープラグインの最初に１つあればＯＫです。以下同じ。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
② ＣＳＳへ追記する
/* ------------------------------------------------------- */
/* ヘッダー（スキン）の幅・高さを調整 */
/* ------------------------------------------------------- */
.skinHeaderArea{
height:400px;/* 高さ */
width:800px;/* 幅 */
}
/* ヘッダー（スキン）の幅・高さを調整 */
/* ------------------------------------------------------- */
.skinHeaderArea{
height:400px;/* 高さ */
width:800px;/* 幅 */
}
● 説明
ヘッダーの幅・高さをフラッシュの大きさに合わせて調整します
◆ 画像をヘッダーに設置する場合
横幅、８０１ｐｘ以上の画像はＣＳＳ編集ページでアップロードできますが、
画像フォルダの画像を利用して、８００ｐｘ以下の画像をじき伸ばしして
ヘッダーに設置する場合に利用します。
① フリープラグインへ追記する(width="980" で画像の幅を指定)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(function(){
$(".skinHeaderArea").append('<img src="画像のＵＲＬ" width="980">');
})
</script>
<script type="text/javascript">
$(function(){
$(".skinHeaderArea").append('<img src="画像のＵＲＬ" width="980">');
})
</script>
② ＣＳＳへ追記する
/* ------------------------------------------------------- */
/* ヘッダー（スキン）の幅・高さを調整 */
/* ------------------------------------------------------- */
.skinHeaderArea{
height:400px;/* 高さ */
width:980px;/* 幅 */
}
/* ヘッダー（スキン）の幅・高さを調整 */
/* ------------------------------------------------------- */
.skinHeaderArea{
height:400px;/* 高さ */
width:980px;/* 幅 */
}
◆ リンクさせたい場合
へッダー画像をクリックすると、自分のホームに戻る様にリンクする。
① フリープラグインへ追記する
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(function(){
$(".skinHeaderArea").append('<a href="http://ameblo.jp/アメーバＩＤ/"><img src="画像のＵＲＬ" width="980"></a>');
})
</script>
<script type="text/javascript">
$(function(){
$(".skinHeaderArea").append('<a href="http://ameblo.jp/アメーバＩＤ/"><img src="画像のＵＲＬ" width="980"></a>');
})
</script>
② ＣＳＳへ追記する
/* ------------------------------------------------------- */
/* ヘッダー（スキン）の幅・高さを調整 */
/* ------------------------------------------------------- */
.skinHeaderArea{
height:400px;/* 高さ */
width:980px;/* 幅 */
}
/* ヘッダー（スキン）の幅・高さを調整 */
/* ------------------------------------------------------- */
.skinHeaderArea{
height:400px;/* 高さ */
width:980px;/* 幅 */
}
★ 他にYouTube動画を設置したりなどの応用も可能です