アイキャッチ

最近、よそのブログでサムネイルをマウスオーバーすると、ビヨーンって拡大する奴があるでしょ？あれちょっとやってみたいなと思って、このサイトではアイキャッチをマウスオーバーすると枠はそのままで、中だけ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というプラグインも入れました。これは、最近流行っているらしい(気がするｗ)、専用のブログサイトなどで、無料で選べるテーマの中に動きがあるものがあるようだ。

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

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

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

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

最終更新日: 2016年6月14日