編集者情報
ここは、編集する際に必要になったメモを保存するページです。半分忘備録なので、結構錯綜していますがご容赦ください。あとサイトのこれからの方針も含んであるので、読んでおくといいかも。
適当に書いてるから読み難いかもね。
進捗
- 現在サイト色彩草案を適用しています。見にくいなどの苦情はなるべく早く言って欲しいぞい。
- スマホ利用者(及びスマホと同システム・同解像度のものを使っている方)は、時々サイトを閲覧した時のスクショデータを要求することがありますが、ご理解とご協力をお願いします。
- テンプレートファイルを作成しました。新たなページを作成する際は、このテンプレートをコピーしてから編集を開始してください。テンプレートファイルはここです。テンプレートファイルはコメントに、編集するべき部分には「(要素の名前)・要編集」と言った書式で書いてあります。この部分は抜けの無いように、しっかりと編集するようにしてください。
-
LeanModal導入しました。導入方法は複雑ですが、覚えておくと私が楽です。
- HTMLに「<a rel="leanModal" href="#任意の英数字" class="st"(←強調文)>テキスト</a>」を挿入(モーダルウィンドウを表示させる)
- その直後(HTML)などに「<div class="lean_modal" id="上記のhrefに記入した任意の英数字(#は含めない)">ここにモーダルウィンドウに表示させるテキストを挿入</div>」
- 上記の作業だけでできるように改良しました。ねっ？簡単でしょ？？((笑顔
- 各ページに既にスクリプト読み込ませてあります。そのままコードを入力することで出来ます。
- これで大分見やすくなったと思います。使いたいと思ったら、どしどし使ってあげてください。
- ウィンドウを開いた際に右上にCloseボタンを設置しました。これをクリックすることで、leanModalを閉じることが出来ます。(勿論背景の灰色をクリックするだけでも出来ます。)
- 閉じるボタンの設置は、leanModalでポップする要素内に<div class="close_btn"><img src="閉じるボタンの画像の場所" alt="閉じる"></div>と入力します。
- サイドメニューは、メインのテキストの見やすさを考慮して、上部に配置しました。ただ、CSSはサイドに配置していたころの名残りが残っていますが、気にせずに。
- leanModalに記載されているテキストがオーバーフローした際もスクロールして表示できるように仕様を変更しました。
-
一部ページに目次システムを導入しました。
- 導入方法は<div class="list"><ul><li>ここに目次の内容</li></ul></div>と言う風に書くと自動でリストに番号を振って目次になるようになっています。
-
ビジターにより親近感を持ってもらうために、ゲームを導入します。
- 例えばウィルスの項目ではウィルスになりきってパソコンに進入するゲーム。そして、その対策のページでは、それを防ぐ手順を示したゲームを作りたいと思います。(攻守両方ともを導入)
- 一応ソースは完成しているので、言ってくれれば直ぐ作れますよ！！
- Googleアナリティクス(Webコン主催団体公認)を導入したため、<head>内に謎のスクリプトが記述されていますが、気にしないでください。
- 配色に関して、大幅な改造を加えます。
- フラットデザインにします。
- 背景の変更
- 歴史のページは、各年代の出来事を一つのボックスに収めて、吹き出しにすることで見やすくしときました。ただ、難しい用語をポップするリンクの配色が奇妙なので再考の余地あり？
- にこやかにインターネットサーフィンしてる画像が欲しい
rgb(142,213,255)#8ed5ff
rgb(129,232,151)#81e897
rgb(255,248,142)#fff88e
rgb(232,174,117)#e8ae75
rgb(255,138,187)#ff8abb
rgb(177,140,255)#b18cff