FC2blog@共有 [配布id:010101] テンプレ専用ガイド
ALT-DESIGN@clip制作のテンプレ専用のサポートガイド

No.38 / Template: [ 0902 ] ,
Date: 2012/12/14(Fri) 03:36 [修正]
  • 初心者の方はデフォルトのまま使って下さい。
  • カスタマイズはHTML/CSSの知識のある方のみ行って下さい。
  • 旧版はエラーが出る場合がありますので、最新のテンプレをDLして修正して下さい。
  • 失敗しても元に戻れる様に、必ずテンプレートを[複製]してから修正して下さい。
  • タグミスによってテンプレが修復困難になった場合でも、制作者は一切の責任は負いません。

  • このテンプレートは背景色を自由に変更する事が出来ます。

    変更方法は「(1). HTMLの編集」1カ所、「(2). スタイルシートの編集」1カ所
    合わせて2カ所を変える必要があります。

    「HTMLの編集」「CSSの編集」どちらから修正しても構いません。
    ここでは、例として「HTMLの編集」から修正します。


    ※ver5.1.2から、FLASHの背景色の変更が簡単になりました!
    従来ではタグの中から2カ所探して変更しなくてはいけなかったのに対し、新しい方法では1カ所設定すれば済むようになりました。※必ず【ver5.1.2以上】の最新版から修正して下さい。5.1.1以下では下記の目印がありません。


    ●(1).[HTMLの編集]でFLASHの背景を変える。
    まず「(1). HTMLの編集」でトップFLASHの背景を変更します。
    「HTMLの編集」で、上部にあるソースから下記のコードを探して下さい。

    <!--FLASHタイトルここから--> ・・・〜ここまで-->を探します。

    ■[HTMLの編集] 上部から探して下記のタグを1カ所修正(【ver5.1.2以上】に下記の目印有)

    <!--↓FLASHタイトルここから↓-->
    <SCRIPT language="JavaScript">

    <!--
    bgc= new Array();


    // --------[設定ここから]--------


    // 背景色 (コード6桁を編集)
    bgc = "#FFFFFF";



    // --------[設定ここまで]--------

    ・以下タグ省略




    記述している#FFFFFF のカラーコードが初期値(白)です。

    この#6桁を好きなカラーコード変更して下さい。
    前後にある記号を削除するとエラーで表示されませんのでご注意下さい。
    6桁のコードの先頭は必ず # を記述して下さい。エラーで表示されなくなります。

    ○ #FFFFFF;
    × FFFFFF;

    ■サンプルコード[HTMLの編集] 背景色を #FDF386 にした場合
    <!--↓FLASHタイトルここから↓-->
    <SCRIPT language="JavaScript">
    <!--
    bgc= new Array();


    // --------[設定ここから]--------


    // 背景色 (コード6桁を編集)
    bgc = "#fdf386";



    // --------[設定ここまで]--------

    document.write("<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0' width='200' height='120'>");
    document.write("<PARAM NAME=movie VALUE='http://blog-imgs-29.fc2.com/0/1/0/010101/clock031.swf'>");
    document.write('<param name=quality value=high>');
    document.write("<param name='BGCOLOR' value='"+bgc+"'>");
    document.write("<embed src='http://blog-imgs-29.fc2.com/0/1/0/010101/clock031.swf' quality=high pluginspage='http://www.macromedia.com/jp/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width='200' height='120' bgcolor='"+bgc+"'>");
    document.write("</embed>");
    document.write("</object>");
    //-->
    </SCRIPT>
    <!--↑FLASHタイトルここまで↑-->




    ●(2).「スタイルシートの編集」でページ全体の背景を変える。

    今度は「スタイルシートの編集」でページ全体の背景を変更します。
    引き続き、[テンプレートの編集]から、[スタイルシートの編集]のソースへ移動します。

    [CSSの編集]の上部にある、/* 背景色設定ここから */ …〜ここまで */にある、カラーコード6桁を修正します。

    ■[スタイルシートの編集] 上部から探して下記のタグを編集

    /* ==========背景設定ここから========== */



    /* ブログ背景色 */

    body{
    background-color: #FFFFFF; /* ←コード6桁を変更 */
    }


    /*タイトルバック(背景画像は530*200推奨) */

    #main {
    background-image: url(http://blog-imgs-29.fc2.com/0/1/0/010101/0902_tbg001.gif);
    }



    /* ==========背景設定ここまで========== */



    #FFFFFF を好きなカラーコードに変更して下さい。
    6桁のコードの先頭は必ず # を記述して下さい。

    ○ #FFFFFF;
    × FFFFFF;


    また、タイトル画像を自分で用意した画像に張り替えたい場合は、

    #main {
    background-image: url(http://blog-imgs-29.fc2.com/0/1/0/010101/0902_tbg001.gif);
    }


    URLのタグをフルパスで指定して下さい。
    (W)530px * (H)200px 推奨です。



    ■サンプルコード[スタイルシートの編集] 背景色を #FDF386 にした場合
    /* ==========背景設定ここから========== */



    /* ブログ背景色 */

    body{
    background-color: #FDF386; /* ←コード6桁を変更 */
    }


    /*タイトルバック(背景画像は530*200推奨) */

    #main {
    background-image: url(http://blog-imgs-29.fc2.com/0/1/0/010101/0902_tbg001.gif);
    }



    /* ==========背景設定ここまで========== */


    カスタマイズ完成見本


- WL-News Ver1.02 -