IT小ネタ2

閲覧数: 56(0)

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;
}
カテゴリーIT閑話, 公開タグ,
ページナビのテキスト
2021年4月1日

記事ページの下部に前後の記事(投稿)へのリンクが表示される仕様なのだが、「カテゴリーに制限」をかけて  続きを読む

閲覧数まとめ
blank
2021年3月25日

閃きついでに総合計と週合計をフラグで制御する方式に変更してみた。これまではベタに関数をまるまるコピー  続きを読む

閃きは大事だw
blank
2021年3月23日

このサイトは、あくまでもCMSであるWordPressの構築やクラウドであるAWSの運用ノウハウ取得  続きを読む

ElasticPress 3.5.6
blank
2021年3月19日

マイナーバージョンアップにも関わらず、検索スコアリングのパラメータが微調整された結果、期待する検索結  続きを読む

管理画面を制限する
blank
2021年2月22日

このサイトではネット上のさまざまな攻撃からの防御のため、Wordfenceプラグインの無料版を使用し  続きを読む

検索精度を高める
blank
2020年11月1日

検索ネタを連発するのはElasticsearchやElasticPressがバージョンアップした時の  続きを読む

スポンサーリンク

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください