JavaScriptの.querySelectorAll()でaタグにtarget=”_blank”とrel属性を追加
WordPress 4.8 ぐらいからリンクにtarget=”_blank”を付けると自動的に「noopener noreferrer」が付与されるようになっています。 このtarget=”_blank”とrel=”no …
JavaScriptの.createElement() でYouTube動画をモーダルで表示
YouTubeの動画はiframeでそのまま埋め込むと、スマホのような小さい画面で見た時に、親要素のpaddingなどの影響で、より小さく表示されてしまいます。 そんな時、モーダルで全幅表示させてみるのも方法の一つです。 …
JavaScriptのnavigator.clipboard.writeText()でテキストのコピー
テキストフィールドにある文字列を、ボタンクリックしてコピーするスニペットを作りました。 以前jQueryで同じようなスニペットを作りましたが、この記事はその仕様と同じものをネイティブなJavaScriptに書き換えたもの …
コピペでできるSwiperを使ったモーダル＋スライダーのプロフィールカードのスニペット
モーダルは強制力の強いUIですが、スライダーを掛け合わせると「モーダルを閉じる」以外の選択肢ができ、その強制力もそこまで強くならず、逆にそのまま欲しい情報を取得できるので、ユーザーライクなUIになります。 そんなスニペッ …
JavaScriptのSwiperをモーダルでスライダー・カルーセル表示
スライダーの定番「slick」は、jQueryベースながらレスポンシブ対応をしている多機能スライダープラグインです。 そんなslickを使わずに、ネイティブなJavaScriptと「Swiper」を使い、参考にさせて頂い …
JavaScriptの.checkValidity()で必須項目を入力したら送信可能になるフォーム
BtoBのWebマーケティングで「資料請求」や「ユーザー登録」をコンバージョンとしている企業は多いと思います。 そんなコンバージョンに欠かせないフォームで、必須項目を入力したら送信可能にするスニペットをJavaScrip …
JavaScriptの.checkedでチェックボックスへ事前にチェックを入れて表示
チェックボックスの生成時点で、JavaScriptを使い「チェックを入れた状態」で生成させます。 HTMLでcheckedをつける場合のサンプル JavaScriptを使わず、HTMLのみで事前にチェックを入れて表示させ …
JavaScriptの.lengthで読了までの時間と文字数をカウントして表示
ブログでよく見かける「読了までの時間」を、JavaScriptで文字数を取得して出力させてみます。 文字数をカウントする要素は任意のものに変更できるので、ブログ以外でも使えます。ので、参考にしてみてください。 .leng …
JavaScriptの.getElementsByTagNameで取得したタグの中にある文字列を取得して表示
JavaScriptの.getElementsByTagName で指定したタグの文字列を取得して、一覧を表示します。 .getElementsByTagName JavaScriptの.getElementsByTag …
JavaScriptのdocument.cookieで記事一覧レイアウトの設定をページリロードしても生かして表示
JavaScriptではcookieの取得・保存・削除を行うことができます。 そんなcookieを使って、ユーザーが選択した「記事一覧レイアウト」の設定を、ページ離脱後も生かすJavaScriptのスニペットについて解説 …
