フォームのボタンをカスタマイズする場合にオーソドックスなのは、
type="image"を使う（タイプ属性にimageを指定する）- inputやbutton要素に
background-imageを指定する
の2つなんだけど、buttonタグの中にボタンにしたい画像をそのまま入れる手もある。
普通に入れたらこうなるけれども、
CSSをちょっと弄れば…
中の画像入れ替えるだけでokな代物に。
Tenderfeel
[icon] 七夕の笹（短冊飾り付き）
七夕は風流で好きです。ってことでサイト用の笹をさらっと描いてみた うっかり統合してしまったので配布は笹だけとかのバリエーション無しで 上と同じ絵のアルファチャネルなPNGだけです 🙁
[XHTML] 携帯サイト（ガラケー）用 XHTML仕様まとめ
Docomo、au、SoftbankのXHTML仕様をざっくりまとめてみた。最後にiPhoneも追加。
XHTMLに対応している携帯は所謂第３次世代の機種です。
やっぱり三社三様だけどXHTML BasicやXHTML Mobile Profileに準拠しとけば全社に対応が可能な様子。
XHTML Basic » Kanzakiさんの解説
XHTML Basic » W3C仕様書
XHTML Mobile Profile » Openwaveのリファレンス
| Docomo | au | Softbank | |
|---|---|---|---|
| 表示対応機種 | FOMAシリーズ ※機種によりimode-XHTMLの対応バージョンが異なる （FOMAでも古い機種は未対応の様子） |
WAP2.0ブラウザ搭載端末 | 3GC型（SoftBank 3G series） ※頭文字が7-9の機種 |
| 文字エンコード | Shift-JIS・UTF-8 | Shift-JIS・UTF-8 | Shift-JIS・EUC-JP・ISO-2022-JP・UTF-8 ※UTF-8以外の文字コードはゲートウェイにてShift_JISに変換される |
| DOCTYPE |
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd"> (Locale/Ver.=ja/1.0)の数字がバージョンによって変化。 |
<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd"> ※端末はDTDのチェックをしない |
<!DOCTYPE html PUBLIC "-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN" "xhtml-basic10-plus.dtd"> |
| 対応画像フォーマット |
iモードブラウザ1.0(XHTML)：JPG・GIF |
JPEG・PNG・GIF ※256色インデックス以上は減色表示 |
JPEG・PNG・GIF |
| 最大ファイルサイズ | imodeブラウザ1.0：100KB imodeブラウザ2.0：500kb |
9KB（画像データ等除く） 画像込みではDocomoとほぼ同等 |
300kb |
| 絵文字 | 公式一覧ページへ code.cside.com |
一覧ページへ | 一覧ページへ |
| IPアドレス帯域 | 一覧ページへ | 一覧ページへ | 一覧ページへ |
| ユーザーエージェント | 一覧ページへ iモードブラウザ1.0機種の一覧ページへ iモードブラウザ2.0機種の一覧ページへ |
一覧ページへ | 一覧ページへ |
Docomoとauは同じバイナリコードで似たような絵文字が表示される。
参考：全キャリア絵文字比較表（絵文字を使いこなして見るためのページ）
公式のシュミレーターはXHTMLに微妙に非対応らしく、仕様書で可とされている要素や属性でエラーが発生するようだ。
[Ajax] Google AJAX Feed APIでRSSを表示する
Google Ajax APIシリーズ記事その３はFeedについて。
RSS表示に関しては前にPHPで表示する方法を書きましたが、Magpie RSSだとページをPHPにする必要がありました。
Google AJAX Feed APIを利用すると、javascriptファイルを読み込むだけでhtmlファイルに外部のRSSを表示させることが出来ます。
なんでか妙にマイナーな気がするのはきっと難しそうに見えるからに違いないと思い、３ステップで使えるようにしてみた。
ZIPも用意してみたのでお試しあれ！
※Mapはこの記事、Searchはこの記事で解説しています。
[psd] Photoshop Mockup Template for iPhone
iPhone用Photoshopモックアップテンプレート。Safari、アプリの両方作ってあります。psdファイルのみ配布。
[mootools] 透過PNGをIE6で自動的に表示させる pingfix.js clone
必要に迫られて作ったIE Pingfix.jsのクローン
ページ内にある透過PNG形式画像をIEでも表示させるプラグインのmootools版です。
透過画像やAlphaImageLoaderについてはこっちの記事で詳しく書いてます→透過PNGと透過フィルターの使い方
適用する画像の判別はファイル名で行います。
背景は面倒なので未対応ですが、要素IDによる範囲指定が可能です。
やってる事は大体同じ
- 透過する画像を取得
- 画像の属性を取得(width,height,alt,src,class,id等)
- 新しい要素を作成（このクラスではspan）
- 作成した要素に画像の属性を当てる
- Style属性で作った要素をスタイリング（AlphaImageLoaderはここ）
- img要素を削除またはdisplay:noneにして作成した要素を挿入
[jQuery]IE6以下で閲覧すると画面左端にアナログと表示させるプラグイン
jQuery練習ついでにプラグイン作って便乗。元ネタはCSS Happy Lifeさん。
最近テレビの画面左端にアナログと出るようになってますが、
あのウザい表示をIE6使ってるときにやろうじゃないか、というものです。
このプラグインはスクロールしても追いかけて常に画面左端に表示し、
さらにアイコンへマウスオーバーするとメッセージを入れ替えて
ユーザーにしつこくバージョンアップを促しますｗｗｗ
以下デモはＩＥ以外だと何も表示されません。
View Demo »
jQuery ver 1.2.6以上用プラグインです
jQuery.browserのサポートの関係で1.3以上が必要でした。
[jQuery]リンクに新しいウィンドウを開くアイコンを自動で追加する
殴り書きは続く…AutoExternalLinkのjQuery版。mootools版の同タイトル記事とほぼ同じです。
jQueryは馴染みが浅いのでもっさり感漂う残念なソースになってます。
自分がサイト組む時は外部リンクに大抵relかclass属性を付与するんで、relかclass持ちにだけ追加するライト版も書いてみた。
ダウンロードはスクリプトファイル２種と、jQuery版に修正したAutoExternalLinkプラグインファイルのセット。
元ソースからの入れ替えとかは自己責任でお願いします。
wordpressプラグイン本体の改造はこちらの記事で解説していますが、
zipに修正済みのプラグインファイルも突っ込んどいたので上書きでおｋ。動作デモはこのブログそのものです。
jQueryプラグインなので普通のサイトでも使えると思います。
varは1.2.6以上対応です多分。（1.2.6と1.3.2でしか確認してない）
Header
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jExternalLink.plugin.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#main").jExternalLink();
});
//]]>
</script>
上記指定で#main以下にあるaタグを全てチェックします。
[mootools]スクロールに追随させる – mooFollow.js
スクロールした時勝手に追随して動く要素を作成するクラス。mootools ver1.2以上用。
どう見てもwrapScrollです本当に（ｒｙ）っていうツッコミは置いといて、
スクロールした時とし終わった時のイベントとか、
トランジションや遅延の指定とかがしやすい。と思う。
[mootools] Class – KitchenTimer
前エントリーのカウントダウンタイマークラスにカウントアップとか追加してキッチンタイマーっぽい代物に。
Javascriptなのでページ内埋め込みが出来るんだけどmootoolsが必要っていう。
使い方は続きに。
[mootools] ひらがなをローマ字に変換するクラス
人が作ったのを使って楽したかったんだけどいいのが無かったので、ひらがなをローマ字に変換するクラスを自作した。
タイピングゲーム製作でどうしても必要になる問題文章を、ひらがな（数字＋一部記号も可）で作るだけで全部ローマ字に変換します。
※mootools.1.2が必要
日本語は母音と子音の組み合わせで出来てる。
「く」ならK+U、「し」ならS+I/SH+I/C+I、「わ」ならW+A。
入力方式が変わるのは、「し」や「じ」等特定の文字と、「ん」、小文字のや行、小文字の「つ」との組み合わせの時だけで
あとは特定の子音１種と母音５種類の組み合わせで成り立つ。
で、大体次のような流れで変換を行います。
- パブリックメソッドに文章投入→「このぶんしょうはさんぷるっぽいなにかです！」
- １文字または２文字単位に分割して配列化。小文字は前後の文字とセットにする。
→[こ,の,ぶ,ん,しょ,う,は,さ,ん,ぷ,る,っぽ,い,な,に,か,で,す]
「っ」で終わる場合や記号・数字とセットになる場合はそれぞれを１文字とする。 - ループ文で１文字か２文字か判別。変換関数に飛ばす
→こ：１文字 しょ：２文字 - １文字の場合はそのまま変換。この時、入力方式の設定がある文字についてはその方式に従う。
→こ：K+O ん：NまたはNN - ２文字の場合、最初に「つ」があるかどうか捜査。
【小文字のつがある場合】
２文字目を１文字変換のメソッドに通して子音を２つに増やす。
→っぽ：P+PO →っと：T + TO
【小文字のつがない場合】
switch文で入力方式の設定がある文字（し＋小文字や行、じ＋小文字や行等）を変換。
他は、１文字変換のメソッドに通して子音＋小文字や行ローマ字にする。
→しゃ：(SH)(SY)+A にゃ：N(i)+YA - 結果を返す
→[ko,no,bu,nn,syo,u,ha,sa,nn,pu,ru,ppo,i,na,ni,ka,de,su,!]
→[k,o,n,o,b,u,n,n,s,y,o,u,h,a,s,a,n,n,p,u,r,u,p,p,o,i,n,a,n,i,k,a,d,e,s,u,!]
以下全文。長いｗ
[button]ボタン ベース素材 （アクア&楕円形）
ボタンのベース素材。大きい楕円形なのでアイキャッチとかにも使えるかもしれない。fireworks・photoshop・Web(png24)の３形式で配布してるので色とテキスト変更が可能です。[クリエイティブコモンズライセンス]
SiteTemplate07:Autumn Lovely
ちょっとテクニカルなレイアウトのWebサイトテンプレート。
時期ハズレの秋用テーマです…
このテンプレートは１カラムの固定レイアウトで、slideBoxを使用してスクロールバーをカスタマイズしています。
元々ブログ用に作ったものなので、普通のサイトだと使いづらいかもしれません。
コンテンツのスライドはslideBox.js ver1.0を改変してマウスホイール対応にさせてます。
詳しくはこちらの記事を参照»[mootools]slideBox ver1.0をマウスホイールに対応させる
下方向の処理は手抜いてるので普通にスクロールバー出した方がいいかも。
トップページでコンテンツを非表示にするスクリプトと、
マウスオーバーで一言コメント表示するToolTipも仕込んであります
フォントサイズ指定はYUIのやつ使ってます。
- 1Columun 2BOX
- ＸＭＬ宣言あり
- ドキュメントタイプ：XHTML 1.0 Transitional
- 文字コード：UTF-8
2Col 6box Fixed WideHeader&Footer
- 2Columun 6BOX
- #header>#extra(wrapper)>#other(wrapper)>#content(wrapper)>#menu(wrapper)>#footer
- ＸＭＬ宣言なし
- 文字コード：UTF-8
[icon]クリスマス用フォルダアイコン（プレゼントボックス）
クリスマスボックスのフォルダアイコン作っってみた。デスクトップに置いてあるとプレゼント貰った気分になれるかもｗWeb用素材も同封したよー
GoogleMapSample12:iframe用ページテンプレート
自分用に作っておいたiframe用のGoogleMapsページテンプレート。必要そうなのは一通り書いてあるので、複製して値変えるだけでおｋ。コピペすれば埋め込みも出来る。LatLngを検索するスクリプトファイルとセットで晒しちゃうよー。
AptanaをDreamweaverっぽい色にする
コードビューのカラーリングが違うと計り知れない違和感を感じる件…ってなわけで AptanaのコードビューをDreamweaverっぽい色にするcolファイルを晒してみるテスト。 完全に同じ色にはならないけど雰囲気は似てる … 続きを読む