Gun☆Ryu's Template

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

スポンサーサイト

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

▲top.  -.  -.

“gr-SkySeaCloud” 移転

テンプレート公開用ブログに移転。
以前公開していたブログからのリンクと
以前公開していたUTFのリンクは後ほど削除します。

gr-SkySeaCloud
gr-SkySeaCloud.jpg

  • 公開日:2007年04月27日(公開中)
  • 公開先: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 ⇒ こちらを参照
  • コンセプト:

    素材配布されている「空色地図」さんの「■雫の蒼■ -流れ落ちる雫の色と音-」という作品からイマジネーションを膨らませました。

  • 規 約:
    1. テンプレートと素材の再配布や2次配布の禁止
    2. テンプレートの改版と修正の禁止 (修正の必要があれば、問合せしてください)
    3. 素材のみの利用や抽出、および再配布/2次配布/加工の禁止
    4. 素材配布元およびテンプレート作成元の著作権表記とリンクの削除禁止
    5. テンプレートに関しての技術的質問を、素材配布元に行なうこと禁止

  • 注 記(※):
    1. 規約遵守の上、JUGEMでのみのご利用となります。
    2. ご利用の方は、この記事にコメントお願いします。
    3. 更新履歴は「続きを読む」で確認してください。
    4. 素材配布元の「空色地図」さんのご好意により、UTFでの配布許可いただきました

素材をお借りした「空色地図」さんへ感謝。
更新履歴:

・2007/07/04:Recommend(おすすめ)の折り畳み不完全を修正

・2007/07/03:独自メニュー追加と全項目折り畳み対応、デコメ対応、banner追加

・2007/06/18:公開用Blog(ここ)へ移動

・2007/06/12:URLを修正

・2007/05/18:空色地図さまご好意により、UTF公開

・2007/05/02:一時公開中止(2007/05/01修正内容は、再開後の反映予定)

・2007/05/01:ブログタイトル画像領域、固定(画像下部が切れるのを回避)

・2007/04/28:新規作成

▲top.  comments(21).  trackbacks(2).

スポンサーサイト

▲top.  -.  -.

:: Comment ::

name: しん
date: 2008/02/14 12:13 PM
はじめまして。
テンプレートgr-SkySeaCloudを使わせていただいております。
テンプレートHTMLおよびCSSの修正を行おうとしたところ、規約
「 2.改版と修正の禁止 (修正の必要があれば、問合せしてください)」
を読み、少し疑問に思う点がありますので質問させてください。

たとえば
・自分のブログで使用しているテンプレートを微調整(font-sizeやpaddingの
 値を変更するのみ)し、自分のブログにのみ適用する
というのは行っても良いのでしょうか?

修正の禁止、というのは完全に自分のブログのみの利用の場合も入るのでしょうか?
お手数をおかけしますが、ご回答のほどよろしくお願いいたします。
name: AA子
date: 2007/10/22 12:10 AM
ありがとうございました。
良く分かりました。これからも使わせて頂きますね^^
name: Gun☆Ryu@管理人
date: 2007/10/21 11:26 PM
AA子 さん

テンプレご利用&コメント、ありがとうございます。
お尋ねの件、OKです。


3点目は「Links」に表示されていたもののことで
「Sponsored」の広告のことではないですよね?
無料プランの場合、「Sponsored」の広告は削除できませんので・・・


4点目は、HTMLの編集フォームで以下の部分を探してください。

<div class="entry_category">category:{category_name}</div>

探しだした部分をベースに、説明します。
方法としては2つお好きな方を選んでください。

(1).ベース部分を修正して以下のようにする

<div class="entry_category">category:{category_name}&nbsp;author:{user_name}</div>

(2).ベース部分の下に、以下のように1行追加する。

<div class="entry_category">category:{category_name}</div>
<div class="entry_category">author:{user_name}</div>


わかりづらかったら、また聞いてください。
これからもよろしくお願いします。
name: AA子
date: 2007/10/20 11:27 AM
こんにちは。初めまして。
こちらのgr-SkySeaCloudを使わせていただこうと思っております。
その際、4点ほど変更して使わせていただきたいと思っております。ご了承頂ければ幸いです。
変更点は以下です。
尚、1点目〜3点目は方法は分かりますが、4点目については方法が分からないので教えて頂ければ幸いです。
1点目、タイトル部の縦の長さを長くしたい
2点目、左サイドの日記部の下部分にトップへのリンクを追加したい
3点目、右サイド部の「ブログで簡単HP」のリンクを削除したい
4点目、二人でブログを共有している為、投稿者名を表示できるようにしたい。

お願い致します。
name: Gun☆Ryu@管理人
date: 2007/10/07 10:43 AM
maria♪ さん

お返事遅くなってすいません。
お問い合わせの件、WindowsXPの
InternetExplorer−Ver6で再現を確認しました。

原因は、トラックバックのリスト内で
サイドバーの幅を越える以下のURLの表示があるためのようです。
===========================
http://10tyouget.livedoor.biz/index20.rdf
===========================
ちなみにその他のブラウザでは・・・
・InternetExplorer−Ver7、Firefox−Ver2、Safari−βVer3では
 サイドバーの幅を越えて表示されるが、落ち込みはない。
・Opera−Ver9.2では
 サイドバーの幅の中で折り返し表示され、落ち込みはない。
となりました。


管理者メニューのテンプレート編集から
CSS編集フォームに以下の記述を追加してみてください。


div#tblist.sideitem_text {
word-break: break-all;
}


URL以外の内容にも影響があるかもしれないので
だめなら追加した記述をそのまま消して戻してください。

※このコメント投稿時点で、他のテンプレに変更されて
いるようですので、もし気が向いたら試してみてください。
また、結果を教えていただけると助かります。

よろしくお願いします。
name: maria♪
date: 2007/09/02 11:38 AM
すみません、訂正です。
後々よく見てみたら、◇を押すと全てのリスト(カレンダーから全て)がブログの記事の一番下に行ってしまうようです。
トラックバック以外は上手く展開されるのですが・・・よろしくお願いします。
name: maria♪
date: 2007/09/01 12:24 AM
この度テンプレートをお借りしました。
トラックバックリストのところの◇をクリックするとリストが表示されず、全ての項目が消えてしまいます。
何かエラーなんでしょうか?
よろしくお願いします。
name: Gun☆Ryu@管理人
date: 2007/08/21 11:56 PM
紫陽花 さん

枠線が消える対策であるCSSへの追加は、
/* ************************************** END of CSS ****/
の前後どちらでも問題ないです。
(/* ** END of CSS ***/は私が加えた単なるコメントなので)
こちらはうまく治ったようですね。

エラー対策であるHTMLの位置変えは、
本文の表示がかなり遅くなってしまったようですね・・・
暫定対処なので、根本的な原因・解決策がわかったら
またお知らせします。
それまでは、今の状態でお許しください。。。
name: 紫陽花
date: 2007/08/21 12:47 PM
いろいろとありがとうございました。

HTMLの編集とCSSへの追加無事出来ました。
ちなみにCSSの追加は

/* ************************************************ END of CSS ****/

のあとに追加しましたが大丈夫でしょうか?
その前に追加したほうが良かったのでしょうか?

しかし、これで解消できたみたいなので大丈夫かなぁと思っていますが。

いろいろとありがとうございました。
name: Gun☆Ryu@管理人
date: 2007/08/21 6:19 AM
紫陽花 さん(その3)

■エラーの出る件■
>>手順解説<<
(その2)からの続き


記事部分の記述(=エントリー部)と
右サイドの記述(=右サイド部)をごっそり入替える
とは・・・

前述のコードのイメージを参考に“実際のHTML編集フォームで”
[エントリー部]の塊をザックリ切り取り
[右サイド部]と[フッター部]の間に貼り付けするのです。

コードのイメージを省略して示すと以下のようになります。



<!--=================================
  レイアウトブロック
==================================-->
<div id="wrapper_body">


  <!--=================================
    タイトル部
  ==================================-->
  <!-- BEGIN title -->
  <div id="header">

  ・・・(省略)・・・

  </div>
  <!-- END title -->


  <!--=================================
    右サイド部
  ==================================-->
  <div id="side">
  <!-- Side in -->
  <div class="side_in">

  ・・・(省略)・・・

  </div>
  <!--/ Side in /-->
  </div>


  <!--=================================
    エントリー部
  ==================================-->
  <div id="main">
  <div class="main_in">

  ・・・(省略)・・・

  </div>
  </div>



  <!--=================================
    フッター部
  ==================================-->
  <!-- コピーライト -->
  <div id="footer">{copyright}</div>
  <!--/ コピーライト /-->


</div>




不安でしたら、現在のHTMLの内容をまるごとコピーし
メモ帳などに貼り付け、名前をつけて保存するなどし
バックアップをとってから作業されるといいかと思います。

ちょっと大変ですが・・・(笑)
よろしければ試してみてください。
name: Gun☆Ryu@管理人
date: 2007/08/21 6:16 AM
紫陽花 さん(その2)

■エラーの出る件■

原因ははっきりと解明出来ていないのですが
いろいろ試すうちに解消方法だけは見つけました。

HTML編集フォームで、
記事部分の記述(=エントリー部)と
右サイドの記述(=右サイド部)をごっそり入替える方法です。

※配置はCSSで決定しているので、HTMLで入替えても
 ブラウザでの表示上は何も変化ありません。


>>手順解説<<

お使いのテンプレ“gr-SkySeaCloud”のHTML構造は
[レイアウトブロック]という塊の中に
[タイトル部]
[エントリー部]
[右サイド部]
[フッター部]
という4つの塊が上記の順番で内包されていて
各々更に細かい記述を内包する作りになっています。

コードを省略して示すと以下のように捉えられます。



<!--=================================
  レイアウトブロック
==================================-->
<div id="wrapper_body">


  <!--=================================
    タイトル部
  ==================================-->
  <!-- BEGIN title -->
  <div id="header">

  ・・・(省略)・・・

  </div>
  <!-- END title -->


  <!--=================================
    エントリー部
  ==================================-->
  <div id="main">
  <div class="main_in">

  ・・・(省略)・・・

  </div>
  </div>


  <!--=================================
    右サイド部
  ==================================-->
  <div id="side">
  <!-- Side in -->
  <div class="side_in">

  ・・・(省略)・・・

  </div>
  <!--/ Side in /-->
  </div>



  <!--=================================
    フッター部
  ==================================-->
  <!-- コピーライト -->
  <div id="footer">{copyright}</div>
  <!--/ コピーライト /-->


</div>



(その3へ続く)
name: Gun☆Ryu@管理人
date: 2007/08/21 5:38 AM
紫陽花 さん(その1)

■枠線の出ない件■

枠線の出ない部分、こちらでもIE6で確認しました。
(IE7/Firefox2.0.0.6/Opera9.23では大丈夫でした。)

表示がされないというより不安定になっているようですね。
マウスがあたるとチラッと枠線が出たり・・・(^^ゞ

IE6では枠線を表示するborderという属性の処理に
ある条件でバグがあるようなので、CSS編集フォームで
以下のコードをそのままコピーして一番最後に追加後
「テンプレートを更新」してみてください。



/* ************************************************
* fix border bug for IE6
* ************************************************ */
* html #header ,
* html .entry h2 ,
* html .entry_title ,
* html .entry_date ,
* html .entry_category ,
* html .entry_body ,
* html .entry_more ,
* html .entry_state ,
* html .entry_pf_state ,
* html .tb ,
* html .side_in h2 {
height: 0;
}



紫陽花さんのブログでも解消されるか確証がないので
お試しになったら、結果を連絡いただけますか?
よろしくお願いします。

name: 紫陽花
date: 2007/08/20 1:22 PM
早速のお返事ありがとうございました。

枠線が出ないのは記事の続きの部分の左右の縦線です。
(24時間の記事)
コメント欄も他のコメント欄はそれぞれのコメントが点線枠で囲まれてるんですけど、24時間のところだけ囲まれてないんです。

もしかしたらブラウザに問題があるのかもしれませんが・・・^^;

お手数ですが再度ご確認をお願いいたします。
name: Gun☆Ryu@管理人
date: 2007/08/20 12:46 PM
紫陽花 さん

続きを読むを開くとページ表示エラーがでる件ですが・・・
枠線の色を変えたことも文章の長さも関係ないですよ。
問題ないです。(^−^)


まず、枠線の出る部分についてですが
色を変える前と変わってないように見えますが・・・?
両サイドの枠線が表示されないとは、記事部分ですか?
コメント部分以下であれば、もともと両サイドに枠線はないです。

参考までに、私のもうひとつのブログが同じテンプレですので
比べてみるとわかりやすいかもしれません。


次に、「エラー」がでるのは・・・確認できました。
これは、サイドにある「つなビィ」がエラーになるようです。
・つなビィのプログラムがいけないのか?
・つなビィのプログラムにテンプレの方で悪影響を与えてるのか?
可能性は2つありますが、特定できないので
申し訳ないですが・・・もう少し時間ください。
(つなビィの方にも問い合わせしてみましたので・・・)

今のところ・・・
ブラウザがInternetExplorerだとエラー出て、
私の使っているFirefoxというのだと問題ないようです。
name: 紫陽花
date: 2007/08/20 8:44 AM
管理人様

テンプレの変更方法ありがとうございました。
フリースペースの変更無事出来ました。

また別でもう一つ質問なんですが、続きを読むを開くとページ表示エラーがでて両サイドの枠線が表示されないのですが。
枠線の色を変えさせていただいたのですがそれが影響することはあるんでしょうか?
またコメント欄の枠線も真ん中だけ表示されないんです。
一番上の記事だけなので、文章の長さとかも影響するのかわからないのですが。

何度もの質問で申し訳ありませんがご教示の程よろしくお願いいたします。
name: Gun☆Ryu@管理人
date: 2007/08/19 12:43 AM
さくらこ さん

先ほど、ブログ拝見しました。
テンプレ修正、うまくいったようですね?

写真サイズなどは、こちらが勝手に気をまわして
縮小サイズにしてしまいましたが
さくらこさんの希望通りになりましたでしょうか?

また何かあれば、遠慮なくどうぞ。
最後になりましたが、テンプレつかっていただいて
ありがとうございます。
name: さくらこ
date: 2007/08/18 4:10 PM
早速のお返事とご指摘ありがとうございました。
name: Gun☆Ryu@管理人
date: 2007/08/18 10:13 AM
さくらこ さん

はじめまして。
ご質問の件ですが・・・
テンプレートは“gr-SkySeaCloud”の前提でお話します。

HTML編集フォームで
<!-- Recommend -->から<!-- /Recommend/ -->までを見つけて
以下のコードを、まるごとコピーしてザックリ置き換えちゃってください。



<!-- Recommend -->
<a name="p_recommend"></a>
<h2 id="recommendname">Recommend</h2>
<div id="recommendlist">
<!-- BEGIN amazon -->
<div class="sideitem_center">
<a href="{amazon_url}" target="_blank"><img src="{amazon_ImageUrlSmall}"></a>
<br />
<a href="{amazon_url}" target="_blank">{amazon_ProductName}</a>
</div>
<!-- END amazon -->
<div class="sideitem_center">
<a href="http://www.rohto.co.jp/mentholatum/lips/campaign/" target="_blank"><img src="http://lerayonvert.img.jugem.jp/20070712_290725.jpg" width="200" height="135" alt="20070603" /></a><br />
<br />
<a href="http://www.rohto.co.jp/mentholatum/lips/tenshi/index.htm" target="_blank"><img src="http://lerayonvert.img.jugem.jp/20070730_300600.jpg" width="200" height="252" alt="20070603" /></a><br />
<br />
<img src="http://lerayonvert.img.jugem.jp/20070623_279851.jpg" width="200" height="150" alt="20070603" />
</div>
</div>
<!-- /Recommend/ -->



上のコードについて補足説明

1. 写真のサイズはサイドバーの幅(=200px)に納まるように指定してます。
  縦横の比率は元の写真と同じです。

2. <!-- BEGIN amazon -->から<!-- END amazon -->までは
  管理者ページ「オススメ商品の編集」で「商品リスト(サイド)」に
  何も商品がリストアップされていなければ、何も表示されないので
  残しておいて大丈夫です。


それと、実は・・・
さくらこさんの示してくれたコードは、以下の2点で文法間違えがありました。

1. 開始タグがないのに終了タグがたくさんある
   ⇒</div>は、開始の<div>と必ずセットで挟み込まないといけない。

2. <img>タグの使い方に誤りがある
   ⇒「alt20070603"」という記述、正しくは「alt="20070603"」
   ⇒<img>タグは、「<img src= ・・・(省略)・・・ />」と
    末尾を「/>」で閉じる特別なものなので「</img>」はいらない。

ご質問にお答えするため、現在のブログも拝見したのですが
今、表示できているのは・・・たまたま・・・みたいなんです。。。(^^ゞ


また何かあれば、遠慮なくどうぞ。
name: さくらこ
date: 2007/08/18 1:35 AM
初めまして
テンプレを使わせていただくにあたり、
右サイドのRecommend のところに画像を3つ続けて
表示したいのですが、現在使用のHTMLを貼り付けると
二つ目からの画像がページの最下部しかも左に表示されてしまい、Recommend 以下の項目 携帯・検索・その他 も左下に表示されてしまいます。
どのようにすればよいでしょうか。
よろしくアドバイスお願い致します。

なお、下記のようなHTMLを記入しています。
<Recommend>
</div>
<a href="http://www.rohto.co.jp/mentholatum/lips/campaign/" target="_blank"><img src="http://lerayonvert.img.jugem.jp/20070712_290725.jpg"
width="224"height="158" alt20070603" class="pict"/></a>
</img></div>
</div>
<a href="http://www.rohto.co.jp/mentholatum/lips/tenshi/index.htm" target="_blank"><img src="http://lerayonvert.img.jugem.jp/20070730_300600.jpg"
width="168"height="230" alt20070603" class="pict"/></a>
</img></div>
<img src="http://lerayonvert.img.jugem.jp/20070623_279851.jpg"
width="224"height="168" alt20070603" class="pict"/>
</img></div>

<Recommend>
name: Gun☆Ryu@管理人
date: 2007/08/17 8:43 PM
紫陽花 さん

はじめまして
テンプレご利用ありがとうございます。

ご質問の件ですが
HTML編集フォームでフリースペースの記述箇所を探してください。

その記述内から
「class="sideitem_center"」という部分を
「class="sideitem_text"」と書き換えていただくと
中央寄せから左寄せに変わります。


以下はフリースペース1の例です。

■修正前(中央寄せ)
<!-- BEGIN freespace1 -->
<a name="p_freespace1"></a>
<h2 id="freespace1name">{freespace_title1}</h2>
<div class="sideitem_center" id="freespace1list">{freespace_contents1}</div>
<!-- END freespace1 -->

■修正後(左寄せ)・・・下から2行目を一部修正するだけ
<!-- BEGIN freespace1 -->
<a name="p_freespace1"></a>
<h2 id="freespace1name">{freespace_title1}</h2>
<div class="sideitem_text" id="freespace1list">{freespace_contents1}</div>
<!-- END freespace1 -->


いかかですか?
これでどうでしょうか?

何かあれば、遠慮なくどうぞ。
これからもよろしくお願いします。
name: 紫陽花
date: 2007/08/17 4:34 PM
初めまして。
テンプレを使わせていただいているのですが、フリースペースの一項目だけ左寄せにしたいんですが、その場合の設定方法はどのようにすればいいのでしょうか?

もしよろしければ教えていただきたいのですが。
よろしくお願いいたします。
この記事へコメントする

      

:: Trackback ::

from: Gun☆Ryu's Template
date: 2007/06/21 4:26 AM
今日は、Gun☆Ryuが掲げた「規約」についてちょっと説明。(笑) 公開したテンプレートの内 gr-Ducky、gr-Piggy、gr-SkySeaCloud の3つには 下記のような(かなり厳しい)規約をつけました。 規 約: テンプレートと素材の再配布や2次配布の禁止 テンプレ
from: Gun☆Ryu's Template
date: 2007/06/21 4:25 AM
修正内容: ブログ・タイトル下の説明(description)の行数が増えると ナビゲーション部やブログ本文に重なってしまうのを修正しました。 気になる人は、最新をダウンロードしてください。 お手数おかけしますが、よろしくお願いします。 ・gr-Ducky ⇒ ダ
この記事へのトラックバック
<< “gr-LikeEditor” 移設home“gr-Piggy” 移転 >>