×

Windowsっぽいホームページテンプレート

絵文字とJavaScriptを多用したWindowsっぽいデザインを目指しました🌟
下に「タスクバー風メニュー」があります(マウスオーバー)
「📄アイコン」をクリックするとウィンドウが表示される仕様です




TEMPLATE:Ateh's theme

×

💐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」等に変更してください(透過で見えなくしているだけです)。
🏡……インデックスページへのリンク想定。
🍪……サイトタイトルのウィンドウを開く。
📂……メニュー(サイトマップ等)をウィンドウで開く(コンテンツの一番上にあるので、インデックスページ以外につけると管理が手間)
✖……すべてのウィンドウを閉じるボタン。ウィンドウをカスタマイズしているとここも変更する必要がある
❓……ABOUTページなどへのリンク推奨。
📄……ウィンドウを開くデスクトップのアイコンと同じ機能です。 その他適宜、絵文字をとリンクを増やしていくことも可能。
×

🐰7つ目、その他

背景画像を指定した方がよさそうなテンプレートだと思います。初期状態では背景画像をランダム表示するようになっています(head内に記述があるのでJavaScriptファイルで適宜カスタマイズ可能)。このJavaScriptが不要な場合は削除してください。その場合、背景画像はcssの方が反映されます。こちらはunsplashのランダム表示になっているので(インターネットにつながっていてかつunsplashが重くなければランダムにきれいな背景画像が表示されます)この背景画像も不要な場合は、cssファイルの方も変更してください。
テンプレート配布サイト「Ateh's theme」へのリンクは任意です(なくても問題ないですが、ライセンスについてはご確認ください)。