アイキャッチ

閲覧数: 99(0)

最近、よそのブログでサムネイルをマウスオーバーすると、ビヨーンって拡大する奴があるでしょ?あれちょっとやってみたいなと思って、このサイトではアイキャッチをマウスオーバーすると枠はそのままで、中だけ10%大きくなるようにしてみた、意外とミーハーw

変更するのは、子テーマである、fashionistas-childのstyle.css、650行目辺りにある、以下の部分。
トップページで一覧表示している時は、高さ制限(250px)しているけど、写真や続きを読む、をクリックされて本文が表示される時は、高さ制限はしないので、最大幅(640px)だけ定義する。拡大によってはみ出す部分は非表示指定(hidden)する。

.entry-thumbnail {
        max-width: 640px;
        margin: 0 0 20px;
        overflow: hidden;
        }

各種ブラウザ対応。

.entry-thumbnail img {
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.5s;
        display: block;
        margin: auto;
        }

マウスオーバーされた時の拡大表示パラメータ、ここは好みで変えていい部分かな。今のところ、拡大率は1.1を指定する。

.entry-thumbnail img:hover {
        -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);
        }

Windowsでも動くのかな?

動くものついでに、SmartSliderというプラグインも入れました。これは、最近流行っているらしい(気がするw)、専用のブログサイトなどで、無料で選べるテーマの中に動きがあるものがあるようだ。

Staticに表示する記事を固定する方法と、Dynamicに与えられた条件で対象記事から選択する方法があるので、今回はDynamicを選んで、対象記事から表示される記事が条件で選択されるようにした。また、細かいところでは、最初のページに表示される右上のボックスは、「最近の更新」とし、最初のページ以外では「最新記事」が表示されるように設定している。

ページ下部には、google Adsenseの広告と「おまかせ記事」が交互に、合計4ボックス表示されるようにしている。広告と記事が紛らわしく、記事だと思ってクリックしたら広告だった、という設定は規約違反になるので、上部にスポンサーリンク、おまかせ記事、と注釈を入れている。これで十分かどうかは判らない。

画像の切り替えは、最初のページで使っている、大きいイメージは「水平スライド」、右上の小さいボックスと、下部ページのボックスは「クロスフェード」を設定しています。切り替え時間は8000msと7500msを交互に、いずれも、表示される画像はDynamic設定のため、12時間でリセットされます。

本文中のサムネイル画像もマウスオーバーでシェードがかかる設定にしました。マウスがどこにいるか一目瞭然w

【最終更新日: 2016年6月14日】
カテゴリー公開タグ,
検索精度を高める
2020年11月1日

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

ElasticPress日本語設定2020年版
blank
2020年10月29日

ElasticsearchをWordpressで利用するためのプラグインであるElasticPres  続きを読む

ElasticPress 3.5
blank
2020年10月22日

Elasticsearch用のプラグインであるElasticPressがメジャーバージョンアップ(3  続きを読む

Elasticsearch 6.8.11
blank
2020年10月2日

2017年末に「2.4.6」から「5.6.5」へバージョンアップして以来の大幅バージョンアップです。  続きを読む

パンくずリスト詳細
blank
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

コメントを残す

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