--------(--)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2009-12-02(Wed)

テンプレいじり+イベントカウンタ(JavaScript)

テンプレートとコミケまでの日数を表示する通称コミケカウンタを
ちょっと手直ししました。


  == 変更点 ==
 <テンプレート>
・トップ画像差し替え
・header部分の配置を、main記事の最上部に変更
・色変更

 <JavaScript(コミケカウンタ)→(イベントカウンタ)>
・2つ以上のイベントをカウントダウンできるようにする
  =========

小難しい話は追記に書きますが、
今回の変更で結局どうなったのかというと、

・トップ画像をそれなりにコンパクトにしました
・色を明るめの緑にしました
・右のカレンダーの下に、コミケ77に加え
 コミケスペシャル水戸の残り日数も表示させました
yellow_3column_カスタマイズ後

・・・ということです。

見やすい色って何色なのかなと色々思ったりします。
普通に白が無難だろ!とは思うのですが、
真っ白はうおっまぶしっ!という話も以前聞いたことがあるのでした。

コミケもあと1ヶ月切ってます。やはり冬は早い。
コミスペ水戸まであと100日ちょっととは、結構危機感を持ちました。
水戸には参加申し込みをしているので、要チェックです。

※追記にテンプレート+JavaScriptの詳細について書きました。


  ++++++++
 拍手ありがとうございます!
10000HITに劣らぬブログにするため、作品を仕上げます。
前回の絵を見てキャラクターの表現力が不足していると
感じたところがあるので、もっと躍動感を出せるようにしたいです。

(非公開コメント)さん、ジョニー・ウォーカーさん
コメントありがとうございます!
コメント頂きました記事の追記にて返信しております。

(09/12/06追記)
コメントの返信を追記に書き加えました。
** ジョニー・ウォーカーさん **
ありがとうございます。
酒の密造は、何故犯罪なのだろう・・・。
  ++++++++

<テンプレート>
私が元にしているテンプレートは、公式テンプレートの
『yellow_3column』です。
シンプルな3カラムの構成です。
yellow_3column_デフォルト

以前使っていたトップ絵
ヘッダー絵03
かなり大きな絵(横600×縦300)だったので、
ブログ上部で大きな幅を取っていました。

今回はコンパクトに抑えてみました。
yellow_3column_カスタマイズ中
横幅がかなり余ったので、せっかくだから
省スペースで行こうと考えました。

最初はテンプレートの設定からスタイルシートをいじって
調整するのかと思いましたが、
HTMLの編集の方を次のように変更して、トップ画像があるheader部分を
基本記事のあるmain部分の最上部に移動することができました。
yellow_3column_html編集


色に関しては、スタイルシート編集で変更しています。
Layout → div#header → backgroundや、div#footer → background、
Main Contents → div.content → backgroundなどにある色のRGB値を調整します。
yellow_3column_スタイルシート編集_色

例えば#CCFF77という色を使っています。
一目見るとわけのわからない記号ですが、
これは16進数というものを使って色を表現しています。

10進数と16進数
10進 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
16進 0 1 2 3 4 5 6 7 8 9 A B C D E F

10進数は1桁増えると×10ですが、
16進数は1桁増えると×16です。

#CCFF77
R:CC → 12(C) * 16 + 12(C) * 1 = 204
G:FF → 15(F) * 16 + 15(F) * 1 = 255
B:77 → 7 * 16 + 7 * 1 = 119

Gの値が大きいので、やや明るめの緑になりました。

一見わかりにくそうですが、よくゲームのウインドウカラー調整で見かける
仕組みと変わらないので、強調したい色の値は大きく、その逆は小さくします。


<JavaScript・イベントカウンタ>
コミケまでの日数を求めるために作った、通称コミケカウンタを元に、
複数のイベントにも対応できる仕様に変更しました。

今回のために見直した結果、今までのものは年をまたいでいると
まともに機能しない欠陥品だったことが判明しました。
多くのサイトを参考にさせて頂き、作り直しました。
イベントカウンタコード
スポンサーサイト

テーマ : HTML&スタイルシート(CSS)
ジャンル : コンピュータ

コメントの投稿

管理者にだけ表示を許可する

コメント

プロフィール

名無し

Author:名無し
現在は活動しておりません。

全記事表示リンク
カテゴリ
ユーザータグ

草喰系男子 コミックマーケット 動物 コミティア 初音ミク 同人イベント コみケッとスペシャル5in水戸 触手 植物 カイジ 拍手絵 似せ(偽)絵 DRAGONBALL 時事 ガンダム(1st) 模写 キャプテン翼 無職 SchoolDays 昆虫 ToLOVEる MADARA ヱヴァンゲリヲン 政治 Vガンダム pixiv 特攻の拓 広告表示 風景 中二病 模写(漫画) 東方紅魔郷 霊夢 よろず アンケート ルパン三世 シグルイ レトロゲーム 感想 ドラゴンクエスト のび太 なにィ 

月別アーカイブ
カレンダー
10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
ランダム物語設定V0.7
ランダムで言葉を組み合わせ、
武器・技名や物語設定を作る
最近の記事
最近のコメント
ブログ内検索
RSSフィード
リンク
メールフォーム
ブログ管理者
に送信されます。

名前:
メール:
件名:
本文:

FC2カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。