以前、タブ切り替え型のコンテンツを作成する方法をご紹介いたしました。 通常、他のページからタブが設置されたページにアクセスすると、1つ目のタブがアクティブな状態になります。ですが、他のページからアクセスした時に、指定した…
他のページからのアクセス時に特定のタブコンテンツを開く方法
imgタグで設置したSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリ「deSVG」
deSVGは、imgタグで設置しているSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリです。 SVGの色をCSSで変更しようと思った場合、imgタグで設置されているSVGファイルは変更できず…
wp_enqueue_scriptsで読み込んでいるJavaScriptファイルにPHPの変数・配列の値を渡す方法
WordPressで、外部JavaScriptファイルにPHPの変数・配列の値を渡して、JavaScriptファイル内で使えるようにする方法をご紹介いたします。 wp_enqueue_scriptsで読み込んでいるJav…
jQueryを使ってボタンをクリックする度に要素のテキストを切り替える方法
jQueryを使って、ボタンをクリックする度に要素の中のテキストを切り替える方法をご紹介いたします。 例えば、「開く」と書かれたボタンをクリックすると、テキストを「閉じる」に切り替えたい時などに便利です。 jQueryを…
画像や動画の遅延読み込みを実装できるWordPressプラグイン「a3 Lazy Load」
a3 Lazy Loadは、サイトに遅延読み込みを実装することができるWordPressプラグインです。 画像や動画が可視範囲に到達してから読み込みを開始するようになるため、サイトアクセス時に読み込むコンテンツ量が減って…
アニメーションGIFをマウスホバーやクリックで再生・停止できるようになるJavaScriptライブラリ「Freezeframe.js」
Freezeframe.jsは、マウスホバーやクリックによってアニメーションGIFの再生・停止を制御できるようにするJavaScriptライブラリです。 以下のデモページで挙動を確認できます。 デモページを見る Free…
YouTube動画や画像をポップアップ表示できるjQueryプラグイン「Lity」
Lityは、YouTube動画や画像などをポップアップで表示できるjQueryプラグインです。動画や画像のリンクをクリックすることで、いわゆるモーダルウインドウとして表示させることができます。 配布サイトでデモが用意され…
IE11でもpicture要素を使えるようにするポリフィル「Picturefill.js」
Picturefill.jsは、picture要素に対応していないブラウザでもpicture要素による画像の切り替えができるようになるポリフィルです。 picture要素を使うことで、ブラウザの幅によって画像を出し分ける…
jQueryで::beforeや::after等の擬似要素のプロパティを操作する方法
jQueryでは「$(‘.example::before’).css(‘color’,’#ccc’);」のように指定しても、疑似要素はDOMではない…
mailtoリンクをクリックした時の挙動をわかりやすくするスクリプト「MailtoUI」
MailtoUIは、mailtoリンクをクリックした時の挙動をわかりやすくするためのスクリプトです。 MailtoUIを導入することで、mailtoリンクをクリックした時にすぐメーラーが開かず、メールアプリを起動するか、…