Retujyou.com どうにもならない劣情の種子を植え付けられたばかりに

サイトデザインを新しくしました。一応ちゃんと見れるような所まで出来たから、取りあえずで。ナビゲーションとフッターは、もっと変えていきたいところ。
IE6完全非対応
今回のデザインは透過pngを使いまくっているので、IE6 [...]

背景画像のデザインを新しくしました。日本語文学の傑作から名文を引用して使っています。
文章は変更可能なので、名文があれば教えてください。

夜明けまえの暗闇に眼ざめながら、
熱い「期待」の感覚をもとめて、
辛い夢の気分の [...]

indexページと各記事の中段、フッターの水平アコーディオンにjQueryを使ってみた。
indexと各記事の中段は、マウスオーバーで一秒かけて不透明度をあげるようにしてる。フッターの水平アコーディオンは、haccord [...]

IE6 (Internet Explorer 6) では、線を引くブロック要素 hr タグのボーダー (border) を CSS で { border :0px none; } としても消せません。
IEでは hr タ [...]

このBlogでは記事ごとに画像を表示できる Wordpress Plugin Post Avatarを使って、記事の右上に画像を表示させています。
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 « [...]