Toro_Unit

  • 今更だけど透過PNG対策。

    背景に指定するときは

    [css]behavior: expression(
    this.style.behavior || (
    this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod = crop,src = ‘"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"’ )",
    this.style.backgroundImage = "none",
    this.style.behavior = "none"[/css]

    imgに直接やる場合は

    xhtml

    [xhtml]
    <div>
    <a href="#">
    <img src="hoge.png" alt="" width="200" height="100" />
    </a></div>
    [/xhtml]

    css

    [css]
    * html div{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hoge.png);
    width:200px;
    height:100px;
    }
    * html div a img {display:none;}
    [/css]

    なんて書いてやる。

    filterで透過PNGを表示させて、通常のPNGをdisplay:noneで消す。
    面倒ですね・・・・

    ってなわけで通常はIE PNG Fix 2.0 Alpha 4をワタクシは使ってます。

  • 背景が下まででない件について。

    IE7 IE6のバグだかなんだかですが。
    ちゃんとclearしてるし、IE8やfirefoxとかでは正常に表示される場合。

    その要素に
    min-height:100%(IE7)
    height:100%(IE6)
    を書いてやればちゃんとなります。

    あと横並びのメニューを作るときに

    [xhtml]
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    [/xhtml]

    というソースがあるとすると、

    [css]
    li{
    list-style:none;
    float:left;
    }

    a{
    display:block;
    width:150px;
    height:30px;
    }
    [/css]

    とか書きます。

    floatがaのプロパティに来てても普通は動作するのですが、IE6&7だと、前のメニューの右下に次のメニューが配置されます。ご注意。。。

  • WordPressのアップデートとタイムアウト

    WordPressの自動アップグレードがよくタイムアウトで失敗するんですよね。

    んで、その解決法。

    /wp-admin/includes/file.php

    [php]
    $response = wp_remote_get($url, array(‘timeout’ => 60));
    [/php]

    この数字を大きく、（自分は240で行けました。）すると解決できます。サーバーの通信速度とかのもんだいだと思いますが。

    ただ、アップデートで上書きされてしまうので、毎度毎度書き換えてあげましょう・・・・

  • アンカーテキストとoverflow

    アンカーテキスト（<a herf=”#header”>的な）を指定して、ページ内リンクをつくったとき、

    そのリンク先の親ボックスにoverflow:hiddenが指定されていると

    そのリンクに飛んだときに、親ボックスが上にずれます。

    とりあえず、ブラウザ特有のバグというわけではないようです。。。。

    clearfixをDreamweaver3とかで適用して言う場合は少し注意が必要ですね。。。。。

  • Lightboxをいろいろ試してみた。

    僕が運営するサイトのリニューアルにLightboxでスライドショーを作ったり、いろいろしたかったので、たくさんスクリプトを試してみた。


    Lightbox2

    定番です。

    Shadowbox

    設置方法はコチラに。
    http://www.two-hearts.net/2009/05/shadowboxjs-version-30b.html

    [xhtml]
    <link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="shadowbox/shadowbox.js"></script>
    <script type="text/javascript">
    Shadowbox.init({
    language: "en",
    players: ["img","swf"]});
    </script>
    [/xhtml]

    で、
    [xhtml]<a href="movie.swf" rel="shadowbox;width=500;height=375"><img src="images/movie.jpg" /></a>[/xhtml]
    とかで動いてくれます。

    ImageMapやFLASHにも対応してるのはかなり高得点。protopypeやJqueryなど6種類のライブラリを使えるのはすごい。

    languageをjaにすると、“Next”とかが“次へ”になりますが、エンコードがuft-8じゃないとダメらしい。

    Multibox

    これもFlash等に対応してて使いやすい。

    何故かPHPと一緒に使うと、いらないスクロールバーがfirefoxとOperaで出て断念しましたが。

    スライドショーのグループ化？的な事が出来ないのがちょっと難点。アニメーションはとても綺麗。

    Fancybox

    軽い。Jquery系。Youtube等も読める。

    prettyPhoto a jQuery lightbox clone

    Jquery系。角が丸いのがオサレ（笑）
    コチラもかなりたくさんの形式に対応しております。若干重い気もしますが。

    とりあえず、ShadowBoxが使えれば大体OKなんじゃないかと、思ってみたり。

  • HTML5を少し勉強してみる。

    HTML5が来年の秋に正式勧告されるし、主要ブラウザも対応してきた（IE？なんのこと？ｗ）のでちょっとそれでサイトを組んでみようかと思っていたり。

    サイトによっていろいろ違うのでいまいちピンと来なかったのですが、こんなの見つけました。

    http://web.g.hatena.ne.jp/keyword/article

    独立可能＝フィードで配信出来る

    これは大きなヒント。おそらく、ナビゲーションとか、広告とか、そういうページの”本文”的な部分に使うのが、article

    で、その中の項目、往々にして見出しを含む、ものがsectionってところかや？

    とりあえず、
    [html]
    <body>
    <header>
    <h1>Site Name</h1>
    </header>

    <nav>
    <ul>
    <li><a href="#">navi1</a></li>
    <li><a href="#">navi2</a></li>
    <li><a href="#">navi3</a></li>
    </ul>
    </nav>

    <article>

    <section>
    <h2>Title1</h2>
    <p>…</p>
    </section>

    <section>
    <h2>Title2</h2>
    <p>…</p>
    </section>

    </article>
    <aside>…</aside>
    <footer>…</footer>
    </body>
    [/html]
    的なマークアップになる感じですね。

    移行するのが大変なんですけど、コードの終わりの方の</div></div>・・・・・・から解放されるというだけで十分なメリットが。

  • 標準化。

    http://itpro.nikkeibp.co.jp/article/NEWS/20090713/333747/?ST=oss
    会津若松市が冊子「オープンオフィスにしませんか？」をクリエティブ・コモンズで公開

    だそうな。一昔前にパワーポイントで作ったファイルをoooで開いてみたら、大量のレイアウト崩れが発生して、読めたもんじゃ無かったけど・・・・

    Google docsに対抗して、MicrosoftもブラウザでOfficeの簡易版を公開するようです。

    環境の多様化によってHTMLとかみたいな、オープンなフォーマットが標準化されてくれれば僕みたいなWindowsとLinux、まれにMacな人間にはうれしい限りです。

    でもそうは行かないのが現実・・・・・

    とりあえず、HTML5が楽しみな私です。

    そろそろ使ってみたいのですが、まだIEやモバイルを考えると微妙。。。

    というか、accesskeyとかなくなるけど、ケータイ向けのコンテンツはどうするんだ・・・・

    正直、ダブルスタンダードになって苦労するのは勘弁していただきたい。。。。

  • 今更ながら、CSSテクニックまとめ。(1)

    まぁ備忘録ですからね。CSSで使えるテクニックのまとめです。

    Clearfix

    [css]
    .clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
    }

    /* Win IE7 */
    *:first-child+html .clearfix
    {
    height: 1%;
    }
    /* End Win IE7 */

    /* Win IE6 \*/
    * html .clearfix
    {
    height: 1%;
    }
    /* End Win IE6 */

    /* Mac IE\*//*/
    .clearfix
    {
    display: inline-table;
    }
    /* End Mac IE */
    [/css]
    http://blog.d-spica.com/entry/070307clearfix.html

    cssでのロールオーバー実装と背景画像によるテキスト置換。

    XHTML
    [xhtml]
    <li id="bt1" class="menu_button"><a href="preview.php">preview</a></li>
    [/xhtml]
    CSS
    [css]
    .menu_button a {
    overflow:hidden;
    height:50px;
    text-indent:-9999px;
    display:block;
    }
    .menu_button:hover {
    background-position:-230px;
    }
    #bt1 {
    background-image:url(../images/menu_01.gif);
    }
    [/css]
    （Crude　Music Web Site　で使いますのでリニューアル後にでも見てください。）

  • Google OSがついに。

    http://itpro.nikkeibp.co.jp/article/NEWS/20090708/333365/?ST=oss

    Google Chrome OSなるものが、ついに出るそうです。今年中にはオープンソースとして公開する予定らしい。

    たぶんUbuntuベースなんでしょうね。来たら自分も乗り換えようかな。

    まだGoogle ChromeのLinux版もリリースされてないけど・・・・

    gOSの立場が（笑）

  • ubuntuで起動時に外付けHDD(NTFS)を読み込む。

    NFTSの外付けHDDを起動時にマウントされるには？が少しだけ解決したので。
    え？Linuxって普通にできないの？って思うけど、できないものはしかたがない。

    と言うわけで色々調べたり試行錯誤。

    私はkubuntu使いですが、多分他にも使えるのでは。

    dev/sdb1を/media/hogeにマウントしたい場合。
    modprobe usb-storage
    mount -t ntfs /dev/sdb1 /media/hoge
    をetc/rc.localに記述。

    これで問題なく動作しております。

    fstabに記述してもUSB接続のものはどうやらだめらしい。

    内蔵のものはfstabに記述してやればぜんぜんOK。