WordPress CSSカスタマイズ 回転するサムネイル画像3種

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
  • 0

WordPress CSSで、このブログで使用している回転するサムネイル画像3種類のカスタマイズをご紹介します。コピペしてすぐ使用して頂けます。

CSSカスタマイズ

各回転サムネイル

回転するサムネイルのCSSを、ご紹介します。

まず、このブログタイトルで使用しているy軸回転が、こちら。

なまたまご完成系

次が見出し等で使用しているx軸回転が、こちら。

のーらいふノーライフ

最後に、上へ戻るで使用している時計回転の、上へひよこくん がこちら。

上へひよこ

各CSS(imgへ付加する場合)

Y回転のCSS

class の名前は適当なので、お好きな名前を定義して下さい。上記は回転を単なる、ローマ字読みしただけです(笑)

マウスホバーした際にカーソルがポインターに変わるようにしてあります。

回転は行きと帰りで180°づつがちょうどいいのかな?と回転する度数と、回転する速度はお好みでいじって下さい。ちなみに速度は、.6s の部分です。この場合の設定は行きと帰りが0.6secondづつです。

X回転のCSS

class の名前はYをXに変えただけです(笑)安直ですね(笑)

こちらも、マウスホバーした際にカーソルがポインターに変わるようにしてあります。

回転は行きと帰りで360°づつ速度は、行きと帰り 1s づつ(1.0秒)です。

時計回転のCSS

class の名前はXとYを消しただけです。

こちらも、マウスホバーした際にカーソルがポインターに変わるようにしてあります。

回転は行きと帰りで720°づつ速度は、行きと帰り 1s づつです。

各CSS 各タイトルへ付加する場合

それでは、上記のCSSを各タイトルへ付加させるCSSです。

ブログタイトルのY回転CSS

各見出しのX回転CSS(下記は見出し2の例)

上へ戻る時計回転CSS

ここがポイントロゴ

icon-check-square-oこのブログで使用しているテーマSimplicityが上へ戻るへ画像を設定出来るので、このCSSですが、テーマによって画像が使用出来ない場合は、class定義でお願いします。

icon-check-square-o セレクタ名もテーマによって違う名前の場合は、各テーマのスタイルシートで確認し、そのテーマで定義しているセレクタ名へ変更して下さい。

おわりに

いかがでしたでしょうか?。このブログを見て、回転を取り入れたいな?と思っていた方は、上記のCSSをコピペして頂ければ、すぐ使用出来ます。

ご参考・ご活用下されば幸いです。

以上、『WordPress CSSカスタマイズ 回転するサムネイル3種』の記事でした。

ご視聴ありがとうございました。

合わせて読みたい。

WordPressブログカードと、TOC目次を1分で中央寄せに。
WordPressの、ブログカード(テーマ「Simplicity」の場合)と、プラグインTable of Contents Plusの目次タ...
WordPress必須インストーラーFTPを5分で簡単設定。
WordPressで、必ず必要となるインストーラーFTPのご説明です。本当の初心者でも5分で簡単に設定出来ます。さらに、プラグイン一例をイン...
アドセンス他広告プライバシーポリシー『ブログ用テンプレ』
Googleアドセンス広告を貼り付けてブログ及びサイトを運営していくには、プライバシーポリシーの設置が必要となってきます。今回は「なまたまご...
WordPressお問い合わせページを5分で作成。
WordPressでお問い合わせページをプラグイン、Contact Form 7、で5分で作成してしまうという記事です。
WordPressで広告を任意に設置するプラグイン
WordPressでアフィリエイトを、記事だけに設置して、固定ページ内には設置したくない、もしくはその逆とか任意に設置を指定出来るプラグイン...

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする


スポンサーリンク

トップへ戻る