-
Contact Form 7で自動挿入されるpタグとbrタグを削除する方法
WordPressプラグイン「Contact Form 7」でお問い合わせフォームを作成する際に、エディタ上で改行するとpタグやbrタグが自動挿入されてしまいます。 不要なタグが入ると... -
MW WP Form＆Zipaddr-JPで複数の住所入力欄に自動住所補完を実装する方法
前回の記事で、「MW WP Form」と「Zipaddr-JP」を使用して住所自動入力の機能を実装する方法を紹介しました。 /linkはる 今回はその拡張版として、同じフォーム内に住所... -
MW WP Form＆Zipaddr-JPで郵便番号の自動入力機能を実装する方法
ウェブページ内のお問い合わせフォームでは「郵便番号を入力すると住所が自動で挿入される」という機能が実装されていることが多いですね。 特に住所の記入欄があるフォ... -
【jQuery】トップに戻るスムーススクロール機能を実装する方法
クリックするとページの一番上までスクロールしながら戻る機能を、jQueryで実装する方法を紹介します。 以前の記事で、素のJavaScriptで同じ機能の実装方法を紹介しまし... -
【Swiper】スライドを左右にはみ出させる＆中央のスライドを大きくする方法
今回はSwiperのカスタマイズ方法として、以下のようなスライダーを作成する方法を紹介します。 スライドを1度に3枚表示する中央のスライドは大きく、左右のスライドは少... -
JavaScriptで生年月日から現在の年齢を計算する方法
ポートフォリオサイトなどで、自身の年齢を表示したい場合がありますよね。 HTMLにそのまま年齢を直書きすることも可能ですが、その場合は毎年手動で更新する必要があり... -
CSSのみで色が自動的に切り替わる信号機を作成する方法
CSSアニメーションを使用して、自動的に色が切り替わる信号機を作ってみました。 以下が実際の制作物です。 コピペ用の実装コード一式とコードの解説をしていきますので... -
【HTMLのみ】detailsとsummaryタグでアコーディオンを作成する方法
Webサイト上には、クリックで開閉できるアコーディオンメニュー（折りたたみメニュー）がよく使用されていますね。 当サイトでも紹介している通り、アコーディオンメニ... -
【Swiper】一定速度で横に流れ続ける無限ループスライドショーを実装する方法
高機能なスライダーを実装できるJSライブラリ「Swiper」を使用して、以下のような機能のスライドショーを作成していきます。 一定速度で横方向にゆっくり流れる1枚ずつ... -
【コピペOK】Contact Form 7でお問い合わせ完了ページに遷移させる方法
WordPressプラグインの「Contact Form 7」では、簡単にお問い合わせフォームを作成することができますね。 しかし標準ではお問い合わせ完了ページ（サンクスページ）を... -
MW WP Formでメールアドレス確認用の入力欄を作成する方法
WEBサイト内のほとんどのお問い合わせフォームでは、メールアドレスの入力間違いなどを防ぐために、 メールアドレス入力欄メールアドレス確認用の入力欄 のように、メー... -
【コピペOK】CSSで方眼紙のような模様の背景を実装する方法
Web上で方眼紙のような模様の背景を実装したい場合があるかと思います。 方眼紙模様の背景画像を用意して使うこともできますが、その場合は色を変えたり、線の太さを変... -
【モダンブラウザ対応】アスペクト比を固定するaspect-ratioプロパティの使い方
以前の記事で、padding-topの性質を利用して、要素のアスペクト比を固定しつつレスポンシブ化する方法を紹介しました。 しかしこの方法だと、比率を計算して%で表記する... -
素のJSとSwiperでモーダル内にスライダーを表示する方法
今回の記事では、モーダルとスライダーを組み合わせて使用する方法を紹介していきます。 ページ上のボタンをクリックするとモーダルが開き、その中にスライダーを設置す... -
開始日からの経過年月を自動で計算する機能をJavaScriptで実装する方法【ポートフォリオに最適】
ポートフォリオサイトなどで自身のスキルを示したい時、経験年月を合わせて記載することが多いかと思います。 参考：筆者のポートフォリオサイト HTMLで年月をベタ書き... -
CSSのグラデーションで文字に2重下線を引く方法【改行にも対応可能】
文章を強調したいときに、2重下線で文字を装飾したいという場面があるかと思います。 CSSには2重下線を実装できるtext-decorationプロパティがありますが、 色を一色し...
