新装同好会HPのできるまで
テストも終わったので同好会のHPを一新しました！
こんな感じ
いつかの自分の備忘録兼、今後同好会を担ってゆく後輩たちのためにメモメモ。あくまで、これは我流なのであんまりアテにならないと思うけどね
1.大まかなデザインを決める
まず、大まかにデザインを決めます。今回は、
の3通りを考えました。
アールデコ調
大好きなアールデコ調。エンパイアステートビルが有名処かな。ゲーマーな人ならBioshock風。ただ、これはちょっとグロテスクなのと素材の確保が出来なかったため断念。アールデコ絵師、彫刻師急募。
2.だいたいの内容を決める
コンテンツを決めます。本来であれば、コンテンツを先に決めて、それに沿って尚かつそれが引き立つようなデザインが好ましいのですがデザインが決まらないとイマイチやる気が出ないのでここでやります。
今回は
- トップ
- 紹介
- 成果
- リンク
みたいな走り書きをして、大枠の構成を決めます。
3.トップ絵の作成
今回、恐らく一番時間が掛かっているのがこの部分です。いろんなデザインサイトをウォッチングして、グランジ風のアイデアを溜めてphotoshopと試行錯誤をしていきます。グランジ風のサイトを多数チェックしてるとちょっとコミュっぽいサイトがカッコよくて相性がいいと思ったので、色合いと大まかな雰囲気を妄想。
まずは、画像をiPhotoから選別。自分の写真は加工するのがひどく恥ずかしいので、誰か別の人を...と探していたらクリエイティブコモン高専生のアイドルいつきちゃんを発見したので心の中で承諾を貰って加工にかかる。
- 3階調にモノトーン化する。photoshopの「明るさ/コントラスト」
- それぞれの黒部分を上の層にいくほど濃くなるように色味を決めていく。photoshopの「塗りつぶし」
- ラインを引いて、ちょっとノイズを入れる。photoshopの「直線」、「エフェクト」のそれっぽいやつ、「ガウスぼかし」
- フォントの選別
- いつきちゃんの明るい部分の色とフォントの色を合わせる
- 適当に拾ってきたコミュっぽい画像を塗りつぶして透過表示
- 背景の作成。濃い部分はいつきちゃんの濃い部分と合わせる。photoshopの「グラデーション」
こんな感じで完成する。
4.セロテープ貼り付け
縁の下で役に立ってるセロテープの作り方。
以下もセロテープなど、ギザギザにする場合は同様に行う。
5.メニュー画像作成
ここもすごく時間かかってます。やってることはそんなに難しくないけど、すごく手間がかかる。
- 適当な紙の素材をダウンロードしてくる
- 四辺をギザギザにする。セロテープの要領で
- 字を乗せる。しかし、このままだとフォントが浮いてしまうので少し手間を掛ける
- フォントを範囲選択して、選択した部分の背景画像コピー
- コピーしたレイヤーの彩度を0にすると、簡易モノトーンになる
- このレイヤーを字のレイヤーの上に移動させる
- 透過度を30%ぐらいに指定
ひと手間掛けることによって、紙に書いてある感が出る。ほんとは、字もくちゃってなってるはず！ってツッコミはご愛嬌で。
7.コンテンツ背景の作成
あまりに殺風景すぎるので、各コンテンツにグランジっぽい背景を付ける。これは、グランジのフリーのブラシをダウンロードしてきてフォントを配置しただけ。ちなみに、色は背景がいつきちゃんの一番明るい部分で、フォントがちょっとだけ薄い赤。
7.コーディング2
コンテンツ背景を組み込むと表示が一気に崩れるのでその調整と、トップへのリンクをそれぞれ配置する。また、コンテンツへの移動をなめらかにするためにjQuery-page-scroller.jsを使う。
実際のコードとちょっとした解説
body { background-image: url("img/back.jpg"); } img { border: 0px; } a{ color: yellow; } a:visited { color: yellow; } #about { //About usの部分 background-image: url("img/aback.png"); background-repeat: no-repeat; position: absolute; width: 600px; height: 900px; top: 900px; left: 0; } #history { //Historyの部分 background-image: url("img/hback.png"); background-repeat: no-repeat; position: absolute; top: 0; width: 1200px; left: 1500px; } #link { //linkの部分 background-image: url("img/lback.png"); background-repeat: no-repeat; position: absolute; top: 1200px; width: 1200px; left: 1200px; } #content { //About usのコンテンツ部分。背景との兼ね合いでコンテンツには別idが振ってある。 color: #fff; width: 600px; padding-top: 150px; padding-left: 200px; } #hcontent { //Historyのコンテンツ部 color: #fff; width: 600px; padding-top: 300px; padding-left: 250px; } #lcontent { //linkのコンテンツ部 color: #fff; width: 600px; height: 400px; padding-top: 300px; padding-left: 250px; } h2 { color: #f00; border-bottom: #f00 solid 3px; width: 80%; } #back1 { //Topへ戻るリンク。どうしようもなくて、面倒だからabsolute指定してある position: absolute; top: 950px; left: 700px; z-index: 1; } #back2 { position: absolute; top: 150px; left: 2200px; z-index: 1; } #back3 { position: absolute; top: 1800px; left: 1800px; z-index: 1; } #menu { position: absolute; width: 400px; height: 700px; left: 800px; top: 40px; }
ここからHTML
<html> <head> <title>FNCT-ITsProfoHomePage - 福井高専IT研究会オフィシャル</title> <link href="main.css" type="text/css" rel="stylesheet"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="jquery.page-scroller.js"></script> <script type="text/javascript"> //jQuery-page-scrollerのパラメタ指定。横移動有り adjTraverser = 1; </script> </head> <body> <img src="img/top.png" id="top" /> <div id="menu"> <a href="#about"><img src="img/about.png" /></a> <a href="#history"><img src="img/history.png" /></a> <a href="#link"><img src="img/link.png" /></a> </div> <div id="back1"><a href="#top"><img src="img/mtop.png" /></a></div> <div id="back2"><a href="#top"><img src="img/mtop.png" /></a></div> <div id="back3"><a href="#top"><img src="img/mtop.png" /></a></div> <div id="about"> <div id="content"> <h2>IT研究会Profoとは？</h2> 福井高専のITを志す学生で構成された同好会です。<br> 日進月歩のITの世界で情報交換をしたり、互いに切磋琢磨したり、交流を深めたりしています。 <h2>同好会の目的</h2> <ul> <li>全国高専プログラミングコンテストへの参加</li> <li>互いの技術を学び合う</li> <li>他高専生との交流</li> </ul> <h2>活動内容</h2> <ul> <li>プログラミングによるソフトウェア開発</li> <li>Webサイト構築</li> <li>サーバ管理</li> <li>マイコンを用いたハードウェアスクラッチ</li> <li><a href="http://www.ei.fukui-nct.ac.jp/kosen_live/" target="_blank">高専ライブ</a>製作</li> <li>隔月開催LT(Lightning Talk)会</li> <li>長期休暇毎開催合宿</li> </ul> <h2>活動が気になる人へ</h2> 公式には毎週月、火、木のPM16:30-<br> 非公式に毎日活動を行っています。見学なども歓迎しているので、福井高専電子情報棟3Fの実験室へ </div> </div> <div id="history"> <div id="hcontent"> <h2>2005</h2> 5人でJava同好会を設立。勉強会などを行う <h2>2006</h2> 新メンバーを迎える<br> 活動報告、プレゼンなどを行う <h2>2007</h2> 勝山高校生ホームページコンテスト入賞 <h2>2008</h2> 新メンバーを迎える<br> プロコン競技部門出場<br> 東洋経済から取材を受ける<br> 高専祭でJavaカレーを販売。露天賞<br> iPhoneApp講座<br> 日視研との共同ADV企画立ち上げ<br> NHKから取材を受ける<br> 勝山高校生ホームページコンテスト入賞 <h2>2009</h2> 新メンバーを迎える<br> プロコン競技部門出場<br> </div> </div> <div id="link"> <div id="lcontent"> <h2>学校</h2> <ul> <li><a href="http://www.fukui-nct.ac.jp/" target="_blank">福井高専</a></li> </ul> <h2>同好会</h2> <ul> <li><a href="http://profo.jp/wiki/" target="_blank">福井高専IT研究会ProfoOfficialWiki</a></li> <li><a href="http://profo.jp/book/" target="_blank">ProfoBookManager</a></li> <li><a href="http://profo.jp/itsukichang/" target="_blank">いつきちゃん</a></li> <li><a href="http://profo.jp/uploader/" target="_blank">ProfoUploader</a></li> <li><a href="http://www.ei.fukui-nct.ac.jp/~h_nishi/radio_detail.html" target="_blank">高専ライブ</a></li> </ul> <h2>作者</h2> <ul> <li><a href="http://thosewho.karakasa.com/" target="_blank">THOSEWHO.KARAKASA.COM</a></li> </ul> </div> </div> </body> </html>
というわけで、こんな感じでサイトが完成した。割合としては
1(アイデア練り):7(素材作成):2(コーディング)というような感じです。コンテンツ重視のサイトを作るときはCMSを使うのでWebページを構築するときはついつい素材作成の時間が延びて仕方ない。今回は約7時間くらいかかってるけど、うち4,5時間は素材を作っていました。
それでは！
さくらのレンタルサーバ
