はんが甲子園応援時計公開！

はんが甲子園をご存知でしょうか？
正式名は全国高等学校版画選手権大会。2001年から毎年佐渡島で行っています。

なんと、佐渡出身なのに、知らなかったのです。商工会のお手伝いをして始めて知ったしだいです。

地域振興・文化振興のためのイベントなのですが、今後佐渡市からの補助は減って行くでしょう。また、どれくらいの効果があるのかも不明です。

そこで、少しでも認知度をアップさせるために時計を作って見たわけです。

【ブログパーツの貼り付け方】
・FC2ブログの方は数日後に[プラグインの設定]＞[共有プラグイン追加]から追加できると思います。本日共有プラグインの申請をしました。テキストエリアに以下のソースを貼り付けてもOKです。
・FC2ブログ以外の方は、サイドバーのフリーエリアとかテキストエリアとか、自由に使える場所に以下のソースを貼り付けてください。

<div align="center">
	<div style="width:100%;overflow:hidden;">
		<script type="text/javascript" src="http://hanga.aisyo.org/fla/hanga_clock.php?w=150&h=150"></script>
		<noscript>
			<a href="http://hanga.aisyo.org/" target="_blank" title="はんが甲子園">はんが甲子園</a>
		</noscript>
	</div>
</div>

ブラウザによってプラグインの挙動が違う

10/9　投稿を変更しました。IE7でもゴーストが出ていました。
--------------------------------------------------------------
Macユーザーの方から、アナログ時計を設置すると、本文中にリンクのようなゴーストが出ると言う指摘がありました。

このゴーストは、メインのホームページへのリンクです。
IE6・IE7で確認しました。IE8・Firefox3.5.3では問題ありません。

プラグインにホームページへのリンクは付けたいが、リンクの文字が出ると邪魔。そこで、範囲外に文字を表示すればいい・・・と考えたわけです。
ところが、ブラウザによっては想定外の動作をしていたわけです。

IE6・IE7ではこんな感じです。


以下は、「アナログ時計（黒）」のプラグインのソースです。
ソースの赤い部分の解釈が、ブラウザによって違うために起きるようです。

<div align="center">
	<div style="width:100%;overflow:hidden;">
		<script type="text/javascript" src="http://mog.sado-is.com/analog_classic4/analog_classic4.php?w=&answer1&h=&answer2"></script>
		<div style="font-size:40%;position : relative;top : 100px;left : 300px;">
			<a href="http://sado-is.com/ " target="_blank" title="佐渡島の次平">佐渡島の次平</a>
		</div>
	</div>
</div>

回避方法は以下の3通りです。
１：left : 300px を　left : 9999px に変更する
　　 ・・・・・はるか右側に表示されるので、画面に出てきません。ちょっと強引！
2：リンクの部分を消してしまう
　　・・・・・作成者としては悲しい
3：以下のソースと入れ替える
　　・・・・・noscriptを使った裏業ですね。最近はこれにしています。

<div align="center"> 
	<div style="width:100%;overflow:hidden;"> 
		<script type="text/javascript" src="http://mog.sado-is.com/analog_classic4/analog_classic4.php?w=&answer1&h=&answer2"></script>
		<noscript>
			<a href="http://sado-is.com/" target="_blank" title="佐渡島の次平">佐渡島の次平</a> 
		</noscript>
	</div>
</div>

お気に入りの画像をアナログ時計の背景に

公開している クラシック・アナログ時計は、いろいろなテーマに合うように、透過でシンプルにしていたのですが、時計自体の背景にお気に入りの画像を入れて、オリジナルの時計を作ることもできます。

こんな感じです。

背景の画像はヘスティアさんのブログ ヘスティアのパステル☆ライフ からお借りしました。 タイトルは「希望の丘　グリーン」です。トップページに、いい感じの作品が並んでいます。

以下のソースを「プラグインの設定」からフリーエリアに貼り付けてください。
赤の部分が変更箇所です。

画像の場所：src= から始まる部分です。http://で始まる画像のurlを指定してください。リンクする画像のサイズは縦横200px前後がいい感じです。

画像のサイズ：width= height= の部分です。サイドバー幅に合わせてください。180くらいなら大丈夫だと思います。サイズの大きな画像でもここで指定した大きさで表示されます。

時計の位置：top : left : の部分です。top は画像の上辺からの距離です。left は画像の左辺からの距離です。時計の左上の角が指定した位置に来ます。

時計の大きさ：w= h= の部分です。50～150くらいがいい感じです。

注意：画像の無断使用は厳禁です。オリジナル画像かフリー素材、または、作成者に許可をもらったものを使用してください。
サンプルソース内の画像はオリジナルです。そのまま使用してもかまいません。

黒バージョンのソース

<div align="center"> 
   <table style="margin:0;padding:0;"> 
      <tr>
         <td style="border:0;margin:0;padding:0;"> 
            <div style="position : relative;overflow:hidden;"> 
               <img style="border:0;margin:0;padding:0;" src="http://blog-imgs-33.fc2.com/s/e/k/sekizaki/sample01.jpg" width="180" height="180"> 
               <div style="position :absolute;top : 20px;left : 65px;"> 
                  <script type="text/javascript" src="http://mog.sado-is.com/analog_classic4/analog_classic4.php?w=90&h=90"></script> 
                  <noscript>
                     <a href="http://sado-is.com/" target="_blank" title="佐渡島の次平">佐渡島の次平</a> 
                  </noscript>
               </div>
            </div>
         </td>
      </tr>
   </table>
</div>

白バージョンのソース

<div align="center">         
   <table style="margin:0;padding:0;">         
      <tr>
         <td style="border:0;margin:0;padding:0;">         
            <div style="position : relative;overflow:hidden;">         
               <img style="border:0;margin:0;padding:0;" src="http://blog-imgs-33.fc2.com/s/e/k/sekizaki/sample01.jpg" width="180" height="180">        
               <div style="position :absolute;top : 18px;left : 18px;">
                  <script type="text/javascript" src="http://mog.sado-is.com/analog_classic3/analog_classic3.php"></script>         
                  <script type="text/javascript" src="http://mog.sado-is.com/analog_classic3/analog_classic_a.js"></script>
                  <script type="text/javascript">swfshow(140,140,0);</script>         
                  <noscript>
                     <a href="http://sado-is.com/" target="_blank" title="佐渡島の次平">佐渡島の次平</a>         
                  </noscript>
               </div>
            </div>
         </td>
      </tr>
   </table>
</div>

時計をヘッダーに表示する方法

クラシック・アナログ時計をヘッダに配置する方法です。

メインのページで説明しています。
こんな感じになります。

盆と葬式が重なって・・・

盆と葬式2件が重なって、超ハードスケジュール。
とりあえずテーマは戻しておくことにしました。