和風なテンプレート
絵文字とJavaScriptを多用した和風なデザインを目指しました🍡
下に「タスクバー風メニュー」があります(マウスオーバー)
PC向けとモバイル向けのテンプレートをそれぞれ用意したので適宜使用してください
「アイコン」をクリックするとウィンドウが表示される仕様です
1つ目、基本
一つ目のアイコンをクリックすると現れるウィンドウです。背景色は色々ランダムです。右上のを押すと閉じます。下のタスクバー風のフッタ部分の✖をクリックすると、全部のウィンドウを閉じることができます。背景色ランダム変更等はJavaScriptの方で行っているので、変更したい場合はJavaScriptのファイルの方をカスタマイズしてください。
また、仕様では1ページ7ウィンドウなので、日記なら日曜日か月曜日などを1ウィンドウ目にするとちょうどよさそうです。
2つ目、ウィンドウについて
2つ目のウィンドウは1つ目のウィンドウより上に重なります。邪魔な場合は適宜✖(右上でそのウィンドウを閉じる、あるいはタスクバーの✖で一括に閉じる)で閉じてください。1ページに7ウィンドウまで開ける仕様です。JavaScriptとcssを追加すればいくらでも増やすことは可能です。
3つ目、仕様について
マウスオーバーで背景色を変えたりするうるささが特徴っぽいです。絵文字なのはwebフォントより軽い気がするし、対応している環境増えた気がするという理由だったり。また、Windows(PCのデスクトップ)リスペクトのデザインなので、レスポンシブには対応していないです。
4つ目、不要なウィンドウについて
1ページに7つまでウィンドウ(あるいはアイコン)が表示できる仕様ですが、不要な場合適宜削除してください。
5つ目、アイコンについて
アイコンはJavaScriptで表示するようにしてありますが、直接書き込むように変更してもかまわないです。ページ数が増えた時にアイコンを揃えるのが楽なようにJavaScriptで表示するようにしてあるだけです。また「iconset();」は特定のアイコンが固定で表示されますが、「iconset2();」はランダム表示に変わります。JavaScriptファイルの方で指定してあるので適宜カスタマイズ等してください。また「iconset1();」は一番上のアイコン(サイトタイトル表示等)になります。
6つ目、タスクバーもどき(フッタ)
フッタ部分をタスクバー風のメニューにしてあります。マウスオーバーで表示されます。常に表示させたい場合は、cssファイルで「#footer」の「opacity:0.0」を「opacity:1.0」等に変更してください(透過で見えなくしているだけです)。
……インデックスページへのリンク想定。
……サイトタイトルのウィンドウを開く。
📂……メニュー(サイトマップ等)をウィンドウで開く(コンテンツの一番上にあるので、インデックスページ以外につけると管理が手間)
✖……すべてのウィンドウを閉じるボタン。ウィンドウをカスタマイズしているとここも変更する必要がある
……ウィンドウを開くデスクトップのアイコンと同じ機能です。
その他適宜、絵文字をとリンクを増やしていくことも可能。