音声ブラウザ対応ページへコンテンツエリアへログイン
 

NetCommons Test and Study Site

　　Product By K.Nagai
 
 
サイト内検索
 

ブログパーツを入れてみる

無料配布のパーツがやたらに沢山ある。NetCommonsの中に、４個の異なる方法で入れてみた。
どのようにNetCommonsで表示したか
HPに貼り付けるブログのHTMLソースには、大まかに２つのタイプがある。
１つ目は、Inline Flame　または、Inline Flame + 追加Script
２つ目は、JavaScriptで記述されたファイルにリンクする。このタイプが圧倒的に多い。
 

　Ａ　天気予報

HTMLソースは以下のように、Inline Frame　+ 追加Script の形式となっている。A 天気予報は、モジュール｢iframe｣のURLに下記の赤字表記部分を入れて表示している。但し、｢天気予報｣と｢天気予報コム｣の文字とリンクが表示されない。

<DIV style="font-size:12px;text-align:center;">
　　<IFRAME src="http://link.tenki-yoho.com/img.php?all,acrweb" width=150 height=180 scrolling=NO frameborder=0 marginwidth=0 marginheight=0>
　　　　</IFRAME>
<br>
<A href="http://www.tenki-yoho.com/" target=_blank>天気予報</A>
<A href="http://www.tenki-yoho.com/" target=_blank>天気予報コム</A>
-</DIV>
 

　B　外国為替レート

外貨取引fx
 
このタイプもＡと同じ　Inline Frame　+ 追加Script の形式となっている。
<iframe width="160px" height="243px" marginwidth="0" marginheight="0" hspace="0" vspace="0" scrolling="no" frameborder="0" src="http://ck2-blogger.jp/cgi-bin/blogparts/ck2-blogger.jp/rateSide/rateSide_view.pl?color=7&size=160&kado=-kado&pairs=USDJPY,EURJPY,GBPJPY,AUDJPY,NZDJPY,CADJPY,CHFJPY,TRYJPY">
</iframe>
<div style="margin:0px; padding: 0px; border: 0px;">
<a href="http://www.munehiro.jp/" target="_blank" style="margin:0px; padding: 0px;">
<img src="http://ck2-blogger.jp/blogparts/ck2-blogger.jp/rateSide/img/kei160-foot7-1-kado.gif" alt="外貨投資　ＦＸ" border="0" style="margin:0px; padding: 0px;"></a>
<a href="http://ck2-blogger.jp/" target="_blank" style="margin:0px; padding: 0px;">
<img src="http://ck2-blogger.jp/blogparts/ck2-blogger.jp/rateSide/img/kei160-foot7-2-kado.gif" alt="fx" border="0" style="margin:0px; padding: 0px;"></a>
</div>
Ｂの表示方法は、2個のモジュールを利用している。
１．Inline FrameモジュールのURLに上記のソースコード赤字部分を入れている。
２．上の１．だけだと、下部の枠（powerd by ・・・）が表示されないので、お知らせモジュールに青字の部分をＨＴＭＬ編集で挿入する。
これだけでは、上と下が別モジュールなので、モジュールの上下左右のマージン値を使い、上下左右がうまく連結するように調整する。
→　この方法でも表示出来るが、邪道か・・・　お薦め出来ません。
 

　Ｃ　リアルタイム市況

 
このタイプは、Inline Frame　だけの形式となっている。が、赤字のＵＲＬ部分以外に、別のHTMLがある。

<iframe scrolling="no" frameborder="0" style="width: 160px; height: 180px;" src="http://db.225225.jp/bp1.php?fw=160&cs=1" marginwidth="0" marginheight="0">
    &amp;amp;amp;lt;a href=http://ch225.com&amp;amp;amp;gt;Ch225 リアルタイム世界の株価指数情報&amp;amp;amp;lt;/a&amp;amp;amp;gt;
</iframe>

Ｃの表示方法は、お知らせモジュールにＨＴＭＬ編集で上記ソースをそのまま貼り付けたもの。
 

　D　週間天気予報

このタイプは、ブログパーツとして最も多い、JavaScriptを使っている。ソースは以下

<script type="text/javascript" src="http://n-de.jp/bp/wn/suzunari.js#wn_pos=4620">
</script><noscript>
<a href="http://n-de.jp/" title="中デザイン株式会社">中デザイン株式会社</a></noscript>

上記のScriptをNetCommonsには、簡単には入れられないので、別サイトまたはNetCommonsフォルダとは別のフォルダに、HTMLファイルを以下のように作成する。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>blogparts 天気予報</title>
</head>
<body>
<script type="text/javascript" src="http://n-de.jp/bp/wn/suzunari.js#wn_pos=4620">
</script><noscript>
<a href="http://n-de.jp/" title="中デザイン株式会社">中デザイン株式会社</a></noscript>
</body>
</html>

NetCommonsでは、iframeモジュールを入れ、URLを上記HTMLファイルとする方法。
 
デザイン＆メニューなど
 
JavaScript -- A--
 
JavaScript --B--
 
その他
 
Copyright(c) 2010 K.Nagai All Rights Reserved.