-
背景色付きのテキストが改行しても左右のpaddingを保持する方法
background-colorやbackground-imageのグラデーション関数を使用することで、文字に背景色をつけることができますね。（↓例） サンプルテキストサンプルテキストサンプ... -
Sassの@mixinで2色のグラデーションを簡潔に記述する方法
サイト制作において、グラデーションカラーを使用する機会がよくあります。 グラデーションカラーはbackground-imageプロパティのlinear-gradient関数を使用することで... -
【CSS】columnsプロパティで本のような段組みレイアウトを実装する方法
今回の記事では、CSSのcolumnsプロパティを使用して、段組みレイアウトを実装する方法を紹介します。 段組みレイアウトとは、本や新聞などで使われているように、長い文... -
【WordPress】PHPのDate関数で現在の年を自動更新する方法
Webサイト上では、フッターのコピーライト表記など、現在の年を表示したい場合があります。 HTML上で年を直接記入することもできますが、その場合は更新するのを忘れた... -
コピーライトなどの年号をJavaScriptで自動更新する方法
Webサイトのフッターのコピーライト表記など、今年の年を表示したい場合がありますよね。 HTMLでベタ書きしてもよいのですが、そうすると毎年書き直す必要があります。 ... -
【WordPress】functions.phpのコードを分割して管理する方法
WordPressテーマの必須ファイルであるfunctions.phpを編集することで、テーマを拡張したり必要な機能を自作して使用することができますね。 オリジナルのWordPressテー... -
【Swiper】スライド総数と現在のスライド番号を表示する方法
スライダーを作成できるJSプラグイン「Swiper」で、以下のようなスライダーを作成する方法を紹介します。 スライド総数を表示現在表示中のスライド番号を表示 DEMOと実... -
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枚ずつ...
