IT小ネタ2

WordPressのIT小ネタ、その2です。まずは、トップページに表示しているサムネイル画像から。これまではアイキャッチ画像を640×250(px)に切り取った画像にマウスオーバーすると10%拡大表示する単純な仕様でした。新しい仕様では、サムネイル表示している時には少しボケていて、マウスオーバーするとピントが合うような動きにしました。

.entry-thumbnail-sum {
        max-width: 640px;
        max-height: 250px;
        margin: 0 0 20px;
        overflow: hidden;
        }
.entry-thumbnail-sum img {
        -webkit-filter: blur(1px);
        -moz-filter: blur(1px);
        -o-filter: blur(1px);
        filter: blur(1px);
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s;
        display: block;
        margin: auto;
        }
.entry-thumbnail-sum img:hover {
        -webkit-filter: blur(0);
        -moz-filter: blur(0);
        -o-filter: blur(0);
        filter: blur(0);
        -moz-transform: scale(1.1,1.1);
        -webkit-transform: scale(1.1,1.1);
        -o-transform: scale(1.1,1.1);
        -ms-transform: scale(1.1,1.1);
        transform: scale(1.1,1.1);
        }

blur()をかけすぎると、動きとピント合わせの相乗効果で、クルマ酔いみたいになる可能性があるので、最小限にしています。それでも酔う人は酔うかもねw

もう一つは、「続きを読む」を動きのある仕様に変更しました。これまでは抜粋本文の下、中央に「続きを読む→」という単純なリンクを表示していましたが、新しい仕様は、「READ MORE」という文字を右端に寄せ、マウスオーバーでその右端に「→」がさらに右側から現れる、という遊びの要素満載の仕様としました。矢印をGenericonsから表示しているので、Genericon’dというプラグインを追加導入しています。

.more-link {
        margin: 0 0 30px 0;
        display: block;
        float: right;
        padding-right: 25px;
        position: relative;
}
.more-link:after {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: '\F429';
        font-family: "Genericons";
        font-size: 18px;
        line-height: 20px;
        vertical-align: top;
        position: absolute;
        visibility: hidden;
        opacity: 0;
                -moz-opacity: 0;
                filter:alpha(opacity=0);
        margin-left: 30px;
                -webkit-transition: all 500ms ease-in-out;
                -moz-transition: all 500ms ease-in-out;
                -o-transition: all 500ms ease-in-out;
                -ms-transition: all 500ms ease-in-out;
        transition: all 500ms ease-in-out;
}
.more-link:hover:after {
        visibility: visible;
        margin-left: 5px;
        opacity: 1;
                -moz-opacity: 1;
                filter:alpha(opacity=100);
}

ちょっとITネタっぽいサイトの気分を味わって見たw

Related Postsプラグインが更新されると、サムネイルのマウスオーバーでシェードがかかる表現が消えてしまうので、プラグインのmodernテーマ用のCSSに次の設定を追記するのを忘れないようにする。

/* override old CSS for new plugin version with CSS classes */
ul.related_post li a.wp_rp_thumbnail {
        float: left !important;
        margin-right: 10px !important;
}
ul.related_post li a.wp_rp_thumbnail img {
        float: none !important;
        margin-right: 0 !important;
        display: block !important;
}
a.wp_rp_thumbnail img:hover {
        filter:alpha(opacity=50);
        -moz-opacity: 0.5;
        opacity: 0.5;
}