下記内容は、Seesaaブログをカスタマイズする内容です。参考とする場合、自己責任の上でお願いします。
|
現在のブログのトップバナー画像の横幅を認識する。
デザイン→デザイン設定で現在適用されているブログタイトルをクリックすると コードが表示されるので、最初の方に左の記述があり、赤字部分が画像の幅を表し、778ピクセルである。 |
#container{
margin:0px auto 0px auto; width:778px; color:#5D5D5D; |
|
下記サイトから、swfobject_2_2.zip をダウンロードする。
http://code.google.com/p/swfobject/ （SWFObjectとはフラッシュを動かすためのJavascriptである。） 以降、今現在のSWFObject Ver2.2にて説明する。 ※．SWFObjectはバージョンによってHTMLタグが異なるようなので注意！！ |
|
|
ダウンロードした圧縮ファイルを解凍し、
swfobject.jsを自分のSeesaaブログの適当なディレクトリーにアップする。 ※．自分は、フラッシュを使用するので、"flash"というディレクトリィを作成してファイルをアップしたつもりが、 プルダウンメニューで、flashディレクトリーが選択出来なかったり、またflashディレクトリーにアップしたつもりのファイルの容量が0バイトと表示されていた。 flashというディレクトリー名の使用は、Seesaaブログのシステム的に問題あるようだ。 |
|
|
バナーにするフラッシュファイル(swf)を同じディレクトリーにアップする。
|
|
|
デザイン→HTMLにて現在HTMLを使用しているのなら、オリジナルを使用せず、
HTMLを追加し、追加したHTMLにオリジナルの内容をコピーする。 ※．失敗しても元に戻せるように。 |
|
|
追加したHTMLに下記SWFObjectのHP
http://code.google.com/p/swfobject/wiki/documentation の How to embed Flash Player content using SWFObject dynamic publishingの STEP 3: Embed your SWF with JavaScript コードを入力する。 （SWFObjectについては、↓に日本語の説明あり http://mtl.recruit.co.jp/blog/2007/10/swfobject_v20.html） <head>〜</head>間と<body>〜</body>間に、左例の様にタグを入力する。赤字と緑字は自分のURLに合わせる。 青→追加入力コード 赤→アップしたswfobject.jsとswfのフルURLアドレス 緑→代替コンテンツ 紫→フラッシュ表示サイズ（幅を合わせる事に注意！） 水色→ID 以上の入力が終了したら、プレビューではフラッシュは再生されないので、一旦保存して、 追加したHTMLが適用になっている事を確認してから、自分のブログを開くとトップにフラッシュが表示されているはず。 |
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="http://xxxxxxxx.up.seesaa.net/image/swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF("http://xxxxxxxx.up.seesaa.net/image/xxxx.swf", "myContent", "778", "246", "9.0.0"); </script> </head> <body> <div id="myContent"> <p><img src="http://xxxxxxxx.up.seesaa.net/image/xxxxxxx.gif" alt="代替画像バナー" /></p> </div> </body> |
|
現状は、
＋−−−−−−−−−−−−−−− ｜フラッシュ表示 ｜ ＋−−−−−−−−−−−−−−− ｜バナー画像表示 ｜ ＋−−−−−−−−−−−−−−− となっているので、邪魔なバナー画像を消す。 デザイン→デザイン設定にて、現在使用しているテーマタイトルを確認する。 現在適用しているマスターは壊したくないので、同じテーマタイトルをベースとしたものを追加して、そちらを改変する。 デザイン→デザイン一覧から、現在適用しているテーマタイトルと同じものをさらに追加する。 |
|
|
デザイン→デザイン設定にて、追加したテーマタイトルを開き、
トップバナー画像の呼び出しコードを削除する。 左例の赤字部分を削除する。 |
#banner{ margin:0px; padding-left:45px; text-align:left;
height:246px;
background-image:url(http://blog.seesaa.jp/img/bg/xxxxxx/xxxxx.jpg); |
|
以上で、バナー画像は消えたが、フラッシュと本文までの距離が開いてしまう。
ブログタイトル名とブログの説明も背景色と同じ場合は消えてるかもしれない。 ブログタイトル名とブログの説明の文字が消えている場合、まず文字色を変える。 左例の赤字で、ブログのタイトルの文字色が決まるので、適当に好みで変える。 |
h1 a{
color:#00F; text-decoration: none; font-weight:bolder; } |
|
左例の赤字でブログの説明の文字色が決まるので、適当に好みで変える。
|
.description {
font-weight:bold; padding:0px 10px 0px 0px; color:#00F; } |
|
現状、ブログタイトルの文字が大きいかもしれない。
配置的に補足説明が適当と思われるので、文字を小さくする。 左例の赤字でブログタイトルのフォントサイズを小さくする。 |
h1 {
margin:0px; padding-top:42px; padding-bottom:10px; font-weight:bolder; font-size:12px; font-family:Verdana; } |
|
もうちょっとフラッシュバナーと本文を詰めたいので、
左例の赤字を0ピクセルにする。 |
h1 {
margin:0px; padding-top:0px; padding-bottom:0px; font-weight:bolder; font-size:12px; font-family:Verdana; } |
|
以上で、トップバナーがフラッシュのスッキリしたブログになったのではないでしょうか。
|