10 | 2005/11 |  12

  1. 無料サーバー

search phpbb-phpbb-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

anything from here

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載！


Fc2ブログ投稿ブックマークレット別窓作業版

ブックマークレット関連エントリイ in this Blog

jQueryfyブックマークレットを改訂

jQueryを勉強する上で、Firebugは欠かせないツールです。そしてFirebugを利用して、任意のサイト上でjQueryを試すことの出来るjQueryfy.jsブックマークレット（Learning jQuery ：jQuerify Bookmarklet）は大変重宝する優れものです。

元々FirebugはFirefoxのアドオンとして開発されましたが、IEやOperaでも一部の機能を利用できるFirebug Liteが開発されている（Firebug Lite）ので、jQueryfy.jsブックマークレットもこれらのBrowserでも利用できます。

但し、オリジナルのjQueryfy.jsブックマークレットは名前空間を汚染する可能性があるので次のように無名関数を利用するものへと改訂して利用することにしました。

jQueryfy.js ブックマークレット改訂版（無名関数利用）のコードは以下の通り

javascript:(function(){var%20s=document.createElement('script');s.setAttribute('src',%20'http://code.jquery.com/jquery-latest.pack.js');document.getElementsByTagName('body')[0].appendChild(s);alert('using jQuery!');})();

jQueryブックマークレットの利用

jQueryブックマークレットを利用する前提として、Firebug（firefoxの場合）又はFirebug Lite（IE、Operaの場合）を組み込む必要があります。前者の場合にはFirefoxのアドオンとしてBrowser自身に組み込めばお仕舞いで、簡単にjQueryブックマークレットを利用することが出来ます。

しかし後者のFirebug Liteの場合には、jQueryブックマークレットを適用するサイトに対して、その都度Firebug Liteをインクルードする必要があります。

しかし、サイト毎に一々Firebug Liteをインクルードするのは面倒です。そこで、firebug liteをインクルードするブックマークレットを作成し、容易にインクルード出来るようにしたいと思っています。

時間切れにて＜・・・続く・・・＞

FC2ブックマークに追加

「リンクしてください」改訂版

関連エントリイ

スクリプト借用・改訂第２弾(苦笑)。

好みのブログやWebを見ているときに、それを自分のリンク集に追加したいと思うことはよくあることだ。そんな時に、Fc2ブログ上で簡単にそれを行えるブックマークレットを、或るFc2ブログで見つけ、ちょっと改訂して使わせてもらったことは先述した。

しかし、実は改訂はこれだけでは終わらなかったのである。


その貴重な知恵を拝借させてもらったエントリイにはトラックバックが付いており、それはよくお世話になっているdanielさんからのもので、早速トラックバック元を見させてもらった。するとそれは何と先の「リンクしましょう」に対する「リンクしてください」なるスクリプトを作成した、というものだった。

余りに見事な対比的コンテンツとスマートなスクリプトに感服し、早速それも学習したことは言うまでもない。

そしてまた、悪戦苦闘の末それも一部改訂して借用させていただくことにしたことも、火を見るより明らかなことである。(^_^;)

改訂は「リンクしましょう」と同じく（自分のリンク集に追加したいと思ったFc2ブログとは）別窓で、自分のリンク編集頁が開くようにするものである。

感謝！！danielさん！


さて、「悪戦苦闘した」と書いた。danielさんのスクリプトをそのまま貼り付ければどうって事もないのに、何を悪戦し、どうして苦闘したのか？

それは、何とか外部スクリプト化出来ないか、そう思ったことに全て起因していた。onclickしてリンク集に追加してもらうエレメントをボタンにしたくないこともあったが、それは何ら難しい改訂ではない。これまでずっとそうして来たのだが、スクリプトは出来れば全部外部化したい。そんな強い欲求があったのだ。

しかし、外部化したその途端にスクリプトは有効に作動しなくなってしまった。そしてその原因を究明するのに四苦八苦したのだ。

<%cookie_url>変数は、外部化されたスクリプト内にある場合には単なる文字列になってしまう。そのためスクリプトの意図は全く貫かれずに終わってしまう。───それが全てのそして唯一のエラー要因だった。そのことに気が付くまでに多くの時間を費やしてしまい、終わってみればいつもの不完全な知識の為せる技、宜なるかなの展開とは相成った次第。


以下に改訂後のスクリプトを記しておく。

FC2ブックマークに追加

この続きを読む

「リンクしましょう」ブックマークレットをちょこっと改訂

■関連エントリイ一覧■

  1. 「リンクしましょう」ブックマークレットをちょこっと改訂
  2. 「リンクしてください」改訂版
  3. 別窓作業のFc2ブログ投稿ブックマークレット

NoriyaさんのBlog「Primary Planet」の『リンクしましょう』エントリイに、お好みブログやWebサイトを、簡単にマイfc2ブログのリンク集に登録するブックマークレットが記されています。大変便利なので早速利用させてもらいました。

しかし、タブブラウザを使用していると別窓で作業出来た方がより便利なので、無断でちょっとだけ改訂させてもらいました。


Myリンク集に登録しようとしているサイトは開いたままにして、別窓でリンク登録画面を開くようにした、ただそれだけの改訂です。

Noriyaさん！貴重なスクリプトをありがとうございます。


なお、以下に改訂後のブックマークレットを記しておきます。

FC2ブックマークに追加

この続きを読む

リンク集を拡充

　Fc2が変数で提供しているリンク集は単に一次元のリストであり、分類が出来ないのでこれまで使用を疎ましく思っていた。
　しかし折角の変数を利用しない手もない。「このブログをリンク集に登録する」という簡単なスクリプトによるリンク追加機能も活かしたい。そこでリンク集の中の１つのジャンルとしてFc2リンク集を設置してみた。未だ登録数はごく僅かだが随時拡充していきたい。
FC2ブックマークに追加

訪問者履歴表示用のfootprintブロック変数が作動しない

　fc2ブログの訪問者リスト変数<!--footprint-->〜<!--/footprint-->はうまく作動しないようだ。
　phpbbにこのブロック変数に関するスレッドがあり、やりとりが行われているが、そこでも何も表示されないことが何人かの人から報告されている。
　まだテスト中ということか？
FC2ブックマークに追加

Entry 情報をTitle直下にも設置

　エントリイフッターはその名の通り、エントリイの最後部に付くのが一般的である。そこには当該エントリイ投稿日、属するカテゴリイ分類、付けられたコメント数、トラックバックの数等が表示される。そして、その情報はBrowsingする際に結構貴便利な情報を含んでいる。


　であるならば、貴重な情報（エントリイフッターに盛り込まれている情報）は、出来るだけ早い段階で閲覧者に開示されるべきだろう。またそのような情報なのだから頻繁に使う可能性があり、Titleの傍にエントリイナビを配置することは余りに当たり前すぎる(苦笑)。


　そんなわけで、エントリイナビ情報をTitle直下にも配置してみた。
　しかし、個別エントリイ表示以外のモードの時には、各エントリイの上下にナビ的な一行が挿入されるのは邪魔に感じるので、個別エントリイモードの時のみ上下にエントリ情報が表示されれば済むことだ。
　そこで個別エントリイ表示の時のみ上下にエントリイナビを設置することにした。


　効果の程や如何に？？？？？
FC2ブックマークに追加

Memo：拡張パン屑リスト(4)──Javascriptの続き──

clone階層メニューの次に、日別表示の際だけJavascriptによってコントロールする頁ナビについてまとめておく。（その他の場合の頁ナビは全てHTML内に各種のブログ変数を組み合わせて設置してある。）

「http：//username.blogx.fc2.com/blog-date-yyyymmdd.html」形式で表示する際には、大変便利な単変数<%sub_title>はそのままでは使えない。年月の表示しかしてくれないからだ。何らかの別の方策が必要となる。

そこでJavascriptで対応した。


2．　日付表示の場合の頁ナビについて

パン屑リスト本体のJavascriptについては、「Memo:拡張パン屑リスト(3)」にまとめた。

何をしたのか？

頁ナビには前後のエントリイへのリンクを置くことが一般的だ。アーカイブ表示の時、カテゴリイ表示の時、1つのエントリイ表示の時、それぞれに前後のエントリイ（あるいはエントリイ群）へのリンクがあるとブラウジングしやすい。

さて、カレンダーをクリックしてある特定の日のエントリイを見る場合には、「その前後」とは特別な意味をもっている。すなわち前後として参照すべきものは、直前直後のエントリイではなく、当該投稿日の直前、直後の投稿があった日でなければならない。

ところで、当該投稿日には複数のエントリイがあるかも知れないし、前後の投稿日は同月のものかも知れない。異なる月のものかも知れない。そして前後のエントリイ投稿日まで何日も空いているかも知れないし、連続して投稿されているかも知れない。つまり、今見ているエントリイ投稿日の前後の何時、投稿があったのかを知るのは容易ではない。

しかし、幸いにして当該月のエントリイ投稿日別情報は、出力されたHTML内のカレンダー部に存在している。そこでこのカレンダー内の必要箇所をJavascriptによって取得し、そこから日別表示モードの時の「前頁」ノードと「後頁」ノードを作成してHTMLに結果を返せばよい。───との到達点に達し、そしてそれに成功した。


但し、当該エントリイ投稿日が当該月の最初の投稿日の場合、あるいは最後の投稿日の場合には、前月の最後の投稿日情報、または翌月の最初の投稿日情報を取得しなければならないが、これは今見ているHTML情報には入っていない。このようなケースの時には、改めて前月又は翌月を描画させ、その結果のHTML文から、最後の投稿日または最初の投稿日を取得しなければならない。これもJavascriptによって可能ではなるが、かなり面倒だ。

投稿日別情報（・・・date-yyyymmdd.html）を別の形で取得することが出来るのかも知れないが、不明にして他の方法が分からない。


そこでこうしたケースにおいては、navi表示を特別に変更することにした。他のケースの場合には「以前の日へ」あるいは「以後の日へ」とあるナビ表示を、当該月の最初の投稿日あるいは最後の投稿日の場合には、「以前の月へ」あるいは「以後の月へ」と変更することにした。

多少強引ではあるが、日別表示モードから月別表示モードへと切り替えてしまうわけだ。

抑も、日別表示モードでブログを閲覧する需要はそれ程高いとは思われないし、このモードで閲覧していてその表示モードのままで、前後の日のエントリイを閲覧しようとする需要はさらに低いだろう。よって「敢えて」日別モードで閲覧した場合においては、両端の日付の場合のナビは、月別モードへと切り替わることの方がむしろ意味があるのではないか、と「都合良く」考え、納得させた次第である。

さて、こうして完成した日別表示モードの時の頁ナビスクリプトについて記しておく。


以上が完成した日別表示モード時のナビバーScriptである。カスタムObjectの利用、配列からの正規表現による文字列抽出は今回初めて挑戦したが、余り困難なことはなく成功した。


なお以下に、このScriptが完成する以前のバージョンのScriptを参考に掲載しておく。それは、前後の日付情報をうまくゲット出来なかった時点の簡易版である。

FC2ブックマークに追加

この続きを読む

秀丸エディター、秀丸メールが共にバージョンアップ

　11月17日には秀丸メール（旧称鶴亀メール）が、翌18日には秀丸エディターが、それぞれバージョンアップした。
　今回のバージョンアップで特に目を惹くのは、秀丸エディターにおける各種新規搭載機能である。(秀まるおのホームページ−秀丸エディタの紹介( 概要 ))　縦書きに始めて対応したこと、段組が可能となったこと、外部変換モジュールに対応したこと、ファイルヒストリーの強化、タブ機能の強化、メニュー表示のカスタマイズ等魅力満載だ。


　これらの中で個人的に歓迎したいのは、外部変換モジュール対応、ファイルヒストリーの強化、タブ機能の強化、メニューカスタマイズだ。外部変換モジュールはこれまでマクロで対応してきた作業をより高速に、より容易に行えるようになりそうなので、実際に使ってみてその効能を実感したいと思う。


　しかし、他のエディターではとっくに実現していた「縦書き機能」が今回搭載されたことに関して、一言言いたい。
　それは例えば文筆家等から歓迎されるのかも知れないが、私はどうしてそれが要望されているのか、ずっと以前から理解に苦しんできた。2つの目が横に並んでいるホモサピエンスにとって、横書きこそが生理的に自然であり、それ故に好ましいと思う。液晶ディスプレイになり少しはマシになったが、決して快適とは言えないディスプレイとの睨めっこを、縦書き文章で継続して行いたいとは、微塵も思わないのである。
FC2ブックマークに追加

ナビゲートにおける「次」と「前」

　Fc2ブログでは、「次」と「前」が特殊な使われ方をしていることについては、このブログを始めたときに誰でも気がつくことだろう。
　次のエントリイ、前のエントリイといえば「普通」は、時制的に考えて、前とは過去であり、次とは未来である。
　ところがFc2ブログのnextentryは一つ前の過去のエントリイであり、preventryは一つ後の未来のエントリイなのだ。<%nextpage_url> でも <%prevpage_url> でも同じ使い方をしている。preとは一つ後の未来の意味であり、nextとは一つ前の過去のことなのだ。
　それ故に共有テンプレート（最近は全くテンプレートそのものに関心がないので見ていないので、1年前の初期の頃のそれに限定されるかも知れないが）では、ナビゲーションバーはおかしなことになる。1つ前と思ったのに後になり、その逆も真なり、と言うわけだ。
　これは困った事と言わねばならない。どうしてこんな英語の使い方をしたのか確たる理由は分からないが、今更変数定義を変えるわけにも行かないだろうから、そのような仕様として諦めるしかないだろう。


　さて、そのような次第であるため、これまでナビゲーションバーでは過去が右に、未来が左に位置していた。
　しかし、幾何学において、あるいは工程表に於いて、あるいはまた日常的な様々なシーンで時制を表す場合の慣行において、「過去は左に、未来は右に」が常識である。
　従ってこれまでも気持ち悪かったのであるが放置していたこの問題を今日解決した。
　ナビバーの左右を入れ替えて、過去のエントリイへのリンクは左側に置き、未来は右にしたのである。
FC2ブックマークに追加

イベントをスクリプト内のObjectのPropertyとして記述する


　「コンテンツはHTMLで、レイアウトや装飾はCSSで」との思想には、コンテンツ以外のものを可能な限りHTMLから追い出す考え方が根底にある。
　さて、DOMを採用しているブラウザの場合、オブジェクトであるタグの属性値として、タグ内に各種のイベントを設定することが出来るが、この方法によるイベント処理もまた、コンテンツそのものではないのだから、純粋主義的なWEB作成思想からすれば排除すべきものとなる。
　この考え方は、イベントハンドラーをタグ内ではなく、可能な限りJavascript文の中で定義することを要求する。これにより、HTML文はよりすっきりすることになる。


　このブログに適用しているスクリプトに限らず、他のサイトで使っている場合も含めて、これまでは基本的にイベントハンドラーはタグ内に記述してきた。例えば、onmouseoutイベントはonmouseoverイベントとセットにして、タグ内に設置してきた。
　しかし、前者は後者があるが故に存在させているイベントであり、主従の関係にある。さすれば主たるonmouseoverイベントはタグ内に記述するとしても、その対となり、従たるonmouseoutイベントは、当該タグをJavascriptにおいてオブジェクトとして取得することさえ出来れば、そのオブジェクトの1つのプロパティとして、ハンドリングすればよいことになる。
　かくして、popup表示に関する、あるいは階層メニューに関するonmouseoutイベントは全てJavascript文内において参照するように変更した。


　しかし、これはHTML文純化の第一歩に過ぎない。次なる課題として、onmouseoverイベントもタグ内から排除し、ジャヴァスクリプト内でハンドリングする必要もあるし、そもそもid又はclass名によりタグ要素をスクリプト側で捕捉することが出来るから、極論すれば全てのイベントハンドラーをタグ内から排除して、スクリプト内に納めてしまうことも可能なはずなのだ。
　どこまで純化できるかチャレンジしてみるのも一興だ。
FC2ブックマークに追加

Memo：拡張パン屑リスト(3)──Javascript編──

次はJavascriptである。こちらは記すべき事が沢山ある。

パン屑リストではスクリプトを２箇所で使っている。1つはパン屑リストの最左部に配置したブラウジングメニューにおいて、もう1つはパン屑リストそのものではないが、「http://username.blogx.fc2.com/blog-date-yyyymmdd.html」形式で表示する際のナビゲーションバーにおいて、である。

これらのスクリプトに関しては関数起動用以外にはHTML文はない（厳密に言えば、スクリプトからHTML要素を操作するために、HTML文内にid名称を付けたから関数起動用以外にも若干のHTML文の追記が生じた）。全てスクリプト内で処理し、例えばclone階層メニューをHTML文に貼り付けるのも、DOMのappendChildメソッドを利用した。


1 ブラウジングメニューについて

既述の通り、この階層メニューはここで初めて作成し登場したものではない。既に存在している階層メニューのクローンである。実は今回初めて cloneNode メソッドに挑戦したのだが、そのままでは重複してしまうid名の変更策に手こずったものの、その便利さに改めて驚嘆した。


以下にブラウジングメニューの要点だけを抽出して記しておく。


1　HTML文

(1) 階層メニューのclone作成

ブラウザによるHTML文読み込み完了時点で（loadイベント発生時）、clone作成関数を起動してcloneを作成するようにした。併せて日付指定時における頁ナビ表示を変更する関数（dayModeCheck）も load イベントとして組み込んだ。なおこれらの関数は、共にindex エリアでは不要なので not_index エリアにおいてのみ起動するように制限した。


<body <!--not_index_area-->onload="makeGmenuClone();
dayModeCheck()"<!--/not_index_area-->>

(2) 作成されたclone階層メニューの表示と隠蔽

次にcloneの階層メニューを表示・隠蔽する基点として、パン屑リスト記述部の冒頭に次のHTML文を置いた。


<div id="breadCrumbsList"><span onmouseover="balloonPopup(this,'ここをクリックすると各種閲覧メニューを表示又は隠蔽します。')" onclick="gmenucloneOnOff(this);">▼ Browsing MENU</span> | <a href="<%url>">ホーム</a> ＞ ・・・

  • mouseover イベントで操作説明の吹き出しを表示させ、同時に引数this（子ノードに「▼Browsing MENU」というテキストノードを有するSPAN要素）のメソッドとして、mouseoutイベントを設定し、thisからマウスが離れたら吹き出しを消去するようにした。
  • click イベントで gmenucloneOnOff 関数を起動し、階層メニューの第一階層を表示／隠蔽させると共に、起点となったテキストノードも微妙にトグル変化させるようにした。

2　Javascript文

ブラウジングメニューに関するスクリプトは膨大にあるので、その全てについてここで触れることは適当ではない。要点のみを記す。

FC2ブックマークに追加

Memo：拡張パン屑リスト(2)──CSS編──

次に拡張パン屑リストのCSSについてまとめておく。

ここに、拡張パン屑リスト内に取り込んだブラウジングメニューのスタイルシートについても簡単に触れておく。

breadCrumbsList用スタイル設定
  • 四周に余白を設けるためのmargin設定は、Mac版IEのバグを考慮して短縮形による設定を避けた。
  • borderについては特に記すほどのことはない。
  • paddingは文字と四周の罫線の隙間を設定しただけである。
  • 背景色指定はタイトル部の太い帯と同一色とした。
clone階層メニュー用スタイル設定

階層メニュー用のスタイル設定は、cloneの本体である階層メニューに対して沢山設定してあるので、そのclass設定はそのままclone階層メニューにも適用できることになる。ここでは、本体の階層メニューに対するスタイル設定については割愛し、cloneの為に新たに設定したスタイル設定だけを記述した。

  • 当然絶対配置指定が必要である。
  • このエレメントのdisplay初期値は隠蔽とする。

以上でパン屑リストのCSSは完了である。リンク部分の表示をどうするかちょっと悩んだが、このブログ全体に適用している設定をそのまま引き継ぐことにしたので、特に定めなかった。

FC2ブックマークに追加

Memo：拡張パン屑リスト(1)──HTML編──

今後のために、Myパン屑リストのHTML、CSS及びJavascriptについて整理しておく。まずはHTMLから。

HTML文

  • まずパン屑リスト用の固有の not_index_area を設けた。我がテンプレートにおけるindex_area ではパン屑リストは必要ないからだ。設置位置は当然エントリイタイトルの上になる。このarea内に必要となるパン屑リストのためのHTML文を挿入した。
  • 次に適当なid名を持つdiv要素を設ける。CSSでパン屑リストのレイアウトと表情を設定するために必要となるからである。ここではパン屑リストを直訳してbreadCrumbsListとした。
  • 設置したbreadCrumbsList div要素の中に、パン屑リスト用のHTML文を挿入するだけでパン屑リストHTML文は完成だ。
  • 以上のHTML文を以下に記載しておく。（※　ここに括弧数字はこの場の説明用であって、HTML文内には不要である）

HTML文各行説明

  • (1)：ホームページ（＝トップページ）へのリンク
  • (2)：固定リンク表示（個別エントリイ表示）の場合のパン屑リスト
  • (3)：カテゴリイ表示の場合のパン屑リスト
  • (4)：月別/日別の場合のパン屑リスト
  • (5)：検索結果表示の場合のパン屑リスト
  • (6)：コメント修正画面の場合のパン屑リスト

謝辞

上記方法によるパン屑リストは、phpbbのこちらのやりとりにおけるpinoさんの回答をを全面的に援用させていただいた。pinoさんに感謝！！

追記

  • 　ブログブラウジング用の階層メニューは、HTML、CSS及びJavascriptが一体となって機能しているため、HTML文だけ記述しても何の意味もない。別途切り離して記述したい。
  • 　日別表示の場合には月別表示と異なるパン屑リストが必要となる。しかし、上記HTML文では日別表示には対応していないし、そもそもHTMLで日別表示の場合のパン屑リストを作ることは出来ないと判断した。そこで日別表示の場合には、Javascriptによって独自のパン屑リストに置き換えるようにしている。 　その内容も別途記述することにする。
FC2ブックマークに追加

拡張パン屑リスト

これまでスレッドテーマへの投稿を極力行ってきたが、スレッド自身がころころ変わるので面倒だ。今後は投稿はやめることとする。

さて、パン屑リストを作成した結果、その片隅にブログ全体を閲覧するメニューが欲しいとの思いを強くし、ここ数日格闘を続けてきた。それが今日やっと完成したので、記録しておきたい。

拡張パン屑リスト画像
拡張パン屑リスト画像

それは一般的に言われるJavascriptによる階層メニュー（プルダウンメニューとも呼ぶらしい）であるが、次のような大きな特徴を持っている。

その特徴とは既にこのブログ内に存在している階層メニューをDOMを使って複製（cloneNode）して配置したことである。

そのため、clone元のHTML文随所にちりばめられているid定義を、DOMによって異なるネーミングに変更してid重複を避ける、という荒技を使う必要に迫られ何とかそれを実装した。

Firefoxでは正しくHTML内の改行1つ1つをNodeと解釈するが、IEにおいてはそれはNode扱いとならないため、ここでもまた、ブラウザ毎のDOM実装の差異を考慮してスクリプトを組まざるを得なくなった訳で、それ故に困難さが増した。

一言で言えば、多大な時間を要したのは特殊な解釈をしてしまうIEのDOM仕様との格闘に明け暮れたためだ。

なお、拡張パン屑リストの完成序でに、not_permanent_area表示時において、そのGroupに属するエントリイ一覧を表示するようにした。Top頁＝Index頁において実現しているタイトルだけの一覧を各Group表示の最上部に配置したのだ。ここにおいて、Index頁同様に、エントリイタイトルにonmouseoverすると、本文の要約(200文字)を表示（<%topentry_discription>単変数）する仕様としたことは言うまでもない。

以上が拡張パン屑リストのあらましであるが、これだけではどの様に作成されているのか、後で辿ろうと思った時の記録としては余りに一般的・抽象的すぎる。そこでその構造をここに記録しておき、後の反芻・反省・記録呼び覚まし等々に活用することにしたい。とはいえ、今晩は疲れ切ったので機会を改めて総括することにしよう（苦笑）。

FC2ブックマークに追加

パン屑リストを設置

　スレッドテーマ「ブログ・カスタマイズ」に投稿するが、テーマは生者必滅、栄枯盛衰が激しく、ちょっと前に存在したスレッドテーマが今日は消えていることが少なくない。仕様と言えばそれまでだが、このため継続的、長期的に存在し続けるスレッド一覧は数少なく、果たして投稿して意味があるのか、疑問に思わざるを得ない。


　さて、かねてより計画していたパン屑リストをやっと設置した。
　現在、次の4つの表示形式に対応させたところだ。
・個別エントリイ表示時（http://hkom.blog1.fc2.com/blog-entry-num.html）
・カテゴリイ別表示時（http://hkom.blog1.fc2.com/blog-category-num.html）
・月別表示時（http://hkom.blog1.fc2.com/blog-date-yyyymm.html）
・日別表示時（http://hkom.blog1.fc2.com/blog-date-yyyymmdd.html）


パン屑リスト画像




　なお、サイト内検索結果表示時（http://hkom.blog1.fc2.com/index.php?q=query）にも、それに相応しいパン屑リストを設けたいと考えている。


　更に、作った結果を見て思ったのだが、パン屑リスト行の一部にブログナビゲーション用のプルダウン階層メニューを設置すれば、使い勝手がより向上するだとう、と模索しているところだ。


　実は、既に「Open Menu」をクリックすることによりブログナビゲーションを表示するようにしている。しかし、パン屑リストを作ってみて、その一画にブログナビゲーションツールがあればより便利だと思ったのだ。
　ここで課題となるのは同じ情報を2箇所に設置する場合の合理的な対処法である。それこそ該当部分のHTMLを複写してHTML本体内に情報を重複させることは明らかに無駄であろう。
　そこで、初めてDOMのcloneNodeを使って挑戦してみようと思う。
FC2ブックマークに追加

この続きを読む

1周年記念───このブログ開設

　FC2ブログを開設して1年が経過した。メールで飛び込んだお知らせを読んで直ぐに飛びつき、その時点で既に、これこそが待っていたブログだと確信したことを今更ながらのように思い出す。そしてそれは案の定、ホームブログとなり、それだけではなくHTML、CSS及びJavascriptの学習に駆り立ててくれた。
　お陰でHTMLとCSSはほぼ学習を終えて、今はJavascriptの本格的学習に取りかかっているところだ。
　
FC2ブックマークに追加