Hatena::ブログ(Diary)

nyatla@Hatena::Diary

2008-02-19

グローバルリンクリストの作り方講座1 基本編

23:44 | グローバルリンクリストの作り方講座1 基本編を含むブックマーク

とりあえずリングコマンドを動かすための説明です。



グローバルリンクリスト

グローバルリンクリストのブログパーツは、NavigationRingにも設置されている、ページジャンプ機能を持ったリングコマンドです。


f:id:nyatla:20080219234413j:image


このリングコマンドはほぼ標準の設定で作られたページジャンプ機能のみの簡単なものですが、より詳細な設定をにより、リングコマンドの見栄えや動作をカスタマイズする事もできます。



各部名称

まずは部品の名前から

f:id:nyatla:20080220000449j:image

(1)タイトル表示文
アイコン画像毎に設定することが出来る表示文です。表示文にはテキスト以外にhtmlフラグメント(innerHTML)を設定できます。
(2)タイトルDIVパネル
表示位置のモードと、DIVパネルの見栄えを決めるCSSを設定できます。
(3)カーソル画像
選択しているアイコン画像の上に表示される画像です。表示モードと表示画像の選択ができます。
(4)アイコン画像
ページリンクのアイコン画像です。表示画像と、アイコン画像の見栄えを決めるCSSを指定できます。


とりあえずリングコマンドを作ってみる

↓こちらのページを別ウインドウで開いてください。

http://nyatla.jp/ws/nr/index.php?c=wp&v=0.2&page=editxml&name=links

f:id:nyatla:20080220202223p:image


このページの赤枠の部分に、リングコマンドの画像とリンク先を設定していきます。試しにGoogleニコニコ動画Amazonへ飛べるリングコマンドを作ってみましょう。


最低限設定しなければならないのは、リンク先と画像の設定

イメージのURLリンク先のURLです。

設定はこんな感じで…。タイトルはとりあえず空にして置いてください。

f:id:nyatla:20080220203917p:image


次に、リングコマンドを設置するページの文字コードを設定します。

とりあえず作ってみるだけならここは適当でかまいません。

f:id:nyatla:20080220211006p:image


設定できたら、ページの下のほうにある動きをプレビューボタンを押します。

f:id:nyatla:20080220204347p:image


プレビュー用のウインドウがポップアップしますので、そこで動作を確認してください。真っ白で何も内容に見えますが(実際何もない)、ページをダブルクリックするとリングコマンドが出てきます。

f:id:nyatla:20080220204956p:image


ダブルクリックすると…

f:id:nyatla:20080220205306p:image


出てきました。これは実際に回したりすることが出来ます。


これで完成!なら、作成ページにあるブログパーツ用のタグをコピーして、ブログやWebページにペーストすれば設置が出来ます。

少し(いやだいぶ?)長い文字列ですが、Bodyタグの下辺りに挿入してください。

f:id:nyatla:20080220211311p:image

トラックバック - http://d.hatena.ne.jp/nyatla/20080219/1203432254
リンク元