アイキャッチ

閲覧数: 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年5月12日

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

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

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

マイナーチェンジ
blank
2020年3月23日

かれこれ一年近くほったらかしだったので、気合をいれて「テーマ変更」と思っていたのですが、、、いろいろ  続きを読む

6月の検索ワードまとめ
blank
2019年6月30日

6月の検索ワードのまとめです。 意外なところで「zabbixダウングレード」が複数回検索され、単独の  続きを読む

アクセシビリティ対策
blank
2019年6月23日

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際  続きを読む

dockerとproxy
blank
2019年6月18日

dockerやdocker-composeをプロキシ環境下で使うのに苦労したので忘れないようにメモし  続きを読む

コメントを残す

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