Claude Codeの使い方：Claude CodeでかんたんなWebアプリを作ってみた

Web制作
今回は、AnthropicのClaudeCodeを使って「1pxトリミンくん」という画像トリミングアプリを作成してみました。実際の体験をもとに、ClaudeCodeの導入から使い方…
続きを読む

Adobe Acrobatで、PDFを軽量化する設定ガイド

Web制作
スマートフォンでの閲覧やメール送信において、PDFファイルの軽量化は重要な課題です。AdobeAcrobatの最適化機能を使用することで、品質を保ちながら効果的にファイルサイズを削…
続きを読む

PDFへのリンクで特定のページから表示させる方法と便利なオプション

Web制作
PDFファイルにリンクする際、単純にファイルを開くだけでなく、特定のページから表示させたり、表示倍率を調整したりできることをご存知でしょうか？この記事では、PDFリンクで使える便利…
続きを読む

タブレットのレスポンシブ対応：ベース画面サイズの縮小版表示でレスポンシブ実装

JavaScript HTML/CSS Web制作
概要本記事では、画面幅に応じて適切なレイアウトを提供する効果的な実装方法を解説します。特に以下のデバイスカテゴリごとに最適化された表示方法を実現します：小型スマートフォン（412p…
続きを読む

Swiperのautoplay（自動再生）が止まらないようにする方法

JavaScript Web制作
はじめにSwiperの自動再生機能を使用する際、disableOnInteraction:falseを設定しても、時々スライドが止まってしまう問題に遭遇することがあります。この記事…
続きを読む

カラフルボックスでのドメイン変更方法について

Web制作
最近、会社名変更に伴いドメインの変更作業を行いました。この記事では、カラフルボックスを利用したドメイン変更の手順を備忘録として残しておきます。今回は架空の例として「株式会社山田製作…
続きを読む

サーバーに置いた動画が再生されない場合のチェックポイント

Web制作
ウェブサイトで動画を使いたい場合、YouTubeなどの外部サービスを利用する方法もありますが、自社サーバーで動画を管理したいケースも多いでしょう。しかし、自前のサーバーに動画ファイ…
続きを読む

Gmail宛にメールが届かなくなった理由とWP Mail SMTPによる解決方法

WordPress Web制作
目次Gmailにメールが届かなくなる問題とはなぜGmailにメールが届かなくなったのかWPMailSMTPプラグインの導入と設定方法よくある質問と回答1.Gmailにメールが届かな…
続きを読む

自社サーバーにフォームを設置するのに「Internal Server Error」で大変だった話

Web制作
先日、クライアントから「自社サーバーにお問い合わせフォームが欲しい」というシンプルな依頼を受けました。普通なら数時間の作業です。WordPressのプラグインを入れるか、簡単なPH…
続きを読む

WordPressからPHP工房のメールフォームへの移行・カスタマイズ

PHP Web制作
はじめにWordPressのMWWPFORMからシンプルなPHP工房のメールフォームに移行する過程で、様々なカスタマイズを行いました。このブログでは、その主要なポイントや遭遇した問…
続きを読む

Macのターミナルを使って、サブフォルダ内を含むファイル名を一括リネームする方法

Web制作
クラウドストレージやバージョン管理システムを使用していると、ファイル名に自動的に追加される文字列（例：[conflicted]、copy、(1)など）に悩まされることがあります。特…
続きを読む

GA4でのボットトラフィック対策：インド・インドネシアからの不自然なアクセスを除外する

アナリティクス Web制作
はじめに日本国内のサイトなのに、インドやインドネシアなど、明らかにターゲット層ではない地域からの大量のアクセスが発生することがあります。本記事では、なぜこのような現象が起きるのか、…
続きを読む

Airリザーブのクエリパラメータを利用した予約種別ごとの分析方法

JavaScript Web制作
はじめにAirリザーブを利用して複数の予約種別を運用している場合、予約種別ごとの分析が必要になることがあります。本記事では、URLのクエリパラメータ（schdlId）を利用して、G…
続きを読む

JavaScriptでWebページのBasic認証状態を表示する

JavaScript Web制作
開発環境やステージング環境でBasic認証を設定することは一般的なpracticeですが、外部ファイルの読み込みテストなどで一時的に解除した後、そのまま解除状態になっているケースが…
続きを読む

PowerPointのノート部分をLibreOfficeで抽出する方法

Web制作
必要なソフトウェアLibreOffice(無料のオフィスソフト)AdobeAcrobat(PDFソフト)手順1.ノートの確認と調整(LibreOfficeImpress)Power…
続きを読む

WordPressプラグインの設定・履歴をデータベースから削除する方法

PHP WordPress Web制作
WordPressプラグインを削除しても、設定データや履歴が残ってしまうことがあります。この記事では、データベースから完全に削除する方法を解説します。なぜプラグインの設定が残るのか…
続きを読む

illustratorからWeb用画像を書き出す際の注意点

illustrator Web制作
Web用の画像を書き出す際、いくつかの設定を確認することで、より良い品質の画像を作成することができます。特にデザインデータを受け取って画像を書き出す際に確認しておきたいポイントをま…
続きを読む

font-familyで「ヒラギノ明朝」を指定すると、Windowsでフォールバックフォントの太さが変わってしまう問題の回避策

JavaScript HTML/CSS Web制作
問題の概要Webサイトで「ヒラギノ明朝」を指定した際、Windows環境でフォールバックフォントの文字が予期せず太く表示される問題について解説します。問題が発生するケースfont-…
続きを読む

WordPressの管理画面にフォームの送信先メールアドレスを表示させるカスタマイズ

WordPress Web制作
WordPressの管理画面で、各フォームプラグインの送信先メールアドレスを一元管理し、常に確認できるようにするカスタマイズ方法をご紹介します。1.メールアドレスの定数定義（sho…
続きを読む

WordPressのメールタグ・ショートコードをまとめて管理しやすい形に整理する方法

WordPress Web制作
メールフォームプラグインのタグや、WordPressのショートコードを効率的に管理する方法をご紹介します。複数のプラグインで使用される共通の情報を一元管理することで、保守性の向上と…
続きを読む

suffix（サフィックス）の活用で、SVGアニメーションにレスポンシブに対応する

JavaScript Web制作
SVGアニメーションは、ウェブサイトに動きと魅力を加える素晴らしい方法です。しかし、異なる画面サイズに対応するレスポンシブデザインでは、SVGアニメーションの実装が難しくなることが…
続きを読む

【備忘録】WordPressで記事が消えた場合の確認ポイントと復元方法

WordPress Web制作
WordPressで記事が突然消えてしまった場合、パニックになる必要はありません。以下の手順で確認と復元を試みることができます。1.WordPressの管理画面で確認ゴミ箱の確認管…
続きを読む

CSS変数とJavaScriptを使って、アンカーリンクのジャンプ先の位置を柔軟に調整する

JavaScript Web制作
ウェブサイトでアンカーリンクを使用する際、固定ヘッダーがあると目的の位置に正確にジャンプできないことがあります。この問題を解決するために、CSS変数とJavaScriptを組み合わ…
続きを読む

カスタマイズ可能なテキスト変換ツールの実装

JavaScript Web制作
はじめにWeb開発やテキスト処理において、特定のパターンに基づいてテキストを変換する必要性は頻繁に発生します。今回は、JavaScriptを使用して柔軟で使いやすいテキスト変換ツー…
続きを読む

複数の画像をSwiperでのライドショーで表示するモーダルの実装方法

JavaScript Web制作
はじめにウェブサイトでギャラリーや商品紹介などを行う際、複数の画像をスライドショー形式で表示するモーダルは非常に有効です。今回は、Swiperライブラリを使用して複数のスライド可能…
続きを読む

dialogタグを使用したシンプルなモーダルの実装方法

JavaScript Web制作
はじめにWebサイトやアプリケーションでよく使用されるUIパターンの一つに「モーダル」があります。モーダルは、ユーザーの注意を特定のコンテンツに集中させるために使用される重要なUI…
続きを読む

アニメーションを損なわない『SVG Cleaner』の最適化設定

Web制作
SVGファイルの最適化は、ウェブサイトのパフォーマンス向上に重要です。しかし、SVGアニメーションを使用している場合、不適切な最適化設定によってアニメーションが機能しなくなる可能性…
続きを読む

CDN「unpkg.com」のメリット、npmパッケージの作成とアップロードガイド

Web制作
CDN「unpkg.com」の信頼性とメリットについてunpkg.comは、ウェブサイトで使用するファイル（JavaScriptやCSSなど）を効率的に配信するためのサービスです。…
続きを読む

「WEB制作者必見！CSS最適化とコーディング支援ツールまとめ」

Web制作
はじめに:WEB制作において、CSSの最適化は重要な作業の一つです。今回は、CSSの最適化を支援するオンラインツールと、その他のコーディングに役立つツールをご紹介します。CSS最適…
続きを読む

【Adobe XD】便利なプラグインのまとめ

Web制作
AdobeXD便利プラグインまとめAdobeXDの作業効率を大幅に向上させる便利なプラグインをまとめました。インストールも使い方も簡単なので、ぜひ試してみてください！おすすめプラグ…
続きを読む

HTMLメールでのリンク問題：古いOutlookでも機能する解決策

HTML/CSS Web制作
こんにちは、HTMLメール制作者の皆さん。今回は、古いバージョンのOutlookで発生したリンクの問題とその解決策について共有したいと思います。##問題の概要最近、不動産会社の物件…
続きを読む

カラフルボックスでのSPF・DMARCの設定方法

Web制作
メールのセキュリティとデリバリー性を向上させるために、SPF（SenderPolicyFramework）とDMARC（Domain-basedMessageAuthenticat…
続きを読む

他社サーバーからカラフルボックスへのホームページ引っ越し手順

WordPress Web制作
■他社サーバーからカラフルボックスへのホームページ引っ越し手順-HPサーバー管理会社:別会社様-ドメイン・メールサーバー管理会社:DOMAINインターネットサービス※ホームページ内…
続きを読む

MacでのGitのインストールからリポジトリのクローン方法

Web制作
Gitは、プロジェクトのバージョン管理に不可欠なツールです。この記事では、MacでGitをセットアップし、リポジトリをクローンするまでの手順を簡単に説明します。 1.Ma…
続きを読む

ページの特定の部分を、templateに置き換える方法

JavaScript Web制作
ウェブ開発において、ページの特定のセクションを動的に更新する必要がしばしばあります。JavaScriptを使用してこのような動的な置き換えを行う方法を見ていきましょう。 …
続きを読む

チェックボックス全選択でロックを解除するJavaScriptの実装

JavaScript Web制作
はじめに:Webページにおけるユーザーインタラクションの中で、特定の条件下でアクションを制限したり許可したりすることは非常に一般的です。例えば、利用規約に同意する、または特定の選択…
続きを読む

Google Drive APIを使用して、ColabからDriveのファイルやフォルダにアクセスする方法

Python Web制作
GoogleDriveAPIを使用することで、GoogleColabからDriveのファイルやフォルダに直接アクセスすることができます。この記事では、その手順を詳しく解説します。&…
続きを読む

Webサイトの変更をトリガーとした、自動新規投稿システムの作成フロー

WordPress Web制作
「Web監視ツール」「Zapier」「WPWebhooks」を連携させることで、特定のWebサイトの変更を検知し、それをトリガーとしてWordPressで新しい投稿を作成することが…
続きを読む

「device.js」を使って、タブレット表示をPC版レイアウトの縮小表示にする方法

JavaScript Web制作
近年、ウェブサイトのユーザビリティはデバイスの多様性に大きく依存しています。特にタブレットデバイスは、スマートフォンとデスクトップコンピュータの間のギャップを埋める存在として、独特…
続きを読む

JavaScriptによるタブ切り替え機能の実装（invisibleTab.js）

JavaScript Web制作
ウェブデザインの中で、タブ切り替え機能はコンテンツを整理し、ユーザーにとってアクセスしやすくするための効果的な方法です。今回は、PCでのタブ切り替えとモバイルでのアンカーリンク機能…
続きを読む

Anime.jsを使用したスムーススクロール & GSAPを使用したフェードインアウトアニメーション

JavaScript Web制作
スムーススクロールとフェードイン・アウトアニメーションを組み合わせたウェブページナビゲーションウェブページのナビゲーションを向上させるために、スムーススクロールとフェードイン・アウ…
続きを読む

Adobe Illustratorでテキストボックスのオーバーフローを一括で調整する方法

Web制作
AdobeIllustratorでデザインを行う際、テキストボックスのオーバーフローはよくある問題です。特に、異なる環境やフォント設定で.aiファイルを開くと、この問題が発生しやす…
続きを読む

【CSS】alphonse-capsLists.css（セレクタ[style*=""] 指定によるリストと行頭文字・行末文字）

HTML/CSS Web制作
■data-ini（initial）="囲み英数字"（擬似要素で、＜i＞にdata挿入）ini-circled（decimal）ini-circled（upper-roman）in…
続きを読む

WordPressでカスタムタクソノミー「グループ」を作成する方法

WordPress Web制作
WordPressは非常に柔軟なCMSであり、標準のカテゴリーやタグの機能を超えて、カスタムタクソノミーを作成することができます。今回は、プラグイン「CPTUI」を使用して、カスタ…
続きを読む

## Google Analytics の用語解説

アナリティクス Web制作
GoogleAnalyticsの用語解説ユーザー数:計測期間内でサイトを訪問したすべてのユーザー。新規ユーザー:計測期間の間でサイトを初めて訪問したユーザー。表示回数（ページビュー…
続きを読む

画像から複数のQRコードを一括で読み取る方法

Python Web制作
QRコードは、情報を効率的に伝えるための便利なツールとして広く使用されています。しかし、一つの画像に複数のQRコードが含まれている場合、それらを一括で読み取るのは少し手間がかかるか…
続きを読む

GoogleアナリティクスとGoogle広告の関連付け手順

アナリティクス Web制作
GoogleアナリティクスとGoogle広告を関連付けることで、広告のパフォーマンスを詳細に分析することができます。この記事では、その関連付けの手順を詳しく解説します。1.Goog…
続きを読む

$_SESSION（セッション）をJavaScript変数に変換して、タグマネージャーのトリガー値として使用する

アナリティクス WordPress Web制作
1.PHP「$_SESSION」の記録方法セッションは、ユーザーがウェブサイトを訪れるときにサーバー上で一時的に情報を保存するための仕組みです。この情報は、ユーザーがウェブサイトを…
続きを読む

WordPressの「functions.php」で、$_SESSION（セッション）を活用する方法

PHP WordPress Web制作
WordPressを使ってウェブサイトを構築する際、特定の情報を一時的に保存したい場面が出てくることがあります。この記事では、functions.phpを利用してURLのクエリパラ…
続きを読む

WordPress・PHPの「セッション」入門と、Googleアナリティクスの「セッション」との違い

アナリティクス PHP WordPress Web制作
1.WordPress・PHPの「セッション」とは？PHPのセッションは、サーバーサイドでユーザーの情報を一時的に保存するための仕組みです。このセッションを利用することで、ユーザー…
続きを読む

Googleタグマネージャーを使ってGA4のコンバージョン設定をする方法

アナリティクス Web制作
1.コンバージョンとは何か？コンバージョンとは、ウェブサイトやアプリの訪問者が目標とする行動を取ったときのことを指します。例えば、商品の購入、資料のダウンロード、問い合わせフォーム…
続きを読む

WordPressショートコードを使用してPHP、固定ページ、投稿を呼び出す方法

PHP WordPress Web制作
導入WordPressでは、ショートコードを使用することで、一部の機能や内容を簡単に追加できます。ショートコードは特定のタスクを実行するための短いコードで、その多くはプラグインやテ…
続きを読む

「all: unset;」を利用したCSSスタイルリセットでメンテナンスをスムーズに

HTML/CSS Web制作
ウェブデザインにおいて、記事やコンテンツの制作は重要なタスクです。しかし、初心者の場合、既存のスタイルが予期せずコンテンツに影響を与えることがあります。この問題を解決するために、「…
続きを読む

WordPressのカスタムメニューのカスタマイズ

PHP Web制作
WordPressは高いカスタマイズ性を持っていますが、特にカスタムメニューはその一例です。今回は、さまざまなカスタマイズをカスタムメニューに適用する方法を詳しく見ていきましょう。…
続きを読む

MTS Simple Bookingの「day-calendar」に、日付や曜日名クラスを追加するカスタマイズ

JavaScript Web制作
このチュートリアルでは、HTMLクラスをMTSSimpleBookingプラグインに追加するプロセスを説明します。これは、予約カレンダーの外観をカスタマイズしたり、特定の機能を追加…
続きを読む

WordPressで画像のURLに最終更新日時をクエリパラメータとして追加する方法

Web制作
WordPressでコンテンツを更新した際に、画像のキャッシュが原因で更新が反映されないことがあります。この問題を解決するため、画像URLに最終更新日時をクエリパラメータとして追加…
続きを読む

レスポンシブデザインを強化する「Response.js」の活用法

JavaScript Web制作
現代のウェブ開発では、さまざまなデバイスと画面サイズに対応するレスポンシブデザインが必須となっています。そのための強力なツールとして「Response.js」があります。この記事で…
続きを読む

パフォーマンスの最適化: imgタグのdecoding属性について

HTML/CSS Web制作
ユーザーエクスペリエンスの一部として、ブラウザがWebページをどのように描画し、特に大量の画像またはビデオを含むページがどのように読み込まれるかは重要です。特に、画像の読み込みとデ…
続きを読む

BrightcoveのVideo.jsライブラリからHLSに変換：ステップバイステップガイド

JavaScript Web制作
今回は、BrightcoveのVideo.jsライブラリを使用して動画を再生し、その後HLS形式に変換する方法を紹介します。この方法では、<video-js>タグが&l…
続きを読む

ウェブページのパフォーマンスを最大化する：画像とビデオの遅延読み込み

JavaScript Web制作
Webページのパフォーマンス向上は、ユーザーエクスペリエンスとSEOの両面で重要です。この記事では、ページのパフォーマンスを向上させるための2つの主要な手段について説明します：画像…
続きを読む