JavaScriptの.match()で外部リンクのaタグにtarget=”_blank”とrel属性を付与
以前作成した a タグに target=”_blank”とrel属性を付与するスニペットに、「外部リンクの時だけ」という条件をつけたスニペットを作りました。 ちなみに以下は「全てのリンクにtarget=”_blank”と …
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をつける場合のサンプルHTMLJavaScriptでcheckedをつける場合のサンプル実装の …
JavaScriptの.lengthで読了までの時間と文字数をカウントして表示
ブログでよく見かける「読了までの時間」を、JavaScriptで文字数を取得して出力させてみます。 文字数をカウントする要素は任意のものに変更できるので、ブログ以外でも使えます。ので、参考にしてみてください。 目次.le …
JavaScriptの.getElementsByTagNameで取得したタグの中にある文字列を取得して表示
JavaScriptの.getElementsByTagName で指定したタグの文字列を取得して、一覧を表示します。 目次.getElementsByTagName文字列を取得して表示するサンプルサンプルのコードHTM …
