グリーンサイトライセンス設置マニュアル
はじめに・目次
この度はグリーンサイトライセンス（GSL）をご参加頂き誠にありがとうございます。
この資料ではGSLロゴを貴社ホームページに設置する方法をご説明させて頂きます。
設置する前に必ずお読み下さい。
1.GSLソースコードの取得
3.ASPサービス別のGSLロゴ設置方法
4.よくあるご質問とGSLロゴの紹介文
5.お問合せ先
1-1.ログインする
1-2.ログイン後ページ の操作
1-3.契約内容を確認
1-4.ソースダウンロードページでGSLソースコードを取得
・・・ P04
・・・ P05
・・・ P06
・・・ P07
2-1.貴社ホームページへのGSLロゴ設置の準備
2-2.GSLソースコードの設置方法（一般的なホームページ）
2-3.GSLソースコードの設置方法（ASPサービスを利用したホームページ）
2-4.貴社ホームページでのGSL表示を確認
・・・ P09
・・・ P10
・・・ P11
・・・ P12
・・・ P14
・・・ P15
・・・ P16
3-1.ショップサーブ2 （Eストアー）のGSLロゴ設置方法
3-2.カラーミーショップ！プロ（paperboy&co）のGSLロゴ設置方法①
3-3.カラーミーショップ！プロ（paperboy&co）のGSLロゴ設置方法②
・・・ P18
・・・ P19
・・・ P20
・・・ P21
・・・ P22
4-1.よくあるご質問①
4-2.よくあるご質問②
4-3.GSLロゴに紹介文を設置する方法について
4-4.GSLロゴに紹介文（画像テキスト）一覧
4-5.SSL環境下のサイトでのGSL設置方法について
2.貴社ホームページへのGSLロゴ設置
P03
P13
P17
P23
P08
1.GSLソースコードの取得
1-1.ログインする
1-2.ログイン後ページの操作
1-3.契約内容を確認
1-4.ソースダウンロードページでGSLソースコードを取得
・・・ P04
・・・ P05
・・・ P06
・・・ P07
GSLソースコードの取得
1
ログインする
【ログインページ】 https://www.gsl-co2.com/login/ GSLロゴを貴社ホームページに掲載するためにはGSL専用のソースコードを取得する必要があります。 ソースコードはGSL公式ホームページ（http://www.gsl-co2.com）のログイン後ページから取得できます。 まず始めにログインしてソースコードを取得するまでをご説明いたします。 【注意】マニュアルに掲載されている画面が実際の画面と異なる場合がございます。 実際の登録には問題ありませんのでご安心下さい。1-1
GSL公式サイト（http://www.gsl-co2.com）にアクセス してメニューにある「ログイン」をクリックします。 1 お申込み時にお客様がご登録した「グリーンID」 「グリーンパスワード」をご入力して下さい。 グリーンID・パスワードはGSLのお申込み時にお送りした メールにも記載されております。 2 グリーンID・パスワードの入力が完了しましたらログイン ボタンをクリックして下さい。 ※ログイン出来ない場合は、半角英数字であることを確認 して再度入力してください。 3 ログイン出来ない場合や、グリーンID・パスワードを忘れ てしまった場合はこちらからID・パスワードの再発行を 申請してください。 登録したメールアドレスなどを入力して送信ボタンを クリックすると登録したメールアドレスにID・パスワード が送信されます。 4 1 2 3 4 GSLのお申込み時にお送りしたメールからでも ログインページに飛べます。 ５ ５ログインしていただくと、コントロールパネルが表示されます。（下記 画像左） ①を押していただくと、GSL設置方法についてのページが表示されます。（下記 画像右）
ログイン後ページの操作
1-2
【コントロールパネル】 https://www.gsl-co2.com/controlpanel/index.php ※ログイン後ページ GSLソースコードの取得は、ログイン後ページの 「GSLの設置はこちら」のページから行うことが できます。 「GSLの設置はこちら」ボタンを押して 移動してください。 1 1 2 GSLの設置はこちらを押していただくと、 GSL方法についてのページが表示されます。 GSLの設置は、中央下にある「ソースコードをダウンロー ドする」ボタンを押して移動してください。 ２ ※GSLの設置方法についてのページ 【コントロールパネル GSLロゴ設置】 https://www.gsl-co2.com/controlpanel/logo.php契約内容を確認
【ステータスが有効の場合】 契約内容が有効の場合は「ステータス」が「有効」に なっております。 契約内容（取得ドメイン・契約期間など）に間違いがない 事を確認したらピンク色の「GSLの設置はこちら」 ボタンをクリックして下さい。 【ステータスが無効の場合】 契約内容が無効の場合は「ステータス」が「無効」になっ ております。 ステータスが無効の場合はGSLソースコードの取得が出来 ません。下記のステータスの無効条件を確認してください。 契約内容の無効に心当たりがないお客様はお手数ですが GSL公式サイトのお問合せフォームよりお問合せ下さい。 【ステータスの無効条件】 ・契約期間を過ぎた場合 ・退会のお申込みをした場合 ・有料申し込みをされていて、入金がされていない場合 ・弊社側で有料申し込みの入金の確認が出来ていない場合 （入金から契約まではお時間がかかります） ・GSL利用規約のライセンスの失効事由に該当した場合 1 ログイン後のページではご登録頂いたホームページの契約情報が表示されております。GSLソースコードを取得する前に契約内容などをご確認下さい。 ①は契約内容が有効の場合、または、無効の場合の表示内容になります。 【コントロールパネル ライセンス一覧】 https://www.gsl-co2.com/controlpanel/licenselist.php 【注意】マニュアルに掲載されている画面が実際の画面と異なる場合がございます。 実際の登録には問題ありませんのでご安心下さい。1-3
1ソースダウンロードページでGSLソースコードを取得
【ソースダウンロードページ】 https://www.gsl-co2.com/controlpanel/個別URL ページにあるボックスに記載されている英数字の文章が GSL専用のソースコードになります。 表示イメージを参照し、パターン1～12からホームページに 表示したいGSLソースコードをお選びください。 GSLソースコードをメモ帳などにコピーしてください。 コピーしたソースコードは後ほど利用しますので、 そのまま保存してください。 これでGSLソースコードの取得は完了しました。次の ステップからは貴社ホームページにGSL（ソースコード）を 掲載する方法をご説明いたします。 1 ソースダウンロードページではGSLソースコードが掲載されております。 このGSLソースコードを貴社ホームページに挿入することでGSLが掲載されます。1-4
<table border="0"> <tr><td width="65" align="left"> <script language="JavaScript" type="text/javascript" src=“https://gsl-co2.com/mark/?●●●"></script> </td><td align="left"> このWEBサイトは<a href="http://www.gsl-co2.com/" target="_blank">自然エネルギー</a>普及に貢献して います。 </td></tr> </table>※●●●にご登録いただいたサイトURLに
変更頂ければご利用頂けます。
コピーしたGSLソースコード
12.貴社ホームページへのGSLロゴ設置
2-1.貴社ホームページへのGSLロゴ設置の準備
2-2.GSLソースコードの設置方法（一般的なホームページ）
2-3.GSLソースコードの設置方法（ASPサービスを利用したホームページ）
2-4.貴社ホームページでのGSL表示を確認
・・・ P08
・・・ P09
・・・ P10
・・・ P11
貴社ホームページへのGSLロゴ設置
2
貴社ホームページへのGSLロゴ設置の準備
ホームページへの設置方法には貴社ホームページの仕様によって設置方法がことなります。一般的には以下の2つのタイプがございます。 ・一般的なホームページ ・・・ HTMLにより制作されたホームページで、ファイル転送ソフト（FTPなど）を利用してHTMLを編集するホームページ ・ASPサービスを利用したホームページ ・・・ ASP提供企業と契約し、WEBブラウザ（インターネット）からページの編集をするホームページ ダウンロード index.html 一般的なホームページの場合は、まずGSLを掲載したい ページのHTMLをダウンロードします。 ダウンロードしたHTMLをテキスト（メモ帳）などで開き ます。 ※GSLは登録したドメイン（URL）内であればいくつでも 掲載可能です。 1 ASPサービスを利用したWEBサイトの場合は、まずASP管 理画面にログインし、ページ（デザイン）の編集ページに 移動します。 【代表的なASPサービス】 ASPとは、WEBブラウザ（インターネット）からホーム ページが編集できる機能をいいます。以下はASPサービス を提供している代表的な企業になります。 2 ファイル転送ソフト（FTP） GSLを設置したいHTML ASPログイン画面 ASP管理画面TOP ログイン 1 2 ・楽天 ・Yahoo! ・エキサイト ・ライブドア ・FC2 ・nifty ・livedoor ・goo ・Eストアー ・サイバーエージェント ・Seesaa ・paperboy&co ・ＮＴＴぷらら ・NTTコミュニケーションズ ・NECビッグローブ【一般的なWEBサイトの場合】
【ASPサービスを利用したホームページの場合】
2-1
GSLソースコードの設置方法（一般的なホームページ）
ここでは2-1（P08）で説明した「一般的なホームページ」の場合のGSL専用ソースコードの設置方法をご説明いたします。 ダウンロードしたHTMLをテキスト（メモ帳など）で開き ます。 テキストで開くとこのページを構成するソースが表示され ます。 その中からお客様がGSLを置きたいと思うスペースに取得 したGSLソースコードを貼り付けて（コピー&ペースト）下 さい。 設置前に下記にある「設置時の注意事項」をご確認下さい。 【設置時の注意事項】 ・登録したドメイン（URL）以外には掲載出来ません。 ・取得したソースコードを全て入力してください。 ・GSLソースコード内に別の文章（タグ）などを入力しな いで下さい。 1 コピーしたGSLソースコード GSLロゴを設置したいHTML（テキストで開いた状態） GSLを設置したいHTML 貼り付けが完了しましたら、 ページを保存して、再びファイ ル転送ソフトによってHTMLを アップロードして下さい。 これでGSLの設置は完了しまし た。次のステップではGSLの表 示の確認方法についてご説明い たします。 1 index.html2-2
<table border="0"> <tr><td><script language="JavaScript" type="text/javascript" src=“https://gsl-co2.com/mark/?●●●"></script> </td><td> このWEBサイトは<a href="http://www.gsl-co2.com/" target="_blank">自然エネルギー</a>普及に貢献しています。 </td></tr> </table> ※●●●にご登録いただいたサイトURLに変更頂ければご利用頂けます。
GSLソースコードの設置方法（ASPサービスを利用したホームページ）
ここでは2-1（P08）で説明した「ASPサービスを利用したWEBサイト」の場合のGSL専用ソースコードの設置方法をご説明いたします。 項目形式とはページデザインが全て項目によって区分けさ れており、HTML形式による編集が出来ない管理画面のこ とをいいます。 項目形式の場合は何でも書ける項目（自由項目欄）があり ます。ここにGSLソースコードを貼り付けてください。 2 ページ（デザイン）編集画面 HTML編集 1 ページ（デザイン）編集画面 自由項目欄（フリーエリア） 2 HTML形式とはページデザインがHTMLタグにより編集でき る管理画面のことをいいます。 HTML形式の場合はGSLを掲載したい箇所にGSLソースコー ドを貼り付けてください。 1 今回ご説明させていただきました「HTML形式」「項目形 式」以外の方法でページ編集を行なうASPもございます。 GSLの設置場所が分からない場合はASPサービスを提供し ている企業にお問合せ下さい。 貼り付けが完了しましたら、ページを保存して下さい。 これでGSLの設置は完了しました。次のステップではGSL の表示の確認方法についてご説明いたします。【HTML形式で編集する場合】
【項目形式で編集する場合】
2-3
貴社ホームページでのGSL表示を確認
貴社WEBサイト（例：パナソニックシステムネットワークス株式会社様） お客様が指定した場所に「GSLロゴマーク」が表示されて いるかを確認してください。 ロゴマークが表示されている場合はロゴマークをクリック してください。ポップアップ（小ウインドウ）で認証ペー ジが表示されます。 ※GSLロゴが表示されていない場合は「4-2よくあるご質問 （P19）」をご参照下さい。 ※表示されているが場所がずれている場合は、貴社の ホームページのHTML（CSS）が原因だと思われます。 ホームページに詳しい方に確認するか、設置場所を 変更してください。 1 GSLソースコードの貼り付けが完了しましたら、貴社ホームページでのGSLロゴの表示状況を確認します。 GSL認証ページが表示されれば設置完了です。 2 GSL認証ページ 3 エラーページ GSL認証ページが表示されればGSLロゴの設置完了です。 認証ページに表示されているお客様の情報を確認してくだ さい。 お客様の環境活動をアピールするためにもGSLロゴマーク の周りに環境活動へのアピール文を入れてください。 アピール文については「4-3.GSLロゴマークの設置につい て（P20）」をご参照下さい。 2 エラーページが表示された場合は「4-2よくあるご質問 （P19）」をご参照下さい。 32-4
1GSLロゴ
を
クリック
3.ASPサービス別のGSLロゴ設置方法
・・・ P13
・・・ P14
・・・ P15
3-1.ショップサーブ2 （Eストアー）のGSLロゴ設置方法
3-2.カラーミーショップ！プロ（paperboy&co）のGSLロゴ設置方法①
3-3.カラーミーショップ！プロ（paperboy&co）のGSLロゴ設置方法②
ASPサービス別のGSLロゴ設置方法
3
ショップサーブ2 （Eストアー）のGSLロゴ設置方法
ここでは代表的なASPサービスの１つである「ショップサーブ2（Eストア提供）」でのGSL専用ソースコードの設置方法をご説明いたします。 GSLソースコードを設置する前に、サイドバー用フリーエ リアにある「<>」ボタン（HTML表示切替）をクリックし ます。 これはHTMLタグを表示（入力）できるように設定するた めのボタンです。 2 サイドバー用フリーエリア 1 2 管理画面トップから「ページ編集」に移動します。 ページ編集画面のサイドメニューにある「サイドバー用フ リーエリア」をクリックします。 このページに並んでいる「サイドバー用フリーエリア 」に GSLソースコードを設置します。 1 3サイドバー用フリーエリアページ
サイドバー用フリーエリア 1
1 内容項目に1-4（P07）で取得したGSLソースコードを貼り 付け（設置）ます。 貼り付けが完了したら設定を保存するボタンをクリックし て下さい。 これでGSLロゴの設置は完了です。 3このようにGSLが
表示されます。
3-1
カラーミーショップ！プロ（paperboy&co）のGSLロゴ設置方法①
ここでは代表的なASPサービスの１つである「カラーミーショップ！プロ（paperboy&co提供）」でのGSL専用ソースコードの設置方法をご説明いたします。 テンプレートの中から現在使用しているテンプレート（赤 色になっているもの）の「デザイン設定」ボタンをクリッ クします。クリックすると「編集するテンプレートを選 択」ページに移動します。 2 管理画面トップから「お店をつくる」に移動します。 ページ編集画面のサイドメニューにある「デザイン設定を する」をクリックします。 1 トップの「HTML編集」デザイン設定ページ
編集するテンプレートを選択ページ
「編集するテンプレートを選択」ページに表示されている 一覧の中の「トップ」にある「HTML編集」ボタンをク リックします。（上級モードで編集） 3 1 2 33-2
カラーミーショップ！プロ（paperboy&co）のGSLロゴ設置方法②
貼り付けが完了したら設定を更新ボタンをクリックして下 さい。これでGSLの設置は完了です。 2テンプレート編集ページ
2 1 内容項目に1-4（P07）で取得したGSLソースコードを貼り 付け（設置）ます。 貼り付け場所は自由ですが最下部をお勧めいたします。 このページではサイドメニューの編集は出来ませんので GSL表示場所はページ真ん中部分になります。 1このようにGSLが
表示されます。
3-3
4.よくあるご質問とGSLロゴの紹介文
・・・ P18
・・・ P19
・・・ P20
・・・ P21
・・・ P22
4-1.よくあるご質問①
4-2.よくあるご質問②
4-3.GSLロゴに紹介文を設置する方法について
4-4.GSLロゴに紹介文（画像テキスト）一覧
4-5.SSL環境下のサイトでのGSL設置方法について
よくあるご質問とGSLロゴの紹介文
4
よくあるご質問①
GSLの設置において頂く質問を掲載させていただきました。GSLの表示が上手くいかない場合はこちらを参考にしてください。 こちらの内容を確認しても表示されない場合は「P23 お問合せ先」にご連絡下さい。 【考えられる原因と対応方法】 ・グリーンID・パスワードは半角英数字で入力しているか、スペースが入っている可能性がございます。 ・ログインページにある「パスワード再設定」からお申込みください。お申込時にご登録いただいたメールアドレスにグリーンID・パスワードを お送りいたします。 ログインできません。 【考えられる原因と対応方法】 ・弊社側で入金の確認が出来ていない可能性がございます。入金から契約まではお時間がかかります。 また、土日・祝日はGSL事務局がお休みになりますのでGSL発行も行なっておりません。 ・お申込み頂いたGSLの入金をしていない可能性がございます。（おためし版の場合は入金の必要はありません） ・契約期間が過ぎている可能性がございます。 ・退会のお申込みをしている可能性がございます。 契約ライセンス一覧ページで契約内容を確認したらステータスが「無効」になっています。 【考えられる原因と対応方法】 ・ホームページの設置場所はお客様のホームページになり、 それぞれ仕様が異なるため弊社側でお答えすることは難しいです。 バナーなどを設置した経験がある場合は、バナーと同じ場所などに設置してみてください。またホームページに詳しい方にご相談する事をお勧め致します。 ・ASPサービスをご利用しているお客様はASP提供企業にお問合せ下さい。 ホームページへのソースコードの設置場所がよく分かりません。4-1
よくあるご質問②
【考えられる原因と対応方法】 ・キャッシュの可能性がございます。お客様のWEBサイトを開いてからキーボードの「Ctrl＋F5」を同時に押してください。キャッシュがクリアされます。 キャッシュのクリアが分からない方は少々お待ちいただければ ・GSLソースコードを全て貼り付けていない可能性がございます。 ・GSLソースコード内にタグや文章を入れている可能性がございます。 GSLロゴマークが表示されません。 【考えられる原因と対応方法】 ・有効期限やステータスが無効になっている可能性がございます。GSL公式サイト（https://www.gsl-co2.com/login/）よりログインして契約内容を ご確認下さい。 ・GSLソースコードを全て貼り付けていない可能性がございます。 ・GSLソースコード内にタグや文章を入れている可能性がございます。 ・登録URLと違うURLに掲載している可能性がございます。テストURLなどにも登録できません。 ＜ASPサービスを利用したWEBサイトの場合＞ ・項目形式で登録した場合、その項目がHTMLタグを読み込まない部分である可能性がございます。 リンクやバナーを設置している箇所と同じ部分などにGSLソースコードを設置してみてください。 ・ASPサービス自体がJavaScript（ジャバスクリプト）を無効にしている可能性がございます。ASPを提供している企業にお問合せ下さい。 JavaScriptが無効の場合は今回ご説明した方法とは別の方法でGSLを設置する必要がございます。GSL事務局にお問合せ下さい。 GSLロゴマークをクリックするとエラーページが表示されます。 ・GSLロゴマーク・認証ページのサイズを変更することは出来ません。 ・GSLロゴマークは登録ホームページ内であればどのページでも何箇所でも設置可能です。 その他のご質問4-2
GSLロゴに紹介文を設置する方法について
GSLロゴマークに紹介文を入れてより環境活動をアピールするために、 ここではロゴの隣または下に簡単に 画像テキストを入れられる方法を ご紹介をさせていただきます。 ※ＦＡＱページではこちらからご確認ください→ http://www.gsl-co2.com/faq/gsl/gsl_18/ GSLロゴに紹介文（画像テキスト）を設置する方法 1 下記「ソースコード」の＃＃＃＃にお客様がGSLを取得した ドメイン（URL）に変更してください。 ドメイン（ＵＲＬ）は、お客様に発行させていただきました ID・パスワードで、GSL公式サイト（https://www.gsl-co2.com/login/）より ログインしていただき、「GSLの設置はこちら」から、ライセンス一覧の項目の「取得ドメイン」からご確認ください。 ログインはこちらから→ https://www.gsl-co2.com/login/4-3
<script type="text/javascript" src="https://gsl-co2.com/mark/?siteh=
＃＃＃＃
"
type="text/javascript"></script> <img src="http://www.gsl-co2.com/banner/
＊＊＊＊
"
width="
○○
" height="
△△
" alt="このWEBサイトはCO2削減に貢献しています。" />
2 下記「ソースコード」にある＊＊＊＊に設置したい画像※の ファイル名(半角英数字例：01.png)に変更してください。 「4－4」に画像の一覧がございますので、ご参考にしてください。 ※設置したい画像は、お客様に発行させていただきました ID・パスワードで GSL公式サイト（https://www.gsl-co2.com/login/）よりログインしていただき、 「各種素材データダウンロード」から 「設置サポートバナー」をダウンロードしてください。 3 下記「ソースコード」にある○○と△△に設置したい画像の ファイルのサイズをそれぞれ入力（半角数字）してください。
width=は横のサイズ height=縦のサイズ 例：01.png画像 width=60 height=75 「4－4」に画像ごとにサイズを記載しております。
4 設置したい箇所に変更した「ソースコード」を貼り付けて、アップロードしてください。
