詳細を見るWebコーディング【あのmeta_queryが使える!】WPGraphQLでカスタムフィールドの入力値で絞り込みをする方法NuxtやNextなどのJSフレームワークを使用してサイトを作るときにヘッドレスCMSを使用することがほとんどかと思います。WordPressではプラグイン「WPGraphQL」を使用すればヘッドレス化できるのですが、WordPressのmeta_queryのようにカスタムフィールドで絞り込みをすることはできません。[...]詳細を見るWebコーディング【あのtax_queryが使える!】WPGraphQLでカスタムタクソノミーでの絞り込みをする方法NuxtやNextなどのJSフレームワークを使用してサイトを作るときにヘッドレスCMSを使用することがほとんどかと思います。WordPressではプラグイン「WPGraphQL」を使用すればヘッドレス化できるのですが、WordPressのtax_queryのようにカスタムタクソノミーで絞り込みをすることはできません。Worksの伊東です。今回はVercelにお名前.comで取得、作成したサブドメインを割り当てる方法をご紹介します。今回はお名前.comで取得したサブドメインをVercel上で使用したいので、前提条件としては以下です。Vercelは収益目的でなければ無料プランでも独自ドメインを割り当てられるので、今回は無料プランで独自ドメインを割り当ててみました。「他のサイトがそうしていたから」などといったなんとなくの感覚でフォームの形式を選んでしまっているのが正直なところ。今回はそんなセレクトボックスとラジオボタンの使い分けに境界線をつけるべく、再度考えてみました。[...]詳細を見るWebコーディングWeb制作でFTPアップロードをFilezillaからGitデプロイに変更したことで変わったこと以前、GitプッシュでFTPアップロードをする備忘録を書いたのですが、Gitプッシュによるデプロイは非常に便利で「運用方法を変えて良かった」と思えることだったので、どこが良かったのかをご紹介します。注意:あくまでもWeb制作のコーディング業務での運用になります。ITエンジニアの業務と使用方法が異なることがありますので他の情報も一緒に参照しながら導入を検討してください。基本、Webサイトには「パンくずリスト」というものが設置されており、それらが道標になっているのです。ユーザーへの配慮として実装が推奨されており、現在ではSEOにも好影響を与えると言われています。今回はそんなパンくずリストの作り方とその検証方法を紹介いたします。[...]詳細を見るWebコーディング【学習コストほぼゼロ】LottieFilesことはじめ。イラストアニメーションをWebサイトに導入しよう。近年、アニメーションを利用したリッチな表現のサイトが増えています。動画をWebサイトに載せるのはサイトが重くなってしまったり、JavaScriptでのアニメーションは学習コストが高くなってしまう傾向にあります。GIFも検討のはいいけれど、画質が悪いことも。JavaScriptでの制御はページ遷移後にブラウザバックするとデフォルトに戻ってしまうので、場合によってはユーザーのアクセシビリティを下げてしまうことも。そこでCookieを利用することを提案します。[...]詳細を見るWebコーディングみていて楽しい、おしゃれなWebデザインギャラリーサイト3選Web制作の仕事をしている人なら一度は閲覧したことがある「Webデザインギャラリー」ですが、どのようにして選んでおりますでしょうか。今回はセンスが光るおしゃれなWebデザインギャラリーを紹介します。Web制作会社の「M-HAND」が手掛けるWebデザインギャラリーです。[...]詳細を見るWebコーディング【導入も簡単】WordPressでも利用できる「Zipaddr」で住所入力の手間を削減しよう!入力フォームで郵便番号や住所を入力するのは正直面倒ですよね。そんな面倒な住所入力を補助できるJavaScriptライブラリ「Zipaddr」について紹介いたします。Zippaddrを使用すると以下のような挙動になります。「郵便番号」に任意の郵便番号を入力してみましょう。郵便番号はハイフンがあってもなくても動きます。