-
sectionやarticleの使い分け！よく使うセマンティック要素の使い方を初心者向けに解説
コーディングを学び始めた初学書の方にとって、最初に使いどころに迷うのがsectionタグやarticleタグといったセマンティック要素ではないでしょうか？ sectionタグやarticleタグなどは見た目上はdivタグ…
-
【Contact Form 7】ページタイトルの値をフォームに自動反映する方法（投稿・カスタム投稿・固定ページ）
不動産サイトやリクルートサイトでは、投稿やカスタム投稿で運用している物件情報ページや求人情報ページに共通のお問い合わせフォームを設置し、フォームが送信された際に「どのページから送信されたのか」が分かるよう把握したいケース…
-
jQueryでAJAXを使う方法！非同期通信で画面の一部だけを更新する方法を解説
今回は、jQueryでAJAX（非同期通信）を使い、サーバー上のリソースを取得して画面の一部だけを更新する方法を解説します。 近年では、ブラウザ標準のfetch APIやAxiosといったライブラリが非同期通信の主流とな…
-
フォントサイズを完全レスポンシブ化！clamp()関数の使い方
画像であれば横幅を％指定するだけで画面幅に応じて自然に拡大・縮小できますが、文字サイズは同じようにはいきません。 vwを使って文字サイズをレスポンシブに調整する方法もありますが、最小値や最大値の設定が難しく、意図せず文字…
-
Figmaで表・テーブルを効率良くデザインする方法を解説！
今回は、Figmaで表・テーブルを効率良くデザインする方法を紹介します。 本記事では、以下のように柔軟にカスタマイズできる「テーブル用テンプレート」を一から作成し、そのテンプレートを活用してさまざまなデザインの表を作成で…
-
【宿泊予約】WordPressの予約システム「Booking Package」の使い方
宿泊施設のWebサイトに予約機能を導入したい場合、WordPressを利用しているなら「Booking Package」がおすすめです。 Booking Packageは無料から利用でき、月額660円（税込）の有料版では…
-
figure・figcaptionタグの意味や正しい使い方を解説
figureタグは、そのコンテンツがなくなったとしても本文の流れに影響を与えることがない自己完結型コンテンツに使用できるHTMLタグです。イラストや図、写真やコードの断片などに対して使用されます。 また、figcapti…
-
ページタイプ毎にウィジェット内容を変える方法！Widget Optionsの使い方
ウィジェット機能を使って、ページタイプごとにサイドバーの表示内容を切り替えたい場合もあると思います。 そのようなときは、プラグイン「Widget Options」を使用すると便利です。 今回は「Widget Option…
-
jQueryとは？基本の書き方・よく使うメソッドを解説
コーディング初学者が初めてJavaScriptを学ぶ際に、最初に触れることが多いのがJavaScriptライブラリの「jQuery（ジェイクエリ）」です。 現在のモダン開発のトレンドとは言えないものの、依然としてWebサ…
-
【静的サイトにおすすめ】無料メールフォーム「PHP工房」の使い方
Web制作を学び始めた方が最初に直面する壁の一つが、メールフォームの制作ではないでしょうか。 メールフォームを作成するには、PHPなどのプログラミング言語を扱う必要があり、初心者にとってはややハードルが高いと言えます。 …
-
スマホ・タブレット表示で横スクロールできるテーブルの作り方！
テーブルのカラムが3列以上あり、スマホ時に縦方向に並べ替えるのが難しいといった場合は、横スクロールで表示できるようにするのがおすすめです。 今回は、HTMLのtableタグで実装したテーブルを横スクロールできるようにする…
-
ScrollHintの使い方！横スクロールできる要素にヒントを表示する方法
今回は横スクロールできる要素にヒントを表示するJavaScriptライブラリ「ScrollHint」の使い方を解説します。 ScrollHintを使用すると、要素が横スクロール可能な状態になったタイミングを自動で検知し、…
-
【無料】WordPressサイトを多言語化するには？手軽にできる方法から本格的な多言語化まで紹介
「Webサイトでの発信を海外ユーザーにも届けたい」といった際に必要になるのが多言語化対応です。 今回は、初心者でも簡単に導入できるやり方から本格的な多言語化方法まで、WordPressサイトの多言語化にはどんなやり方があ…
-
【スライダー実装】Swiperの使い方、便利なオプションまとめ
Webサイトにスライダーを実装したい場合、JavaScriptライブラリ「Swiper」がおすすめです。 SwiperはjQueryを必要とせず、軽量で動作が速く、モバイルデバイスでのタッチ操作にも最適化されているのが特…
-
セキュリティ対策プラグイン「XO Security」の使い方・設定方法
WordPressは多くの利用者に支持されているブログ構築システムですが、しばしばハッキングの対象にされることがあります。 そのため、WordPressインストール後はセキュリティ対策プラグインを入れておくことが大切です…
-
Bogoを使ってWebサイトを多言語化する方法【ウィジェット・カスタム投稿・自作テーマ対応】
今回は、WordPressの人気多言語化プラグイン「Bogo」を使って、Webサイトを多言語対応にする方法を解説します。 Bogoを使うと、1つのWordPressのダッシュボード上で各言語ページを管理でき、非常に効率的…
-
BackWPupの使い方やおすすめの設定方法、データ復元方法を解説
WordPressサイトのバックアップデータを取得するには、バックアッププラグインを導入するのが便利です。 WordPressのバックアッププラグインにはいくつかおすすめがありますが、今回は人気バックアッププラグイン「B…
-
Contact Form7に条件分岐が設定できる「Conditional Fields for Contact Form 7」の使い方
今回はContact Form 7で作成したお問い合わせフォームに条件分岐を設定できるプラグイン「Conditional Fields for Contact Form 7」の使い方を解説します。 ある質問に「いいえ」と…
-
Contact Form 7とスプレッドシートを連携させる方法！GSheetConnector for CF7の使い方
Contact Form 7で届いた問い合わせ内容をGoogleスプレッドシートに反映させたいという場合があるかと思います。 そういった際は、GSheetConnector for CF7を使用することでContact …
-
matchMediaを使ってGSAPアニメーションをレスポンシブ対応させる方法
アニメーションを作っている際に、PCとSPで微妙にアニメーションの動きやscrollTrggerプラグインのトリガー要素を変えたいことがあります。 こんなときGSAPを使っている場合は、mathMediaメソッドを使うこ…
