サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
画力アップ
blog.lunatic-code.net
仕事でiOSのヴァージョンが4.2以上かどうか知りたい!という要望があったので、 ちょっとメモって置こう。 var ua='Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5'; ua.match(/iPhone OS (\w+){1,3}/g); var osVar=(RegExp.$1.replace(/_/g, '')+'00').slice(0,3); if(420>=osVar){alert('4.2↑');} else{alert('4.2↓);} iPhone OS X_X_Xという部分を探し出し、 XXXを抜き出して3桁の数
前回は超適当に作ったので、実体参照してる部分でちょん切れたとき、 悲惨な表示になっていたので、その点を改良。 実体参照の文字の文字数の数え方も改め、「&」で5文字と数えていたのを、 「&」の一文字分と数えるようにした。 それぞれ文字参照、10進、16進対応で、 今のところ置換えできるのは「&」「<」「>」「"」の4文字。 他のは・・・まぁいらんだろ(‘A`) 全部やると重くなるだろうし。 ってことで置いておく。 short_title_link_var2 使い方は前と一緒。 既存のテンプレのprevious_post_linkとnext_post_linkを それぞれprevious_post_link_shortとnext_post_link_shortに置き換える。 関数の書式は以下。 第5引数が切りたい文字数。 previous_post_link_short($
某ミクシで質問が上がってたのでちょっと考えてみた。 まぁ、要するにテーブルのvertical-align: middle;みたいなのが出来れば便利なんだが、ってことで。 Firefox、opera、Safariなんかはdisplay: table;が使えるので、それを使えば解決。 問題はIE。 例によって、IE6、7ともにdisplay: table;が使えない。 IE8では使えるらしいですね。 んで、変わりにIEではexpressionが使えるので、 あんま使いたくないけど、これでボックスの高さを取得してやって、 position:absolute;で固定する王道パターンで中央寄せにする。 expressionってあんま資料とかなくて困る。 こんな感じのHTMLに <div class=”box”> <div id=”inner_box”> <p>hoge</p>
以前input buttonを画像にする、とかやったんですが、 input type="file"も画像化したいなぁ、と。 んが、どうやら一筋縄じゃいかなさそうだ。 というのも、レンダリングエンジンによって、 デフォルトの表示方法が違う。 IE(Trident)やFirefox(Gecko)、Opera(Presto)だと、左側にテキストエリアっぽいのがあって、その右にボタンがある。 が、googleChromeやSafari(WebKit)だと、ボタンがあってその右側にテキストだけが表示される。 まぁ、時点で、input:fileをどうにかするよりも、代替コンテンツで対処するしかないわけで。 問題点を挙げると・・・ ・CSSでwidthやheightを指定しても、個別に幅の指定や比率の指定も出来ない。 ・また、Firefoxはcssの幅を無視する。sizeに値を入れてやら
このブログに組み込んでたjavascriptも少しずつjQueryベースへ書き換え中。 ファイルサイズも半分とまでは行かないけれど、40%ほどダイエットに成功。 まぁ、jQuery本体の分があるので、全体的には転送量上がってるわけだけれども。 さて、本題。 Thickboxを使って、画像をポップアップするのはいいんだが、 デフォルトではaタグについてるtitleしか表示できない。 aタグより、中のimgのaltを表示してもらいたいんだが。 ってことで改造。 tb_init()内の var t = this.title || this.alt || this.name || null; を var t = this.childNodes[0].getAttribute(”title”) || this.childNodes[0].getAttribute(”alt”) || nu
wordpressのフォーラムに出てた問題。 この場合だとカテゴリー。 親子階層でリストが入れ子になってるものを、 親カテゴリーと子カテゴリーを別々のドロップダウンメニューにして、 リスト構造から親子関係を持つドロップダウンを自動生成できれば、 何か他にも使えそう、ということで、勉強がてら作ってみる。 wp_list_categoriesでリストを出すと <ul> <li class="categories">カテゴリー <ul> <li class="cat-item cat-item-1"><a href="http://" title="...">...</a> (3) </li> <li class="cat-item cat-item-3"><a href="http://" title="...">...</a> (43) <ul class='child
wordpressのサイドバーなどに他のサイトで配信されてるRSSを表示する方法。 べつにwordpressでなくてもいいんですけど。 php上ならおk。 MagpieRSSを使います。 キャッシュも作ってくれて便利です。 まず、本家でダウンロード。 tar.gzで圧縮されてるので、てきとーな解凍ソフトも必要です。 解凍すると、magpierss-0.72という長ったらしいフォルダ名になるので、 magpierssに変えてやります。 さて、フォルダの中にいくつかサブフォルダとファイルがありますが、 extlibフォルダと、*.inc以外のものは、いらない子なので捨てます('A`) さて、コード書きましょ。 今回はwordpressのRSSを読んでみたいと思います。 以下のコードをreader.phpとしてmagpierss内に保存します。 <?php define('M
zencartでオリジナルのページを追加する。 page_2とかpage_3というのはあるけど、もっと増やしたりする方法。 EZページじゃいまいち自由度が足りないし、多言語対応もできない。 http://example.com/index.php?main_page=hoge というページを作りたい場合・・・ includes\filename.phpに追記 define('FILENAME_DEFINE_HOGE', 'define_hoge.php'); define('FILENAME_HOGE', 'hoge'); 新規作成 \includes\templates\MY_TEMPLATE\templates\tpl_hoge_default.php 中身 <div id="mainContents"?> <?php require($define_page); ?>
wp_plugin 自作のwordpress用プラグインの紹介 wordpress2.5以上に対応。 ナビゲーションの文字を短縮表示させる 前の記事、次の記事へのタイトルナビゲーションの文字列を短縮表示させものです。 wordpress標準関数のprevious_post_link、next_post_linkと置き換えて仕様。 動作してる様子はこのサイトの個別記事を適当に見てください。 short_title_link.zip 説明と言うかなんと言うか http://blog.lunatic-code.net/webdesign/php/28/ http://blog.lunatic-code.net/webdesign/wordpress/17/ 最近投稿した記事タイトルを短縮して表示する 最近投稿した記事タイトルを表示するものです。 サイドバーなどにリストを表示した場
グローバルメニューやサイドバーなんかで、 現在のページを示すために色を変える、なんて事をしたりしますが、 毎回これをどうやって楽にすべぇ、とか思ってました。 1ページ1ページに手作業でつけてくのも面倒だし、 ページが多くなればミスも増えそうです。 何よりこんな単純作業に時間を費やすぐらいなら、 お気に入りの音楽聴きながらコーヒー飲んでタバコ吹かしてるほうが100倍有意義ってもんです。 なので、アクティブなメニューにclassを付加するJavascriptを作ってみました。 考え方としては、ページ内のリンク先と、自ページとのアドレスを比較、 一致するならばクラスを付加って感じです。 大抵こういったメニューはリストなどで記述してると思うので、 今回はaタグに直接クラスをつけるのではなく、 親要素に対してクラスを付加してます。 まずはグローバルメニュー用 // グローバルメニュ
前回のやったinput buttonを画像にしてロールオーバーもつけてみるの改良版です。 今回はリセットボタンも付けてみよう、ということで。 こないだ書いたスクリプトじゃ複数のボタンがあったとき動きませんね('A`) てなわけで、DOM Scriptはこんな感じです。 var inputs = document.getElementsByTagName("input"); for( var i=0,j=inputs.length; i&<j ; i++){ var btn = inputs[i]; if(btn.getAttribute("class") == "input_btn"){ btn.onmouseover = function(){ this.style.backgroundPosition = 'left -30px'; return false; } b
フォーム関係はあんまりいじりたくないんだけど、 企業関係のページだと、メールフォームなんかで結構使うので、私用じゃ使わないのに需要は多い。 特にsubmitボタンを画像にして、さらにオールオーバーさせてくれとか言われたりするとテラメンドクサス。 で、buttonタグだとボタンのごとく(というかボタンだけど)クリックでベコベコ動くのが気に入らない。 ギリギリの幅と高さにするとFirefoxでクリック時に見切れるし('A`) inputでtype="image"も type="reset"とかやりたいときに困る。 ってことで、inputでtype="image"以外の方法。 とりあえずHTMLコードはこんな感じ。 <input class="input_btn" id="btn_send" name="btn_send" value="送信" title="送信" type="su
ちょっと前は一時期そこらじゅうの企業や店舗のHPのトップに 巨大なFlashが張られていたり、 メニューそのものがFlashで作られてて、 非Flash環境じゃリンクたどれねーよハゲとか、 しょうもないイメージ映像見るために いちいちプラグインのインストールさせるんじゃねぇ!とか思ってたんですが。 Youtubeのおかげかどうか知りませんが、爆発的にFlashが普及したおかげで、 最近またそんなサイトが増えてきた気がします。 とはいえ、アクセシビリティやSEOの点から考えると、 バージョンアップを促されたり、 最近のIEの場合だと警告が出てきたり、 ページのアタマにダラダラとFlashの埋め込み構文が書かれていたり、 と、鬱陶しいことこの上なし。 Flashそのものを見せたいのじゃなければ、 非対応環境のユーザーにはただの画像やプレーンなテキストで情報を提供すべき、
このページを最初にブックマークしてみませんか?
『Lunatic-Code』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く