Gun☆Ryu's Template

JUGEMで使えるブログ・テンプレート
User Template File を公開しています

スポンサーサイト

一定期間更新がないため広告を表示しています

▲top.  -.  -.

“gr-ImgChanger” 公開

新しい(?)テンプレート作成しました。
先日公開した“gr-Cumulus”の改造版です。
・ジャンル/カラム/色 ⇒ シンプル/1カラム/白
・サンプル ⇒ こちら
・ダウンロード ⇒ こちら

ブログタイトルの画像を、自分の好きな複数の画像
ブログ表示のタイミングで切り替えるようにしたものです。

表示更新(再表示)のタイミングでも切り替わります・・・
ただし、ブラウザのキャッシュが効いて、同じ画像が再表示される場合があります。


横600px × 縦225px の画像を自分で何枚かご用意のうえ
配布テンプレートのなかに記述してある説明にしたがってご利用ください。
(※そのままだと、Gun☆Ryuが用意したサンプル画像のままで切り替わります。)

・実際のテンプレート使用例 ⇒ こちら
・画像の差換え手順を「続きを読む」に載せました。
 配布テンプレートのなかの説明とあわせてお読みください。


gr-ImgChanger
gr-ImgChanger.jpg

  • 公開日:2007年06月30日(公開中)
  • 公開先:JUGEM−UserTemplateFile
  • 最終更新日:2007年07月21日-05時
  • 動作確認:icon_os_windows.gif + icon_browser_firefox.gif icon_browser_explorer.gif icon_browser_opera.gif   ( icon_os_mac.gif icon_os_linux.gif ・icon_browser_netscape.gif icon_browser_mozilla.gif icon_browser_safari.gif は未確認)
  • HTMLチェック:W3C Markup Validation Service ⇒ こちらを参照
  • CSSチェック:W3C CSS Validation Service ⇒ こちらを参照
  • コンセプト:

    ブログタイトルの画像を、自分の好きな“複数の画像”で切り替えられるようにしました。レイアウトは、先日公開した“gr-Cumulus”の改造版です。

  • 規 約:
    1. テンプレートやスクリプトの再配布や2次配布の禁止
    2. 再配布や2次配布目的の、改版と修正禁止 (自分のブログでのみ、自己責任で修正可)

  • 注 記(※):
    1. 規約遵守の上、JUGEMでのみのご利用となります。
    2. ご利用の方は、この記事にコメントお願いします。
    3. 更新履歴は「続きを読む」で確認してください。

更新履歴:

・2007/07/21:スペルミス修正

・2007/07/03:独自メニュー追加、デコメ対応、banner追加

・2007/06/30:新規作成



画像差換え手順:

-- INDEX --

1.背景画像を差換える場合

2.背景画像を増やしたり、減らしたい場合

3.文字色を変える場合

-----------


1.背景画像を差換える場合

(1).JUGEMの管理ページトップから[テンプレートの編集]⇒[テンプレート選択]とたどり、テンプレート一覧から“gr-ImgChanger”を編集状態にする。(下図のような画面)

テンプレート編集画面

(2).[CSS編集フォーム]の中から以下の記述を探し、自分の用意した画像のURLに書き換える。(赤文字部分)


#wrapper_body {

    ・・・(省略)・・・
    
    /*【カスタマイズ部分】1/6                               * 
     * 背景画像変更スクリプト無効の場合、初期表示される画像 * 
     * ★ 各自用意した画像に書き換え必須 (600×225px) ★ */
    background-image:   url("http://img-cdn.jg.jugem.jp/36b/544733/20070630_64993.jpg");
    /*                                           ▲ここまで */

    ・・・(省略)・・・

}

(3).[HTML編集フォーム]の中から以下の記述を探し、自分の用意した画像のURLに書き換える。(赤文字部分) これが切替表示される画像のリストになります。 書き換えは、buff[0]の行から順に行ないます。画像が4枚以上の場合や3枚未満の場合は、「2.背景画像を増やしたり、減らしたい場合」を参考に行数を調整してください。


    <script type="text/javascript">
    <!--
        var buff = new Array();

        //背景画像のリスト【カスタマイズ部分】
        buff[0] = 'http://img-cdn.jg.jugem.jp/36b/544733/20070630_64994.jpg';
        buff[1] = 'http://img-cdn.jg.jugem.jp/36b/544733/20070630_64995.jpg';
        buff[2] = 'http://img-cdn.jg.jugem.jp/36b/544733/20070630_64996.jpg';

        //ランダム選択
        var cnt = Math.floor(Math.random() * buff.length);

        //切替実行
        imgChanger('wrapper_body', buff[cnt]);
    // -->
    </script>

(4).[テンプレートを更新する]ボタンを押す。

(5).通常はこれだけでOKです。

※(2)で指定した画像は、切替のためのJavaScriptが無効なときのためのものです。

※(2)で指定した画像は、表示の最初にチラッと見えるだけです。

※(2)で指定した画像を、(3)のURLにも指定すれば切替後に表示される画像のひとつになります。



2.背景画像を増やしたり、減らしたい場合

(1).JUGEMの管理ページトップから[テンプレートの編集]⇒[テンプレート選択]とたどり、テンプレート一覧から“gr-ImgChanger”を編集状態にする。

(2).増やす場合:[HTML編集フォーム]の中から以下の記述を探し、赤文字部分のように行を追加し追加したい画像のURLを増やす。

(3).減らす場合:[HTML編集フォーム]の中から以下の記述を探し、⇒の行を不要な数だけ削除してください。


    <script type="text/javascript">
    <!--
        var buff = new Array();

        //背景画像のリスト【カスタマイズ部分】
        buff[0] = 'http://img-cdn.jg.jugem.jp/36b/544733/20070630_64994.jpg';
⇒      buff[1] = 'http://img-cdn.jg.jugem.jp/36b/544733/20070630_64995.jpg';
⇒      buff[2] = 'http://img-cdn.jg.jugem.jp/36b/544733/20070630_64996.jpg';
⇒      buff[3] = 'http://img-cdn.jg.jugem.jp/36b/544733/20070630_64996.jpg';

        //ランダム選択
        var cnt = Math.floor(Math.random() * buff.length);

        //切替実行
        imgChanger('wrapper_body', buff[cnt]);
    // -->
    </script>

(4).[テンプレートを更新する]ボタンを押す。

※画像を増やす場合も減らす場合も、青文字部分が“0(ゼロ)”からの連番になるようにしてください。



3.文字色を変える場合

(1).JUGEMの管理ページトップから[テンプレートの編集]⇒[テンプレート選択]とたどり、テンプレート一覧から“gr-ImgChanger”を編集状態にする。

(2).[HTML編集フォーム]の中から変更したい文字の該当部分を探し、赤文字部分を16進コードで書き換える。

(3).[テンプレートを更新する]ボタンを押す。

※色の16進コード指定がわからない人は、こちらが参考になります。

■メニューの文字色■


.linkmenu {

    ・・・(省略)・・・

    /*【カスタマイズ部分】2/6                               */
    /* 背景画像との組み合わせで変える文字色(メニュー部分) */
    color:              #ffffff;
    /*                                           ▲ここまで */
}


/*【カスタマイズ部分】3/6                               */
/* 背景画像との組み合わせで変える文字色(メニュー部分) */
.linkmenu a:link    { color: #3366cc; text-decoration: none; }
.linkmenu a:visited { color: #3366cc; text-decoration: none; }
.linkmenu a:active  { color: #3366cc; text-decoration: none; }
.linkmenu a:hover   {
    background-color:   #3366cc;
    color:              #ffffff;
    text-decoration:    none;
}
/*                                           ▲ここまで */

■ブログタイトルの文字色■


h1 {
    ・・・(省略)・・・
    
    /*【カスタマイズ部分】4/6                               */
    /* 背景画像との組み合わせで変える文字色(タイトル部分) */
    color:              #ffffff;
    /*                                           ▲ここまで */
}


/*【カスタマイズ部分】5/6                               */
/* 背景画像との組み合わせで変える文字色(タイトル部分) */
h1 a:link    { color: #ffffff; text-decoration: none; }
h1 a:visited { color: #ffffff; text-decoration: none; }
h1 a:active  { color: #ffffff; text-decoration: none; }
h1 a:hover   {
    background-color:   #ffffff;
    color:              #3366cc;
    text-decoration:    none;
}
/*                                           ▲ここまで */

■ブログ説明文の文字色■


.description
{  
    ・・・(省略)・・・

    /*【カスタマイズ部分】6/6                               */
    /* 背景画像との組み合わせで変える文字色(説明文 部分)  */
    color:              #ffffff;
    /*                                           ▲ここまで */
}

▲top.  comments(3).  trackbacks(0).

スポンサーサイト

▲top.  -.  -.

:: Comment ::

name: やんちゃん
date: 2007/07/05 12:40 PM
返信ありがとうございます。
昨日質問した者です。なぜか名前が消えてましたね。

とても親切で解りやすいご説明をありがとうございます。
初心者なので不安でしたが、ご丁寧な説明のお陰で、無事変更する事ができました!
本当にありがとうございました。
またこれからも素敵なテンプレートを作ってくださいね。
期待してます☆
またお世話になると思いますが、どうぞよろしくお願いします。
name: Gun☆Ryu@管理人
date: 2007/07/05 1:36 AM
??? さん

はじめまして。
テンプレート、興味をもっていただいてありがとうございます。

お問合せの件、この記事の「続きを読む」に手順を載せてみました。
ちょっとクドイかなとも思いますが、よかったらご一読ください。参考になるとよいのですが。。。

また何かあれば、遠慮なくどうぞ。
(返答が遅れる場合もありますが、ご容赦を・・・)

これからもよろしくお願いします。
name: 
date: 2007/07/04 8:43 PM
初めまして。
こちらのテンプレートがとても気に入り、使用させていただこうと思っています。
画像を自分の好きなものに変えられるとあるので、早速数枚変更してみたのですが、ページを開いた時は変わっていますが、すぐに今までの画像に戻ってしまいます。
こういったテンプレートの編集は今まで一度もやったことのない初心者なので、自分のやり方が悪いのですが、お手数ですが教えて頂けないかと思いコメントしてしまいました。
よろしくお願い致します。
この記事へコメントする

      

:: Trackback ::

この記事へのトラックバック
<< ブログのフォントサイズ変更home公開テンプレートのランキング!? >>