読者です 読者をやめる 読者になる 読者になる

元派遣プログラマの自称技術系ブログです。雑記とか自作のオープンソースプロジェクトの話とか。
Javaとか組込とかできます。お仕事ください。

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

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

グローバルリンクリスト

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



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

各部名称

まずは部品の名前から

(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


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


最低限設定しなければならないのは、リンク先と画像の設定
イメージのURLリンク先のURLです。
設定はこんな感じで…。タイトルはとりあえず空にして置いてください。


次に、リングコマンドを設置するページの文字コードを設定します。
とりあえず作ってみるだけならここは適当でかまいません。


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


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


ダブルクリックすると…


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


これで完成!なら、作成ページにあるブログパーツ用のタグをコピーして、ブログやWebページにペーストすれば設置が出来ます。
少し(いやだいぶ?)長い文字列ですが、Bodyタグの下辺りに挿入してください。