-
【VSCode】ウィンドウの色をカスタマイズできる拡張機能Peacockの設定方法
Visual Studio CodeでWeb制作や開発をしていると、ウィンドウを複数開きながら作業することがよくあるかと思います。 画面上に複数のエディタが表示されていると、どの... -
CSSのtext-strokeプロパティで縁取り文字を実装する方法
ランディングページやWebサイト上で、縁取り文字を見かけたことがあるかと思います。 これをウェブ上で実装するとなると、画像を使用する・SVGを使用する・CSSのtext-sh... -
【Sass】@mixinで背景画像のbackgroundプロパティを簡潔に記述する方法
CSSで背景画像を指定するとき、以下のように記述が多くなりがちですよね。 .bg { background-image: url(sample.jpg); background-size: cover; background-position: c... -
JSとCSSでキラキラ輝く星空エフェクトを実装する方法
JavaScriptとCSSでキラキラ輝く星空エフェクトを作成してみましたので、実装コードの紹介とコードの解説をしていきます。 jQueryなしプラグインなしコピペのみで実装可... -
個別記事ページに同カテゴリーの関連記事一覧を表示する方法【WordPress】
現在表示中の記事内に、同じカテゴリーの関連記事一覧を表示したいという場合がよくありますよね。 特に記事下などに関連記事を表示しておけば、回遊率が向上しPVアップ... -
現在表示中の記事を除外した記事一覧を表示する方法【WordPress】
WordPressの個別投稿ページ内で、「最近の投稿」一覧を表示したい場合があるかと思います。 この場合、記事一覧をそのまま取得してしまうと、現在閲覧中の記事も含まれ... -
MW WP Formでpタグの自動挿入を無効にする方法
MW WP Formでフォームを作成する際に、エディター内で改行するとpタグやbrタグが自動挿入されてしまいます。 不要なタグが自動で挿入されると、デザイン崩れや思いがけ... -
【jQuery】Contact Form 7でエラー箇所にスクロールする方法
WordPressプラグイン「Contact Form 7」では、必須項目が未入力の場合や、入力値が正しくない場合にエラーメッセージを表示してくれます。 しかし、フォームの項目が多... -
【JS】フォームの「同意する」チェックで送信ボタンを有効化する方法
お問い合わせフォームでは、よく「プライバシーポリシーに同意する」や「個人情報の取り扱いに同意する」などのチェックボックスが用意されていることがありますね。 こ... -
背景色付きのテキストが改行しても左右の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と実...