メニューをカスケードで表示し、ヘッダー部分を共通ファイルに放り込んで管理しやすくしたが、まだ３ページぽっち ― 2019年10月02日 02:41
メニューをカスケードで表示し、ヘッダー部分を共通ファイルに放り込んで管理しやすくしたが、まだ３ページぽっち
結局、今日もフィットネスはサボリ。
右足のむくみが減らない。
近所を少し歩いてみたが、あまり変わらない。
ひどくなるようなら医者に行こうと思っているが、中途半端にむくんでいる。
明日は水泳教室だけ行って、少し気分転換しよう。
ホームページの方は、２０１６年に龍馬でヘレン環礁に行った際の画像を４００枚も貼り付けた。
画像サーバーとして使っているＦＣ２サーバーは、165.05 MB / 1 GB を使用ということになっている。
こいつが満杯になったら、別のところのも借りようかな。
まあいい。
メインメニューのカスケードの方は、サンプルを弄りながら研究（試行錯誤＝思考錯誤？）して、意外とあっさり出来てしまった。
スマホ対応では、上手くいかない。
うーん、こっちの方は少し後回しだな。
せっかく解決したローカルでのＪクエリーによるファイルの結合（というか、ＨＴＭＬファイルの内容の閲覧時の動的結合）については、ややタイムラグがあって不自然な感じは否めないが、今後の管理の容易さを考えるとここを譲るわけにはいかない。
たった３ページだけど・・・。
工事中のページも、これでようやく完成した。
完成？。
いやいや、重大な課題を発見して困ってしまう。
今、自分がどのページにいるのか、どうすればトップページに戻れるのかが、直ちには分からない。
一応、メインメニュー（最近では、グローバルメニューとか）には「ほーむ」ボタンを付けているし、Ｈ１サイズで書かれている「浮沈子の部屋」をクリックすれば戻れるんだが（なんならブラウザーの戻るボタンでも、キーボードの「Ａｌｔ＋左矢印キー」でも何でもいいんですが）、ナビゲーションが弱いことは確かだ。
たった３ページだけど・・・。
最近は、ページ遷移させずに、或いはそれを意識させずにコンテンツを読ませるのが流行っているようだが、小さい文字で大量の情報を載せても、浮沈子自身が良く見えないからな。
少なくとも、自分が今いるページがどこなのかを、動的に取得して表示するなりなんなりする必要がある。
たった３ページだけど・・・。
まあいい。
（UIデザイナーが理解しておくべき11種類のナビゲーションと特徴）
https://baigie.me/sogitani/2014/07/navigation-type/
「WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。」
「ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。」
まあ、それ程のものかとは思うが、よくまとまった記事で概要は掴めた。
仕掛け的にも、効果的にも面白そうなのは「3. ブレッドクラムナビゲーション」（パンくずともいうらしい）かな。
１ 1つの経路のみを強制的に表示させる
２ 主要な経路をすべて表示させる方法
３ 辿ってきた経路を動的に表示する
（パンくずリスト）
https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88
「「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。」
浮沈子の記憶が確かなら、置いてきたパンくずを小鳥かなんかに食われちまって、結局道に迷ってしまったんじゃなかったっけえ？。
まあ、どうでもいいんですが。
とりあえずは、固定経路を書くことにしよう。
いろいろ記事を読んだんだが、ツールを使う以外には、手書きでシコシコ書くしかないようだな。
こればかりは、全ページに入れる関係上、ハードコーディングになる。
ページの意味的構造も、きちんと考えておかないと、わけわかのパンくずになっちまう。
食えない話だ（うまい！）。
検索エンジンに拾ってもらう必要は皆無なので、ＨＴＭＬとＣＳＳを使って、簡易に書ければいい。
（パンくずリストの正しい使い方【サンプル有】）
http://w-just.com/blog/breadcrumblist-519.html
「パンくずリストは、その名の通り“リスト”だ。リストにはリストタグを使うのが、正しいHTML文書構造だ。更に、パンくずリストには、その並び順に意味があるので、ulではなく番号付リストを表すolを使うのが論理的に正しい。」
「矢印マーク（>）には、論理的な意味（検索エンジンに対するHTML文書としての意味）はなく、単にビジュアルを整えるためのものだ。論理的な意味はHTMLタグで示し、ビジュアルの調整はスタイルシート」
「メインコンテンツ部分はページの主要テーマを記載すべき部分であり、パンくずリストのようなナビゲーション類はヘッダーやサイドバーに設置するのが、論理的なHTML文書構造だ。」
「最後の項目にリンクを設定するという事は、今いるページにリンクするという事で、ユーザーに余計なクリックと混乱を招く恐れがある。ユーザビリティの観点から最後の項目にはリンクを設定しないようにしよう。」
どれも正論だが、ちょっと堅苦しい感じもする。
この記事のパンくずは、こんな感じだ。
「ホーム > ウェブ集客情報ブログ > ウェブ制作 > パンくずリストの正しい使い方【サンプル有】」
うーん、「>」記号使ってんじゃん！？。
<!-- パンくずリスト開始 -->
<div class="breadcrumbs">
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="/" class="home"><span property="name">ホーム</span></a><meta property="position" content="1"></span> >
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="http://w-just.com/blog/" class="post-root post post-post"><span property="name">ウェブ集客情報ブログ</span></a><meta property="position" content="2"></span> >
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="http://w-just.com/blog/category/website-creation" class="taxonomy category"><span property="name">ウェブ制作</span></a><meta property="position" content="3"></span> >
<span property="itemListElement" typeof="ListItem"><span property="name">パンくずリストの正しい使い方【サンプル有】</span><meta property="position" content="4"></span>
</div>
<!-- パンくずリスト終了 -->
構造化データというらしいが、ＨＴＭＬだけで書けば、これだけの話だ。
<ol class="sample">
<li><a href="http://w-just.com/">ホーム</a></li>
<li><a href="http://w-just.com/blog/">ウェブ集客情報ブログ</a></li>
<li><a href="http://w-just.com/blog/category/website-creation">ウェブ制作</a></li>
<li>パンくずリストの正しい使い方【サンプル有】</li>
</ol>
やれやれ・・・。
ＣＳＳつけて書いても、こんな程度で書ける。
↓ここからーーーーーーーーーーー
<html>
<head>
<style type="text/css">
<!--
.sample li{
display: inline-block; /*横並びにします*/
}
.sample li:after{
content:" ＞ "; /*記号( ＞ )を追加します*/
}
.sample li:last-child:after{
content:""; /*リスト要素の末尾は記号を消します*/
}
-->
</style>
</head>
<body>
<ol class="sample">
<li><a href="http://w-just.com/">ホーム</a></li>
<li><a href="http://w-just.com/blog/">ウェブ集客情報ブログ</a></li>
<li><a href="http://w-just.com/blog/category/website-creation">ウェブ制作</a></li>
<li>パンくずリストの正しい使い方【サンプル有】</li>
</ol>
</body>
</html>
↑ここまでーーーーーーーーーーー
迷わないためのおまじない程度でつくるなら、テキストベースで十分だろう。
水泳教室から帰ってきたら、埋め込んでおくか・・・。
結局、今日もフィットネスはサボリ。
右足のむくみが減らない。
近所を少し歩いてみたが、あまり変わらない。
ひどくなるようなら医者に行こうと思っているが、中途半端にむくんでいる。
明日は水泳教室だけ行って、少し気分転換しよう。
ホームページの方は、２０１６年に龍馬でヘレン環礁に行った際の画像を４００枚も貼り付けた。
画像サーバーとして使っているＦＣ２サーバーは、165.05 MB / 1 GB を使用ということになっている。
こいつが満杯になったら、別のところのも借りようかな。
まあいい。
メインメニューのカスケードの方は、サンプルを弄りながら研究（試行錯誤＝思考錯誤？）して、意外とあっさり出来てしまった。
スマホ対応では、上手くいかない。
うーん、こっちの方は少し後回しだな。
せっかく解決したローカルでのＪクエリーによるファイルの結合（というか、ＨＴＭＬファイルの内容の閲覧時の動的結合）については、ややタイムラグがあって不自然な感じは否めないが、今後の管理の容易さを考えるとここを譲るわけにはいかない。
たった３ページだけど・・・。
工事中のページも、これでようやく完成した。
完成？。
いやいや、重大な課題を発見して困ってしまう。
今、自分がどのページにいるのか、どうすればトップページに戻れるのかが、直ちには分からない。
一応、メインメニュー（最近では、グローバルメニューとか）には「ほーむ」ボタンを付けているし、Ｈ１サイズで書かれている「浮沈子の部屋」をクリックすれば戻れるんだが（なんならブラウザーの戻るボタンでも、キーボードの「Ａｌｔ＋左矢印キー」でも何でもいいんですが）、ナビゲーションが弱いことは確かだ。
たった３ページだけど・・・。
最近は、ページ遷移させずに、或いはそれを意識させずにコンテンツを読ませるのが流行っているようだが、小さい文字で大量の情報を載せても、浮沈子自身が良く見えないからな。
少なくとも、自分が今いるページがどこなのかを、動的に取得して表示するなりなんなりする必要がある。
たった３ページだけど・・・。
まあいい。
（UIデザイナーが理解しておくべき11種類のナビゲーションと特徴）
https://baigie.me/sogitani/2014/07/navigation-type/
「WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。」
「ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。」
まあ、それ程のものかとは思うが、よくまとまった記事で概要は掴めた。
仕掛け的にも、効果的にも面白そうなのは「3. ブレッドクラムナビゲーション」（パンくずともいうらしい）かな。
１ 1つの経路のみを強制的に表示させる
２ 主要な経路をすべて表示させる方法
３ 辿ってきた経路を動的に表示する
（パンくずリスト）
https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88
「「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。」
浮沈子の記憶が確かなら、置いてきたパンくずを小鳥かなんかに食われちまって、結局道に迷ってしまったんじゃなかったっけえ？。
まあ、どうでもいいんですが。
とりあえずは、固定経路を書くことにしよう。
いろいろ記事を読んだんだが、ツールを使う以外には、手書きでシコシコ書くしかないようだな。
こればかりは、全ページに入れる関係上、ハードコーディングになる。
ページの意味的構造も、きちんと考えておかないと、わけわかのパンくずになっちまう。
食えない話だ（うまい！）。
検索エンジンに拾ってもらう必要は皆無なので、ＨＴＭＬとＣＳＳを使って、簡易に書ければいい。
（パンくずリストの正しい使い方【サンプル有】）
http://w-just.com/blog/breadcrumblist-519.html
「パンくずリストは、その名の通り“リスト”だ。リストにはリストタグを使うのが、正しいHTML文書構造だ。更に、パンくずリストには、その並び順に意味があるので、ulではなく番号付リストを表すolを使うのが論理的に正しい。」
「矢印マーク（>）には、論理的な意味（検索エンジンに対するHTML文書としての意味）はなく、単にビジュアルを整えるためのものだ。論理的な意味はHTMLタグで示し、ビジュアルの調整はスタイルシート」
「メインコンテンツ部分はページの主要テーマを記載すべき部分であり、パンくずリストのようなナビゲーション類はヘッダーやサイドバーに設置するのが、論理的なHTML文書構造だ。」
「最後の項目にリンクを設定するという事は、今いるページにリンクするという事で、ユーザーに余計なクリックと混乱を招く恐れがある。ユーザビリティの観点から最後の項目にはリンクを設定しないようにしよう。」
どれも正論だが、ちょっと堅苦しい感じもする。
この記事のパンくずは、こんな感じだ。
「ホーム > ウェブ集客情報ブログ > ウェブ制作 > パンくずリストの正しい使い方【サンプル有】」
うーん、「>」記号使ってんじゃん！？。
<!-- パンくずリスト開始 -->
<div class="breadcrumbs">
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="/" class="home"><span property="name">ホーム</span></a><meta property="position" content="1"></span> >
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="http://w-just.com/blog/" class="post-root post post-post"><span property="name">ウェブ集客情報ブログ</span></a><meta property="position" content="2"></span> >
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="http://w-just.com/blog/category/website-creation" class="taxonomy category"><span property="name">ウェブ制作</span></a><meta property="position" content="3"></span> >
<span property="itemListElement" typeof="ListItem"><span property="name">パンくずリストの正しい使い方【サンプル有】</span><meta property="position" content="4"></span>
</div>
<!-- パンくずリスト終了 -->
構造化データというらしいが、ＨＴＭＬだけで書けば、これだけの話だ。
<ol class="sample">
<li><a href="http://w-just.com/">ホーム</a></li>
<li><a href="http://w-just.com/blog/">ウェブ集客情報ブログ</a></li>
<li><a href="http://w-just.com/blog/category/website-creation">ウェブ制作</a></li>
<li>パンくずリストの正しい使い方【サンプル有】</li>
</ol>
やれやれ・・・。
ＣＳＳつけて書いても、こんな程度で書ける。
↓ここからーーーーーーーーーーー
<html>
<head>
<style type="text/css">
<!--
.sample li{
display: inline-block; /*横並びにします*/
}
.sample li:after{
content:" ＞ "; /*記号( ＞ )を追加します*/
}
.sample li:last-child:after{
content:""; /*リスト要素の末尾は記号を消します*/
}
-->
</style>
</head>
<body>
<ol class="sample">
<li><a href="http://w-just.com/">ホーム</a></li>
<li><a href="http://w-just.com/blog/">ウェブ集客情報ブログ</a></li>
<li><a href="http://w-just.com/blog/category/website-creation">ウェブ制作</a></li>
<li>パンくずリストの正しい使い方【サンプル有】</li>
</ol>
</body>
</html>
↑ここまでーーーーーーーーーーー
迷わないためのおまじない程度でつくるなら、テキストベースで十分だろう。
水泳教室から帰ってきたら、埋め込んでおくか・・・。
最近のコメント