ウェブ制作の記事一覧

ConoHa WINGでSSLを適用したらリダイレクトループに陥った

ConoHa WINGでSSLを適用したところ、リダイレクトループ(ERR_TOO_MANY_REDIRECTS)が発生。具体的な解決策をまとめました。

Illustratorで書き出したSVGのパスが崩れる(潰れる)

Adobe Illustratorで、書き出したSVGデータの表示が崩れてしまう事象(線が細くなる。R(アール)が潰れる...etc)の対策。原因は詳細オプションのベクトル精度の設定でした。

SEO SIMPLE PACKでカスタム投稿アーカイブのディスクリプションを個別設定する方法

SEO SIMPLE PACKでは、カスタム投稿タイプのアーカイブページのメタディスクリプションを、管理画面から個別設定することはできません。本記事では、フィルターフックを使って投稿タイプごとにメタディスクリプションを設定する方法を解説します。

メンテナンスページの作り方｜503ステータスとRetry-After対応(PHP + .htaccess)

503ステータスとRetry-Afterに対応したメンテナンスページの作り方。PHPと.htaccessを使い、ユーザーにも検索エンジンにも配慮したメンテナンス表示の実装方法を解説します。

VSCodeが忽然と消えた。調べたら意外と“あるある”らしい

朝起きたらVSCodeが消えていた......。Visual Studio Codeが突然PCから消えるトラブルに遭遇。原因はアップデート中のシャットダウン？復旧までの実体験を紹介。

CSVをXML(WXR)に変換して、WordPress純正インポートツールで記事を一括登録した話

CSVをWordPressのXML(WXR)形式に変換し、WordPress純正のインポートツールを使って記事を一括登録した話の備忘録。プラグインや、自前でCSVインポーターを自作するのではなく、インポート処理そのものは純正ツールを使用する点がポイント。アイデアとして参考になれば幸いです。

【WordPress】Breadcrumb NavXTの構造化エラーは、単純にJSON-LDの追加で一発解決

WordPressに「パンくずリスト」を追加するプラグイン「Breadcrumb NavXT」の、構造化(リッチリザルト)エラーの解決方法。単純にJSON-LDをhead内に出力させるだけで解決します。個別にHTMLマークアップをitemprop属性に書き換える必要はありません。詳しく解説します。

Micromodal.jsを使って、アクセシビリティに配慮したハンバーガーメニューを作る

Micromodal.jsを活用し、アクセシビリティに配慮したハンバーガーメニューの作り方をデモ付きで解説。アクセシビリティを意識したライブラリの活用機会は、今後さらに増えていくと考えられ、今のうちに仕組みを理解し、知見を深めたいと思います。

【CSS】背景グラデーション(linear-gradient)にアニメーションを効かせる2つの方法：疑似要素/@property

linear-gradientにtransition は効かない？CSSだけで背景グラデーション(linear-gradient)の色を滑らかに変化させる2つの方法（疑似要素 / @property）を紹介します。

【CSS】fixedで固定した要素は、印刷用CSSで調整すると親切です

position: fixedで固定表示されたバナーやボタンが、印刷時に邪魔になっていませんか？CSSの@media printを使って、印刷専用のスタイルを設定する方法を紹介します。

【サーバー移転・動作確認】hostsファイルの設定場所と使い方・メリットまとめ

サーバー移転時の動作確認に便利な「hostsファイル」の設定方法と使い方を解説。設定場所からメリット、注意点までをまとめました。

【WordPress】新規投稿時に任意のHTMLを初期値として挿入する方法

WordPressのクラシックエディター環境で、新規投稿時に任意のHTMLを本文の初期値として自動挿入する方法を紹介します。カスタム投稿タイプごとの出し分けにも対応。

CSSで作る縦方向のスライドニュースティッカー。JSはアクティブ要素の切り替えだけ

縦方向にスライド表示するニュースティッカーの実装例。表示切り替えやアニメーションはすべてCSSで完結し、JavaScriptはアクティブ要素の切り替えにとどめたシンプルな構成です。お知らせ欄や通知エリアの制作時の参考にどうぞ。

selectやinputの入力順を制御｜住所入力・カテゴリ絞り込み等に活用

複数のセレクトボックスに対して、ユーザーが順番に入力するよう制御したい。そんなときに使える実装方法のご紹介。「大カテゴリ」「中カテゴリ」…といった条件絞り込みフォームや、「都道府県→市区町村→町名」のような段階的な住所入力欄などで活用できるテクニックです。

【CSS】inputに3桁カンマを表示しつつ、valueは数値のまま保持する方法

フォームの数値に3桁カンマを表示したい。でもinputのvalueは数値のまま保持したい。そんなときに使える、CSSとJSで実現する“擬似的なカンマ表示テクニック”をご紹介。視認性を高めつつ、ロジックへの影響を最小限に抑えます。

【CSS】placeholderの色を変更しつつ、フォーカス時には非表示にする方法

inputのplaceholderが見えにくい場合に、CSSで色を変えたり、フォーカス時に非表示にする方法を紹介。フォームの視認性やデザイン改善に使える小技です。

CSSのflexで左寄せ＆両端を揃える！何個でも対応できる自動計算式

CSSのflexboxで左寄せしつつ両端をピッタリ揃える方法を解説。何個でも対応できる自動計算式を作りました。space-betweenや::afterを使わず、変数の値を変更するだけで簡単にレイアウトを調整できる便利テクニックを紹介します。

【Windows】フォルダの背景が黒くなるバグの解決方法

Windowsのフォルダ背景が突然黒くなるバグの解決方法を解説。簡単な設定変更で元の透過状態に戻せます。詳しい手順はこちら。

【CSS】mask-imageを活用した波線(ウェーブ)のコンテンツ区切り。画像1枚でどんな色にも対応

CSSのmask-imageを活用し、波線（ウェーブ）デザインのコンテンツ区切りを作る方法を解説。背景色やグラデーション、背景画像に関係なく、共通の1枚の画像で対応可能。汎用性を重視した実装方法を紹介します。

【CSS】input[type=”number”]の矢印を消す方法

input[type="number"] の矢印をCSSで非表示にする方法を解説。appearance: none; ではなく、ブラウザごとにベンダープレフィックスの指定が必要です。主要ブラウザ（Chrome、Edge、Safari、Firefox）での対応方法を紹介します。

あのMagnific Popupに、昨年最新版がリリースされたって知ってた？

jQueryモーダルプラグインの老舗「Magnific Popup」が、実は昨年、8年ぶりにバージョンアップしていたようです。今後の保守方針や、公式が推奨するdialogタグへの移行について解説します。