WordPressのアイキャッチ画像をマウスのホバーでアニメーションさせる(スマホ対応版)

先回、YouTubeや動画の視聴サイトで、サムネイル画像にマウスカーソルを重ねた時にプレビューが表示されるように、アイキャッチ画像を動かす仕組みをタッチスクリーンなどに対応したスマホ対応版として投稿します。

続きを読む WordPressのアイキャッチ画像をマウスのホバーでアニメーションさせる(スマホ対応版)

WordPressのアイキャッチ画像をマウスのホバーでアニメーションさせる(最終版)

先回から作っているWordPressのアイキャッチ画像にマウスカーソルを重ねた時にプレビューが表示されるように、JavaScriptを使った仕組みで最後の仕上げをした部分を最終版として投稿します。

続きを読む WordPressのアイキャッチ画像をマウスのホバーでアニメーションさせる(最終版)

WordPressのアイキャッチ画像をマウスのホバーでアニメーションさせる(改良版)

先回、YouTubeや動画の視聴サイトで、サムネイル画像にマウスカーソルを重ねた時にプレビューが表示されるように、JavaScriptを使って変更した部分を実際に動かしてみたら、思いもよらない部分が出てきたので、修正した部分を改良版として投稿します。

続きを読む WordPressのアイキャッチ画像をマウスのホバーでアニメーションさせる(改良版)

WordPressのアイキャッチ画像をマウスのホバーでアニメーションさせる

最近のYouTubeや動画の視聴サイトで、サムネイル画像にマウスカーソルを重ねた時にプレビューが表示される挙動になっているのを、WordPressのアイキャッチ画像でやってみようと調べたところ、記事を見かけなかったので実際にやってみた記録を備忘録的に投稿します。

続きを読む WordPressのアイキャッチ画像をマウスのホバーでアニメーションさせる

WordPressの[タグクラウド]のスタイル変更

WordPressの標準ウィジェットで用意されている[タグクラウド]のスタイル変更をしようとして、少し悩んだので備忘録的に投稿しておきます。

続きを読む WordPressの[タグクラウド]のスタイル変更

Jetpackの共有ボタンをカスタマイズする(はてなブックマークを追加する)

以前に[ Jetpackのソーシャル共有アイコンを表示する]を投稿しましたが、設定もこっちの方が簡単です。既存の共有ボタン以外にも「はてなブックマーク」など追加することもできました。 続きを読む Jetpackの共有ボタンをカスタマイズする(はてなブックマークを追加する)

2列の横リストを簡単CSSでレスポンシブルにする

AdSenseの広告ユニットを2枚横並びに記事に貼り付ける方法を考えていて、簡単なスタイルシートでレスポンシブル対応が出来たので備忘録的な記事で投稿します。 続きを読む 2列の横リストを簡単CSSでレスポンシブルにする

Google広告のレスポンシブルデザインの背景色を編集

WordPressでGoogle Adsenseのレスポンシブル広告を表示した場合に、背景色が薄い黄色になってしまいます。画像広告のサイズがレスポンシブルで表示される矩形よりも小さい場合に、広告画像と矩形の余白部分が薄い黄色で表示されてしまいます。

具体的には、こんな感じ

google-adsense-backgroundcolor

WordPressで利用してるテーマによっては背景がこんな感じになってしまうみたいです。結構気になるので、CSSを変更してみました。
続きを読む Google広告のレスポンシブルデザインの背景色を編集