LavaLamp

このサイトUMLANDのデザインがあまりに素敵だったので、ナビゲーションメニューの部分を真似てLavaLampを使いました。

LavaLamp サイト：Ganesh » Blog Archive » LavaLamp for jQuery lovers!

LavaLampに必要なもの

LavaLampには、jQuery と jQuery Easing プラグインが必要です。

まずjQueryを入手します。
jQuery: The Write Less, Do More, JavaScript Library

LavaLampは、そのままだと最新の jQuery 1.2.* には対応していないので、修正版をダウンロード。
jquery.lavalamp.js 修正版

また最新の Easing プラグインは、関数名が変更されているので注意が必要。
jQuery Easing Plugin

Easing プラグインの関数名変更に注意

LavaLampサイトのチュートリアルでは

$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});

こうなってますが、Easing プラグインの関数名を以下のように新しく変えます

$(function() { $(".lavaLamp").lavaLamp({ fx: "easeOutCubic", speed: 700 })});

Easing プラグインの新しい関数名はこのサイトで確認出来ます。関数と一緒にその動作が目視出来て便利です。
jQuery Easing Plugin Test

千代紙

千代紙の模様は、このサイトで公開されてる素材を使用しました。高品質な和柄模様の素材がたくさんあります。
和柄・和風デザイン用AI・EPSファイル無料ダウンロード－粋屋 日本の伝統文様と伝統色－

Safari の input 要素に表示されるブルーラインを消す

Firefox, IE7, Safari でうまく表示されるかどうか確認しました。

safari だと検索フォームの input要素にフォーカスした時、青のラインでブロックが囲われてしまいます。これを解決するには、CSSでfocus 疑似クラスに「outline: none;」と指定してやれば良かったです。

input:focus{
    outline:none;
}

参考：RedLine Magazine : 油断大敵 focusさん

参考・参照

LavaLamp導入参考：jQuery メニュープラグインLavaLamp – ［JavaScript］All About

photo by kurafire

IE6完全非対応

今回のデザインは透過pngを使いまくっているので、IE6には非完全対応です。もう、gifに変換するのとか、IE PNG Fixも使えないし、IE6ハックやるのが面倒でしかたないし、シェアもだいぶ下がっているらしいから。

今、Google Analytics で今月のこのサイトの訪問者をブラウザ別で調べてみたら、訪問者数のうち 51.85% が IE でそのうちの 59.16% がIE6。大体1/4がIE6です。結構多いなぁ。予想以上だ。あーあ。

去年の８月もついでに調べてみると、IE 61.83% の、IE6 が 78.80% で、まぁそれに比べたら下がってる。みんななんでIE7にアップグレードしないのかな。

LinuxとWindowsXPのFirefox、WindowsXPのSafari、LinuxのKonquerorで、ちゃんと見れるの確認した。SafariのレンダリングはKonquerorと同じKHTMLベースだそう。IE7はさっき確認したらひどい事になってた。

Mac OS X の Firefox と Safari でもちゃんと見れた

ここを参考にIE7用のハックをほどこし、なんとか見れるようにしました。hasLayoutって概念を知らなかったけど、いままで_width:100%;とかやってたのは、hasLayoutの値をtureにしてたわけですね。

• 小粋空間: IE7 の CSS ハック
• hasLayout

Safari・Konquerorのバグ？

Safari・Konquerorでは、子孫セレクタで再度 positon:relative; と指定しなきゃいけない、バグ？があった。

.entry {
position:relative;
}

としてるのに、

#main .entry {
margin:10px;
}

とか書くと position:relative; が無視されて解釈されてるみたいで、再度

#main .entry {
margin:10px;
position:relative;
}

としないといけなかった。

画像の素材を集める

コラージュっぽい感じでペタペタ画像を使ってるんだけど、素材を集めるのが大変でした。

無料で使える画像素材を探すのは、やっぱFlickrが一番探しやすい。権利別に検索出来る所が良い。あとはグループが使える。

CCライセンスのみのテクスチャ画像を集めたFrickrグループ。Flickr: Textures for Layers

他にクオリティが高い画像があるのは、stock.xchngと、deviantART。deviantARTはテクスチャカテゴリなんかが良い。あとは、足成が日本語で使いやすい。

日本の昔の絵画等のデジタル画像はこの辺り。

• 文化遺産オンライン
• -e国宝-
• 貴重資料画像–京都大学電子図書館
• WEB　浮世絵
• 無為庵乃書窓

無為庵乃書窓は個人サイトだけど画像クオリティはかなり高いし、テキストも豊富で、すごく勉強になる良いサイト。

京都大学電子図書館は、何故かサイトなどでのデジタル画像の二次利用を拒否してるけど、もともと絵画などの平面図を写しただけの写真に著作権は発生しない。

サイトを作るにあたって使用した画像

サイトを作るにあたって使用した画像素材を列挙

• 畳縁 by stoicviking
• 畳 和風素材の篆刻素材AOI
• 和紙 （有）遠陽製紙
• 伊藤若沖 動植綵絵 弐代目・青い日記帳　 | 「動植綵絵｣に命名しよう（その１） 弐代目・青い日記帳　 | 「動植綵絵｣に命名しよう（その２）
• 富岡鉄斎 無為庵乃書窓
• 本阿弥光悦 不二山 本阿弥光悦覚え書き : 不二山私論　その一
• 千利休 泪 竹茶杓 銘 泪 文化遺産オンライン
• 芸者写真 by Okinawa Soba by Okinawa Soba
• 木プレート by juliasteinmeyer juliasteinmeyer on deviantART Take Photos.de
• 木壁 by Tzolkin
• 半紙・フェルト他 pixey.de

画像の編集等は全てGimpで行いました

文章は変更可能なので、名文があれば教えてください。

夜明けまえの暗闇に眼ざめながら、
熱い「期待」の感覚をもとめて、
辛い夢の気分の残っている意識を手さぐりする。

引用元：大江健三郎『万延元年のフットボール』

血を縁に残したガラスの破片は夜明けの空気に染まりながら透明に近い。
限りなく透明に近いブルーだ。
僕は立ち上がり、自分のアパートに向かって歩きながら、
このガラスみたいになりたいと思った

引用元：村上龍『限りなく透明にちかいブルー』

見渡すかぎりの曠野です。
その中でぼくは静かに果てしなく成長してゆく壁なのです。

引用元：安部公房『壁』

誰か僕の眠っているうちにそっと絞め殺してくれるものはないか？

引用元：芥川龍之介『歯車』

完璧な文章などといったものは存在しない。
完璧な絶望が存在しないようにね。

引用元：村上春樹『風の歌を聴け』

智に働けば角が立つ。
情に棹させば流される。
意地を通せば窮屈だ。
とかくに人の世は住みにくい。

引用元：夏目漱石『草枕』

えたいの知れない不吉な塊が私の心を始終壓へつけてゐた。

引用元：梶井基次郎『檸檬』

堕ちる道を堕ちきることによって、
自分自身を発見し、
救わなければならない。

引用元：坂口安吾『墜落論』

人間、失格。
もはや、自分は、完全に、人間で無くなりました。

引用元：太宰治『人間失格』

幾時代かがありまして
茶色い戦争ありました

引用元：中原中也『サーカス』

photo by ♥ Lin Pernille Photography

indexと各記事の中段は、マウスオーバーで一秒かけて不透明度をあげるようにしてる。フッターの水平アコーディオンは、haccordionってプラグインをすこし改変して使った。

jQueryは思ってたより簡単に入門できたし、プラグインも豊富。日本語解説も結構ある。

jQuery入門 解説

• jQuery入門 (ver 1.2.1)
• jQuery リファレンス
• jQuery 開発者向けメモ
• Visual jQuery 1.0 (Automated)

jQuery Plugins

• [JS]jQueryのプラグイン33+1選 -2007年11月 | コリス
• [JS]jQueryのプラグイン33+1選 -2007年9月 | コリス
• jQuery Plugins

IEでは hr タグのボーダーを消せない
参照：ヨモツネット 実験室 » hr要素をかっこよく使う

IEでは<hr>のボーダーを消せない例

このBlogのtopページでは今まで、素のhrタグで区切りの線を表示してて、新しく区切り線の画像を作ったのでhrにCSSで背景画像をつけて区切り線にしようと思ったんですが、以下の画像の様にIE6ではhrタグのborderが消えずに変な事になってしまいました。

IE6の場合

FIrefoxの場合

hr { border :0px none #000; } 

とやっても、画像の周辺にボーダーが出来てしまって、border-cololrでの色の変更もうまくいきません。

そもそも<hr>はタダの水平線だった

またIE6のバグかぁ、と思ったんですが、これはバグとゆうよりは hr タグの解釈の仕方の問題なのかもしれません。

(x)html に於ける h1 や blockquote などのタグにはそれぞれ意味があって、h1なら一番めの見出しとゆう意味、blockquoteなら引用文とゆう意味です。これは紙に書いた文字と違って、デザインや見た目などに頼らず、文章の意味を理解しやすくするためにあって、ロボットや視覚障害者を助けます。

で、僕は今まで hr タグは (x)html 言語としての意味のある”区切り”の事だと思ってた、つまり、h1 blockquote などのタグと同様にhtmlページ内における意味がタグに込められているものだと思っていたんですが、そうでは無くて、hr は見栄えのためだけのタグだったんです。

hr タグにはhtmlページに於ける”区切り”とゆう意味はなく、ただの見た目に水平線が描かれるだけの意味は全くないタグなのでした。

hr 要素はb要素やi要素などと同じく「見栄えのための要素」だという指摘を受けました。HTML4.01では非推奨要素にはなっていないものの、XHTML ではプレゼンテーションモジュール（Presentation Module）に分類されていて、「見栄え」のための要素だとのこと。HTML4.01の仕様でも、「水平線を描く」としか書かれておらず、「区切る」とは説明されていません。XHTML2.0では「区切り」を表現するために、separator要素が加わることになってるようです。

1本だけ線を引く – スタイルシートTIPS ふぁくとりー

hr はタダの水平線なので、その定義に沿ってborderを消さない (borderを消すと線じゃなくなる) とゆうIE6の解釈は、あってもいいのかもしれません。余計なお節介でもありますが。

結局僕は、<hr>をdivの空要素<div></div>に変更しました。

参考・参照

IEでは hr タグのボーダーを消せない
ヨモツネット 実験室 » hr要素をかっこよく使う

hr タグは、 XHTML ではプレゼンテーションモジュール（Presentation Module）「見栄え」のための要素
1本だけ線を引く – スタイルシートTIPS ふぁくとりー

photo by docman

Post Avatar の使いかたはここを参照に。
Post Avatar でオサレに着飾る « BorialisのBoroBoro日記

また、記事ごとに表示させている画像には、画像を鏡面反射させるWP Wetfloorプラグインを使っています。

「関連記事」と「最近の記事」にサムネイル画像

デザイン変更に伴って、中段の「関連記事」と「最近の記事」に記事ごとの画像をサイズを小さくして表示したかったので、CSSで画像サイズを変更しようと思ったのですが、CSSだと画質が悪くなるし、鏡面反射がうまくされなくなってします。

なのでサイズの小さなサムネイル画像を作って、Post avatarを書き換え、サムネイル画像を「関連記事」と「最近の記事」の記事ごとに表示するようにしました。

関連過去記事：3カラムにデザインをマイナーチェンジしました

「最近の記事」はget_posts()でループを作って、その中で記事のタイトル the_title()、記事の要約 the_excerpt()、記事ごとの画像 gkl_postavatar() を呼び出しています。

get_posts()の説明

• Template Tags/get posts « WordPress Codex
• power source* » WP: テンプレートタグ get_posts で新着記事リスト等を表示

僕が使用しているテーマのsingle.phpの一部、get_posts()で最近の記事を表示する例。gkl_postavatar()の４番目のパラメータは下記で記している変更に従っています。

        <?php
        $recentposts = get_posts('numberposts=5&offset=0');
        foreach($recentposts as $post) :
        setup_postdata($post);
        ?>
 
        <div class="entry">
     　
          <div class="entry_title">
            <a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a>
          </div>
      

           <?php if (function_exists('gkl_postavatar')) gkl_postavatar('postavatar reflect rheight20 ropacity65', '', '','1'); ?>

           <div class="text">

             <?php the_excerpt(); ?>
           </div>

          <br class="clear_both" />
        </div>

       <?php endforeach; ?>

また、「関連記事」はUltimate Tag Warriorの関連記事を表示する関数 UTW_ShowRelatedPostsForCurrentPost() を使っています。この関数は、デフォルトでは記事の要約と記事の画像が表示されないので、ultimate-tag-warrior-core.php を書き換えて対応しました。この方法はまた今度記事にします。

「Post Avatar」 を書き換えてサイズの違うサムネイル画像も表示

gkl-postavatar.php に変更を加えて、サイズの違うサムネイル画像も表示するようにしました。具体的には gkl-postavatar.php の関数 gkl_postavatar() に、新しいパラメータ $gkl_thumb を追加し、画像のパスを正規表現で書き換えています。また、gkl-postavatr.phpは他にも$post_titleやimgのクラスなんかにも変更を施しています。

以下、変更例。

function gkl_postavatar($class = "", $before = '<div class="postavatar">', $after = '</div>' ,$gkl_thumb="" ) {
    global $post, $gkl_AvatarURL, $gkl_myAvatarDir;
    $post_id = $post->ID;
    $CurrAvatar = get_post_meta($post_id,'postuserpic');
    $CheckAvatar = $gkl_myAvatarDir . $CurrAvatar[0];

    // Display nothing if value is empty or file does not exist
    if ( empty($CurrAvatar) || !file_exists($CheckAvatar) ) {

    } else {
        // Show post avatar
    
        $post_title = $post->post_title ;//変更 altとtitleに記事のタイトルが表示されるように    
        $CurrAvatarLoc = $gkl_AvatarURL . $CurrAvatar[0];

        if ( $CurrAvatarLoc != $gkl_AvatarURL ) {

            $CurrAvatarLoc = str_replace('/', DIRECTORY_SEPARATOR, $gkl_myAvatarDir . ltrim($CurrAvatar[0],'/'));
            if ( empty($gkl_thumb) )
                $CurrAvatarLoc = $gkl_AvatarURL . ltrim($CurrAvatar[0],'/');
            } else {
                $CurrAvatar = ltrim($CurrAvatar[0],'/');
                $CurrAvatar = preg_replace('/([0-9]+\/)?([0-9]+\/)?(.+?).png/', '$1$2thumbnail.$3.png' , $CurrAvatar);
                $CurrAvatarLoc = $gkl_AvatarURL .$CurrAvatar;
            }
            
            $dim = getimagesize("$CurrAvatarLoc");
            $width = $dim[0];
            $height = $dim[1];
                         
            if (empty($before) && empty($after) && !empty($class))
                echo '<img class="'. $class .'" src="'. $CurrAvatarLoc .'" style="width:'. $width .'px; height:'. $height .'px; border:none;" alt="'. $post_title. '" />'."\n";
            else
                echo $before .'<img class="'. $class .'" src="'. $CurrAvatarLoc .'" style="width:'. $width .'px; height:'. $height .'px; border:none;" alt="'. $post_title. '" title="'. $post_title. '" />'. $after ."\n";//$beforeと$afterでかつ$classが使える様に変更
        }
    }
}

僕の場合画像を置いている場所が、Postavarで設定したディレクトリ以下に直接画像を置いているものと、Postavarで設定したディレクトリ/2007/07/hoge.pngのように年と月でディレクトリを作ってその下に置いてあるものがあります。

また、画像の拡張子は全てpngで、hoge.pngのサムネイルはthumnail.hoge.pngとしています。

ですので上記の様な置換になりました。素人が趣味程度でやってるので、実はもっとうまい方法があると思われます。

参照・参考

記事ごとに画像を表示できる WordPress Plugin
Post Avatar

Post Avatar の使いかたはここを参照に。
Post Avatar でオサレに着飾る « BorialisのBoroBoro日記

画像を鏡面反射させるプラグイン
WP Wetfloor

関連過去記事
3カラムにデザインをマイナーチェンジしました

get_posts()の説明

• Template Tags/get posts « WordPress Codex
• power source* » WP: テンプレートタグ get_posts で新着記事リスト等を表示

photo by Otsukare

可変３カラムを作る時の注意点

可変３カラムを作る時の注意点をいくつかあげてみます。

floatするボックスには、paddingとborderを指定してはいけない

可変３カラムを作るのfloatを多用します。その時に一番に注意すべき点がこれだと思います。

floatするボックスにpaddingとborderを指定してはいけないのは、IEバグへの対処で以下の２点の理由からです。

• フロートするボックスにはwidthを指定する
  （理由：CSS2定義 参照元：Visual formatting model）
• widthを指定したボックスにはpaddingとborderを指定してはいけない
  （理由：IE6バグ 参照元：CSSレイアウトの定石　WinIE6バグ回避法）

よってfloatするボックスにはwidthを絶対指定しなければならず、widthを指定したので、paddingとborderを指定してはいけません。

IE6 では min-width、max-widthに対応してない

リキッドレイアウトでは最大幅と最小幅が結構重要になってきますが、IE6 では min-width、max-widthに対応してないので（XML宣言すると対応しなくなるので）、使わないか、もしくは代用方法をとります。

CSSのみで対応させる（試したけど僕の環境ではうまくいかなかった。）
Lucky bag::blog: IE で min-width を指定する方法

スクリプトを使う方法
あるＳＥのつぶやき: minmax.js – IEでCSSのmax-widthなどを使えるようにするライブラリ

ブロック要素のセンタリング

margin-left: auto; margin-right: auto; を指定すると、そのボックス内のブロック要素（divなど）がセンタリングされるはずなのですが、IE6 ではそれが効きません。

しかし、text-align:center; してやると、本来は適用しないブロック要素までセンタリングするので、それで代用します。

%での幅指定とカラム落ち

ボックスをあんまりカツカツに詰めすぎるとカラムが落ちてしまいます。そうならないように、足して100%にならないようにします。

例えば左フロートはwidth:50%; なら右フロートはwidth:49%; で足して99%。

HTMLとCSSの例

新しくデザインを変更した部分は、特にたいした事をしてないリキッド（可変）レイアウトの３カラムです。記事の本文とかは900pxの固定幅のレイアウトなんだけど、新しいデザインの部分は可変レイアウトで、min-widthとmax-widthで最大最小幅を決めています。

HTMLとCSSはそれぞれこんな感じにしました。

<body>

<div id="container">

    <div id="middle">

        <div id="middle_left">
          コメント・トラックバック
        </div>

        <div id="middle_right">

            <div id="middle_right_left">
              関連記事
            </div>

            <div id="middle_right_right">
              最近の記事
            </div>

        </div><!--middle_right 閉じ-->
  
    </div><!--middle 閉じ-->

</div><!--container 閉じ-->

</body>

* {
    margin:0;
    padding:0;
}

#container{
        width:100%;  
        margin:0px auto;
        text-align:center; 
/*text-align:center;は、#middleのセンタリング*/
}

#middle {
    min-width:900px;
    max-width:1200px;
    margin:0 10px;
}

#middle_left{
    width:49%;
    float:left;
}

#middle_right{
    width:50%;
    float:right;
}

#middle_right_left {
    float:left;
    width:49%;
}

#middle_right_right {
    float:right;
    width:49%;
}

参照・参考

CSSレイアウトの定石　WinIE6バグ回避法

CSSによる段組（マルチカラム）レイアウト講座

Cascading Style Sheets, Level 2

hover擬似クラス使用例

例として、id=testのspan要素に：hover擬似クラスを使って、テキストの色を#ff0000に変える場合の表示例とコードを以下に示してみます。
“このテキストの色が変わる”って文字列の上にカーソルを持っていくと、文字の色が赤色に変わる。

表示例:このテキストの色が変わる

コード:

<span id=test>このテキストの色が変わる</span>

span#test:hover { color : #ff0000 ; }

こんな感じに:hoverはどの要素にも適応される決まり¹ になってるけど、IE6ではリンクアンカーa要素以外の:hoverはサポートされてない。

ちなみに最新のIE7では、:hoverと:activeには対応してるけど、:focus擬似クラスと:before、:after擬似要素には対応していない。²

csshover.htc導入手順

Whatever:hoverで配布されてるcsshover.htcには２つの種類があって、

1. :hoverと:activeをIEで適応させるもの (ver1)
2. :hoverと:activeと:focusもIEで適応させるもの (ver2)

今回はver1の方 (ver1.42.060206) を導入した。

導入にはbody要素にIE独自のCSSプロパティ behavior を使って、HTCって聞きなれないスクリプトファイルを読み込みだけ。

body { behavior:url("csshover.htc"); }

ただ注意すべきは、 behavior の url にはcssファイルからの相対パスじゃなくて、そのcssファイルを読み込んでる　html からの相対パスを書かなくてはいけないって事。なんかややこしいので、僕は絶対パスにしてhead部分に導入しました。

<head>
<style type="text/css">
<!--
body { behavior : url ("絶対パス/csshover.htc") ; }
--> 
</style>
</head>

WordPressではheader.phpに。
僕は適応してるテーマファイル以下にscriptsディレクトリを作って、そこでスクリプトを管理しているので、以下のようにしました。

<style>
body { behavior : url ( "<?php bloginfo('template_directory'); ?>/scripts/csshover.htc" ) ; }
</style>

参照・参考・注釈

csshover.htc導入
jmblog.jp – IEでa要素以外に:hover擬似クラスを適用させる

CSSプロパティ behavior について
?D of K – behaviorに関してのまとめ

1. CSS2では動的擬似クラスとしてどの要素にも適応されるよう定義されてる。
   Selectors [back]
2. IE7のCSS対応状況
   【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (MYCOMジャーナル)
   【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (MYCOMジャーナル) [back]

WordPressを使っている、もしくは使おうとしている方の参考になれば、これ幸い。水色の線で囲ってあるのがWordpressのplugin、黄色はplugin以外のもの。

他のWordpress利用者の使用中plugin画像。
[TB企画][plugin][WordPress]WordPressのプラグインを視覚的に紹介 : oo8ooNILCIL
hiromasa.zone :o) ≫ WordPress プラグイン
当サイトで使用中の WP プラグイン | Blog Archive | Swirling Mist
現在使っているプラグインをキャプチャで表示 ≪ BorialisのBoroBoro日記

えー、僕のようにオブジェクト志向やらDOMやらprototypeやらを全く理解していなくても簡単に導入出来るように、テンプレートを配布しているサイトがあったので、そこを参考にしました。moo.fxのチュートリアルや他にタブやカラム風のデザインもあります。
NYOKIGLITTER – Horizontal Accordion

上記のサイトからzipファイルをダウンロードすると、htmlとscriptsと画像が入っています。moo.fx.js、moo.fx.pack.js、prototype.jsと三つのスクリプトを使っています。cssで装飾出来るので結構簡単にイメージ通りになりました。アコーディオン効果を出せるライブラリにRicoってのもあるみたいですが、こっちはどうもcssが使えないっぽい。

ダウンロードしたhtmlはjavascriptsの部分をいじらなければ、class=”display”がtoggleボタンになっていて、class=”stretcher”が展開される内容です。そのままでは、toggleボタンの画像が一種類しか使用できないので、こんな感じで空divを使ってcssで画像を指定してみました。

<h3 class="display" title="two">
  <div id="recentcomment"></div>
</h3>

<div class="stretcher">
  <p>あわわあわわ</p>
</div>