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

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

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

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

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

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

JavaScriptのイベント追加コードでthisキーワードの使用

先回、WordPressサイトでアイキャッチ画像にマウスカーソルを重ねた時にプレビューが表示されるように、JavaScriptでコードを書いている時によく分からない部分でハマってしまった部分を備忘録として投稿します。

続きを読む JavaScriptのイベント追加コードでthisキーワードの使用

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

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

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

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

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

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

Debugger for ChromeでブレイクポイントがUnbound breakpointになる際の対処法

Visual Studio Codeで、拡張機能「Debugger for Chrome」を使ってJavaScriptをデバッグする際に、設定したブレイクポイントで停止せずに「Unbound breakpoint」が表示される場合の対処法です。

続きを読む Debugger for ChromeでブレイクポイントがUnbound breakpointになる際の対処法

VSCodeでIIS上のJavaScriptのブレイクポイントを設定する

先回は、ローカルで保存されているHTMLファイルと「Debugger for Chrome」でブレイクポイントを設定してデバッグする場合の設定方法について紹介しましたが、今回はWebサーバー上で動作する場合の設定方法です。

続きを読む VSCodeでIIS上のJavaScriptのブレイクポイントを設定する

VSCodeでローカルHTMLのJavaScriptのブレイクポイントを設定する

「Visual Studio Code」の機能拡張「Debugger for Chrome」でHTMLやJavaScriptをローカルファイルでブレイクポイントを設定してデバッグする場合の設定方法について紹介します。

続きを読む VSCodeでローカルHTMLのJavaScriptのブレイクポイントを設定する

Visual Studio Codeのテーマ色を変更する(ライト色への変更)

黒基調のVisual Studio Codeのダーク配色、省電力や作業場所が明るい場合には目に優しい配色ですが、作業場所が暗かったりすると、別の配色も試してみたくなります。そんな時に、画面の配色を一瞬で切り替えることができる、テーマ変更を紹介します。 続きを読む Visual Studio Codeのテーマ色を変更する(ライト色への変更)

Visual Studio Codeで拡張機能を使わずにJavaScriptをデバッグする

Visual Studio Code使ってますか? 今回は、機能拡張を使わずに簡単に.jsファイルのデバック方法を紹介したいと思います。 続きを読む Visual Studio Codeで拡張機能を使わずにJavaScriptをデバッグする