design:border

キーワードの共有

さてそれでは、キーワードの共有を使ったサンプルです。

ブログを運営されている人は、トラックバックURLに、
http://www.odekake.biz/trackback/?i=定禅寺ジャズフェスティバル2006
コピペして、トラックバックして見てください。

livedoorblog 等一部のブログでは、日本語を入力すると、入力エラーになる事があります。その時は、
http://www.odekake.biz/trackback/?i=%C4%EA%C1%B5%BB%FB%A5%B8%A5%E3
%A5%BA%A5%D5%A5%A7%A5%B9%A5%C6%A5%A3%A5%D0%A5%EB2006
urlエンコードした値を使ってください。

Sample 解説

「定禅寺ジャズフェスティバル2006」というキーワードでトラックバックを送ってみる

定禅寺ジャズフェスティバル2006 というキーワードを指定して、ブログから、トラックバックを送信するようにセットしてみよう。

定禅寺ジャズフェスティバル2006は、公式な行事だし、このキーワードを送ってくれた全ての人が、ブログでどんな発言をしているのかを、集める事。みんなの定禅寺ジャズフェスティバルというキーワードを共有するから、キーワードの共有ということになります。

htmlやブログへの貼り付けコードの作成

下のフォームでスクリプトは作成できる。

キーワードを入力という項目に 定禅寺ジャズフェスティバル2006と入力してみよう。

注意数字が半角か全角で違うものになるので注意:空白もあると同じものとはみなされません。、、、お手数をかけます。

JavaScriptの作成
キーワードを入力:
必要ならメールアドレス(または任意の値でもいいです):
出力文字コード:

それ以外のところは空欄でかまわない。意味は後半で説明します

メールアドレスの欄は、共有キーワードでは使用しません

トラックバック受信用スクリプト

<script type="text/javascript" src="http://www.odekake.biz/trackback/?i=%C4%EA%C1%B5%BB%FB
%A5%B8%A5%E3%A5%BA%A5%D5%A5%A7%A5%B9%A5%C6%A5%A3%A5%D0 %A5%EB2006&u=&e=u"></script>

トラックバック送信用トラックバックURL

http://www.odekake.biz/trackback/?i=%C4%EA%C1%B5%BB%FB
%A5%B8%A5%E3%A5%BA%A5%D5%A5%A7%A5%B9%A5%C6%A5%A3%A 5%D0%A5%EB2006&u=

このコードをブログ等に貼り付けると、下のようになります。

でも、文字化けしていますよね。コレじゃなんだか解らないので、そのページに合わせた文字コードに調整する必要があるのです。このページは、EUC-JPという文字コードで書いているので、それにあわせてみましょう。 先ほどのフォームで文字コードをEUC-JPにして、ボタンを押して、コードを作り直しましょう。

どうです。正しく表示されるようになったと思います。

このサンプルのココログのブログにも、上の項目と同じものが表示されています。コレは同じコードをココログにも貼り付けたのでそのように表示されています。

gooブログに貼り付けてみると、貼り付けたコードと似ているような似ていないような、コードが表示されます。ココログのように内容が表示されない場合は、別の方法でリンクを張りましょう。

htmlリンクとして表示することも出来ます。

&lt;a href="http://www.odekake.biz/trackback/htm.php?i=%C4%E A%C1%B5%BB%FB%A5%B8%A5%E3%A5%BA%A5%D5%A5%A7%A5%B9 %A5%C6%A5%A3%A5%D0%A5%EB2006&u=&e=u">html</a>
htm.phpの部分を追加して、リンク先を、ちょっと改造してください。

このように、同じキーワードで、いろいろなブログがつながることが出来ます。それをキーワードの共有と読んでいます。

スタイル指定

#samplestyle{
    background:#000;
    color:#eee;
    width:476px;
    background-image:url("../images/curvb.jpg");
    background-position:left bottom;
    background-repeat:no-repeat;
}
#samplestyle img{
    margin:0;
    padding:0;
}
#samplestyle .trackback a{
    color:#FF9900;
    background:inherit;
    text-decoration:none;
}
#samplestyle .trackback ul{
    color:#ccc;
    background:inherit;
    list-style:inside;
}

#samplestyle .trackback li{
    color:#ccc;
    background:inherit;
}
#samplestyle .trackback{
    margin: 0 20px;
    padding-bottom:100px;
}

.trackback というクラスは、受信するjavascriptに定義されています。 javascriptで受信するhtmlは概略以下の構造になります。

<div class="trackback">
<ul>
<li>各項目</li>.....
</ul>
</div>
スタイルシートを作成できる方は、デザインのカスタマイズも可能ですから、お試しください。

さてそれでは、ページトップのhtmlソースを表示して、このページはおしまいです。

htmlソース

<div id="samplestyle">
<img name="jazfes" src="../images/curv.jpg" width="476" height="60" border="0" id="curv" alt="curv.jpg:design" />
<img name="jazfes" src="../images/jazfes.jpg" width="476" height="60" border="0" id="jazfes" alt="jazfes.jpg:design" />
<script type="text/javascript" src="http://www.odekake.biz/trackback/?i=%C4%EA
%C1%B5%BB%FB%A5%B8%A5%E3%A5%BA%A5%D5%A5%A7
%A5%B9%A5%C6%A5%A3%A5%D0%A5%EB2006&u=&e=e"></script>
</div>

next:キーワードの独占

design:border