TagCSS

透明度を自由に調整出来る程度のアレの技術的なメモ。

ということで、一応メモ的なところをば。

そもそもですが、ああいったスライダーみたいなものは
既に多くのJavascriptライブラリが存在するので、
実装しようと思ったらそういったものを利用するのが一番手っ取り早いのです。

ちょっと個人的な練習用に自作してみたものなので
かなり適当ですが、一応形にはなりました。

ちなみに仕組みですが、下図のようになっていて、
要は二枚の差分画像のうち、片方の透明度を変化させて
一部の透明度を調整しているように見せかけていたわけなのですね。

nikki

■HTML

<div id="slider">
	<hr id="slider-bar">
	<div id="slider-marker"> </div>
	<div style="padding-top:5px;">透明度:<span id="slider-val">0</span>%</div>
</div>
<div id="slider-bg">
	<img src="image/imageB.jpg">
	<img src="image/imageA.jpg" id="slider-image">
</div>

HTMLは上記のようになっていました。上半分がスライダーで、下半分が画像の部分です。
CSSとJavascriptは長くなるので割愛。
といってもそこが一番重要なので、サンプルを置いておきます。
興味のある方はどうぞ。

■スライダー的なアレのサンプルダウンロード

画像を差し替えればそのまま使えるので、是非いろんな透明度を調整してみてください。(*’ω’*)ノシ

Webサイトってだいぶ進化したものですよね。

今更ですが、私はWeb関係の仕事をしてますので、
Webページを構成するHTMLとかCSSとかJavascriptについては
そこそこ勉強しています。

このサイトも、テンプレートは一応配布のものを基にしてますが
かなり自分でカスタマイズして別物になってしまっています。
Web屋で食べて行ってる人たちほどではありませんが、
多少の知識はここ数年のうちに付いたと思っています。

世の中のWebページもここ10年、20年でだいぶ進化したもので、
ただのテキスト表示だけでなくて、操作によって表示を切り替えてみたり、
必要な情報だけを非同期通信で取得してみたりとか、
いろんな技術が実装されてきました。
ちょっと前はリッチコンテンツだとか言われていたようなものも
今ではとりわけそう言い示すこともなく、当たり前のように使われています。

基本的に今はHTML+CSS+Javascriptで作るのが主流かと思います。
HTML自体も、今後それ自身がより高機能になる流れもあり、
今後さまざまなアプリケーション要素がWebサイトに組み込まれていくことかと思います。

さて、今回ちょっとCSSとJavascriptを使って、スライダーを作ってみました。
↓これは画像(Firefoxでの表示)です。
nikki

こういう操作フォームも、画像などは一切不要で意外と出来てしまうものです。
動作の制御はJavascriptでやるのですが、同時にこのスライドのパラメータを
どこかに反映させるようにすれば、ユーザーの調整しだいでページ内のコンテンツを
動的に変化させるようなことも可能です。

ということで、以下実例です。

※動作確認はIE8、Firefox、Chromeなどでやってます。
 万一動かなかったらすみません。


透明度:0
illust
illust

ソーサラーさんの服の透け具合が
自由に調整できたらステキですよね?
(^ω^)

今回はそういうお話でした。
そしてモデルは皆様ご存知small forgeのご隠居様です。
有坂先生ありがとうございました。
ではまた来週!(^ω^)ノシ

WordPressのカレンダーを改造してみるよ!

またブログネタなのですが…!
サイドバーなどに設置するカレンダーには、
日曜日の列は赤字にしたり土曜日の日を青字にしたいという
こだわりがあるんですが、デフォルトなどは列ごとに区別できるclassとかは
さっぱり入ってないので、CSSで指定したりできませんでした。

とりあえずプラグインのカレンダーを色々探しましたが、
ぱっと見そのあたりを満たしてそうなのはなさげだったので、
もうこれは作るか…と。(・ω・)

とりあえずプラグインでもAJAX Calenderが機能的にステキだったのと、
いい感じに弄れそうだったのでこれを改造しちゃうことに。
GPLらしいので公開しちゃうー。

ajax-calendar2/model/calender.php

128行目
– echo “\n\t\t<th abbr=\”$wd\” scope=\”col\” title=\”$wd\”>” . $day_abbrev[$wd] . ‘</th>’;
+ $day_name = substr($wd,0,3);
+ $day_classname = strtolower($day_name);
+ echo “\n\t\t<th abbr=\”$wd\” scope=\”col\” title=\”$wd\” class=\”c_$day_classname\”>” . $day_name . ‘</th>’;

222行目
+ $week_v = calendar_week_mod(date(‘w’, mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins);

230行目
– echo ‘<td id=”today”>’;
+ echo ‘<td class=”wd’.$week_v.'” id=”today”>’;

232行目
– echo ‘<td>’;
+ echo ‘<td class=”wd’.$week_v.'”>’;

以上で見出し行に c_sun,c_mon, … , c_sat というclassと、
テーブル内の各列にwd0 ~ wd1というclassが追加されるので、
これらに対してCSSを指定します。

AJAX Calenderの場合は、clalender.cssでデザイン指定しているので、
その中に書くのもよいですし、使用中のテーマファイルのCSSに追加しても良いと思います。

ajax-calendar2/calender.css

.c_sun, .wd0, .wd0 a {
color:#CC0000;
}
.c_sat, .wd6, .wd6 a {
color:#0000CC;
}

平日の色はテーマファイルの色に準拠していると思います。
そちらも変更する場合は、c_mon ~ c_fri と、 wd1~wd5 に指定すればよいです。

うちの場合は他にも色々やってるんですが、
とりあえず列ごとに色を変える方法として紹介しました。

ちなみにほぼ構成は同じなので、WordPressの wp-includes/general-template.php の
カレンダーに関する部分を同じように修正すれば、デフォルトのカレンダーも同様に出来ますが、
あんまりincludesのファイルを弄ると本体アップデートの際に元に戻ってしまうので
出来ればこういうのはプラグインとかテーマファイル内でやりたいですね。