WEB制作 | ki-hi-ro.com

WEB制作についての記事

2022.11.20（更新日: 2025.06.29）

ローディングアニメーションを作成してみた

年末あたりに、知り合いのWEBデザイナーさんからコーディングの依頼が来ると思います。事前準備として、jQueryを使用したローディングアニメーションの学習ブログを書いておきます。ローディングアニメーションとは？こちらのユナイテッドアローズを開いたときに表示されるような、画面読み込み時に発生するアニメーションのことです。今回やってみたこと当サイトで、画面読み込み時にロー ...

2022.11.06（更新日: 2025.06.29）

【WordPress】日付一覧ページで年を指定する方法

日付一覧ページのテンプレートファイル「date.php」で、投稿した年を指定する方法について書いていきます。記事の取得は、get_postsで行っています（WP_Queryを使うやり方もあります）。 URLに含まれる投稿年の数字を取得するまずは、get_query_varでURLに含まれる投稿年の数字を取得します。例えば、2020年3月の場合2020が取得されます。引数 ...

2022.07.17（更新日: 2025.07.03）

【スパム対策】フォームで日本語以外の入力制限を行う

使用しているフォームはWordPressのContact form7です。以下2点に関して書いていきます。 functions.phpに記述する内容これで、都道府県の欄に日本語以外を入力した場合に「日本語で入力してください」というエラーメッセージが表示されます。都道府県の入力欄のinput要素のname属性は、your-prefです。他の入力欄に適応させたい場合は、yo ...

2022.07.15（更新日: 2025.06.29）

既存買取サイトにLINE査定の撮影のポイントを追加した

既存の買取サイトに「LINE査定の撮影のポイント」というコンテンツを追加するためのコーディングを行いました。使用しているCMSはWordPressでした。 Photoshopのデザインデータから、画像などの情報を取得して、コーディングしました。レスポンシブ対応では、PCのデザインを参考にスマホのレイアウトを考えて進めました。ご依頼日 2022年7月13日納品日 2022 ...

2022.07.07（更新日: 2025.06.28）

古いサイトをgoogle検索結果に表示されないように

先日クライアントさんが保有しているサイトの中でしばらく使っていないサイトがありgoogleの検索結果から削除して欲しいというご依頼がありました。ご要望としては、アドレスバーに打ち込んだ時は表示されるが、検索結果では表示されないようにして欲しいとのことでした。手順 1. no-index googleの検索結果に表示させたくないソースコードのhead部分に以下を追記しました。こ ...

2022.05.27（更新日: 2025.06.28）

YouTubeのポップアップモーダルを作成する方法

現在取り組んでいるLPコーディングで、YouTubeをポップアップモーダルで表示するという仕様を実現したので、それについて書いていきます。「modaal」というモーダルウインドウのプラグインを使用しました。デモサイトデモサイトはこちらです。デモサイトにある画像をクリックすると、以下のような、YouTubeのポップアップモーダルが表示されます。以下の手順で作成しました。 ...

2022.05.25（更新日: 2025.06.29）

Easy Table of Contentsでスクロールの高さを調整するには？

先ほど、ブログページの目次をクリックした時に、ヘッダーの高さを考慮してスクロールの高さを調整しました。どうやって調整したのかについて書いていきます。目次には、WordPressのプラグイン「Easy Table of Contents」を使用しました。手順1: 設定画面に移動するまずは、設定 > 目次をクリックして、プラグイン設定画面に移動します。設定 > ...

2022.05.09（更新日: 2025.06.29）

デザインカンプ固有のフォントをCSSで再現する方法

先日LPコーディングを行った際に、XDのデザインデータで指定されていたフォントを完全に再現することが出来なかったので、CSSでデザインのフォントを再現するにはどうすればいいのかについて書いていきます。今回再現できなかったフォントと代替フォント今回再現できなかったフォント今回、デザインデータで指定されていたフォントは、FOT-筑紫B丸ゴシック Stdです。 XDでの表示代 ...