アイキャッチ

閲覧数: 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日】
カテゴリー公開タグ,
管理画面を制限する

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

ElasticPress 3.5.6
blank

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

ページナビのテキスト
blank

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

閲覧数まとめ
blank

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

緊急事態宣言で外出自粛になり...
blank

せっかくのゴールデンウィークなのに、2年連続で緊急事態宣言下となり、外出自粛中。暇なので小ネタで遊ぶ  続きを読む

検索精度を高める
blank

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

スポンサーリンク

コメントを残す

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