JavaScriptの.innerHTMLでフォームのテキストエリアに文字を挿入
フォームによく使われる textarea に、ボタンクリックであらかじめ設定した文字を挿入するスニペットを作りました。 フォームのカスタマイズや、定型になる例文を挿入したいなど、textarea のカスタマイズとして参考 …
JavaScriptのsetTimeout()でフェードイン・フェードアウトしてふわっとページを切り替え
CSSの「@keyframes」で指定したアニメーションを、setTimeout()のタイマーで動かせてフェードイン・フェードアウトさせるスニペットを作りました。 設置するだけでページ遷移・離脱時にふわっとなり、少し動き …
まだ間に合う！レンタルサーバーの割引キャンペーン情報 [2022年4月]
2022年4月現在、「ロリポップ！」「カラフルボックス」「mixhost」「ConoHa WING」「エックスサーバー」の5社で初期費用や、利用料金がお得になるキャンペーンを実施中です。 この記事では、記事執筆時点の5社 …
JavaScriptの.setAttribute()で全てのaタグにGoogleAnalyticsのイベントトラッキングを付与[gtag.js編]
直接 a タグに、HTMLでイベントトラッキングのコードを書いても何ら問題ありませんが、対象になる a タグの数が多い場合非常に面倒なので、そんな時に使えるスニペットを作りました。 目次Google Analyticsの …
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」を使い、参考にさせて頂い …
