JavaScriptの.prependでページ遷移時に中央から拡大するオーバーレイを表示
心地よいエフェクトでページが切り替わるのは、個人的にも好きな体験です。 この記事ではそんなエフェクトを、ネイティブなJavaScriptで作ってみました。 ページ遷移にさりげないエフェクトを取り入れることで良いアクセント …
ConoHa WINGで利用可能になったWEXAL®のパフォーマンスと速さをPageSpeed Insightsで測定
WordPress高速化を行うエンジン「WEXAL®」が、2022年4月21日(木)よりConoHa WING で無料で簡単に利用できるようになりました。 この記事は、そんな「WEXAL®」について の内容です。 当サイ …
JavaScriptの.prepend()でページ遷移時に中央から上下に開くオーバーレイを表示して切り替え
アニメーションでページに動きを与える方法は有効ですが、むやみにアニメーションを使えばよいというわけではないので、注意したいところです。 そんなアニメーションでも、ページ遷移のアニメーションをつけると「状態の変化」が一目瞭 …
JavaScriptの.classList.toggleで右側から開閉するドロワメニュー
引き出しのようにメニューを一覧で表示させるドロワーメニューを、ネイティブなJavaScriptで作ります。 前回は左側から開閉するドロワーメニューでしたが、この記事では右側で開閉するドロワーメニューのスニペットについて解 …
JavaScriptの.onbeforeunloadでページ離脱と指定したaタグ以外でページ遷移する場合確認メッセージの表示
使い方によってはユーザーのストレスになりますが、「ページを離脱する時」と「指定したa タグ以外をクリック」したときにブラウザがメッセージ確認をしてくれるスニペットを作りました。 サンプルも交え解説していきますので、最後ま …
illustratorでグラデーションの不透明マスクをかける方法
久方ぶりに、illustratorでやろうとしましたが、忘れてしまっていた為この記事は、メモとして残しておきたい備忘録的な内容です。 同じ悩みをお持ちの方は、参考にしてみてください。そんな記事です。 目次不透明マスクをか …
最新！レンタルサーバーの割引キャンペーン情報 [2022年5月]
ゴールデンウィーク突入の2022年5月4日現在、「カラフルボックス」「ConoHa WING」「スターサーバー」「エックスサーバー」「mixhost」「ConoHa WING」「ロリポップ！」で初期費用や、利用料金がお得 …
CSSのコピペでできるSANGOのヘッダーの子メニューをにゅいっと表示させるスニペット
当テーマでも利用しているWordPressテーマ「SANGO」のヘッダーに、管理画面で「親」「子」のメニューを設定してパソコンで見ると、hover（マウスカーソルが当たった場合）時に子メニューがヒョイっと顔を出すイケてる …
JavaScriptの.replaceとループを使って複数要素で一致する文字列を置換
JavaScriptの .replace メソッドを使って、複数要素の文字列を置換します。 是非参考にしてみてください。 目次.replace()文字列を置換するサンプル置換される前・された後のHTMLざっくりとしたコー …
JavaScriptの.outerHTMLとループで複数要素のタグと文字列を置換
タグも含まれるJavaScriptの .outerHTML とループを使って、複数要素のタグと文字列を書き換えます。 ぜひ最後までご覧いただけたら嬉しいです。 目次.outerHTMLタグと文字列を置換するサンプル’ + …
