コラム

macOS zip コマンドで文字化けが直らない原因と対処

WordPressのjQueryが動かない：二重読み込み診断と修正手順

YouTube埋め込みレスポンシブ対応：崩れる原因と直し方

Web制作会社向け:納品ZIPの運用ルールと文字化け事故を防ぐワークフロー

AstroとWordPressの使い分け：迷わない3つの判断基準

Broken Link Checker WordPress 使い方：常時有効化せずワンショット保守

リンク切れを放置するとSEOや信頼に影響しますが、サーバーに負荷はかけたくないですよね。 この記事は、Broken Link Checker 設定方法や使い方をまとめました。 ローカル版 Broken Link Checker を週1（16…

WordPress引き継ぎ案件のプラグイン整理：削除判断の手順と確認3点

※当サイトはアフィリエイト広告を使用しています。 自分がWordPressサイトを構築・運用するときに使っているプラグインを、メモ代わりにまとめておきます。 どれも実際に使っているものばかりで、案件によって使い分けるものもあります。あくまで…

WordPress自作テーマのドロワーアコーディオン——バニラJS実装

ハンバーガーメニューにアコーディオンメニューを入れたい 自作WordPressテーマでもアコーディオンを入れたい このような悩みに答えます。 ハンバーガーメニューとアコーディオンは、サイトを見やすくするのに効率的です。 しかし、なかなか上手…

WordPressでremがズレる原因と実務の単位割り当てメモ

CSS には多くの長さ単位がありますが、実際の実装で「どこで何を使うべきか」迷うことも多いです。 このメモは、長さ単位の使い分けルールを整理しておくためのものです。 目的は デザインの一貫性 と ユーザー操作（文字サイズ変更など）による崩れ…

VSCodeの拡張機能をやめるべき理由と代替手段

VSCode（Visual Studio Code）は、多くの開発者に愛用されている軽量かつ強力なエディタです。 その魅力の一つは、豊富な拡張機能を簡単に追加できる点にあります。 しかし、拡張機能に過度に依存することには、いくつかの重要な問…

【JavaScript】実務でよく使うおすすめプラグイン一覧

おすすめのjsプラグインが知りたい プラグインの使い方について知りたい 簡単にサイトに動きを実装したい このような悩みに答えます。 JavaScriptとjQueryのプラグインは非常に重要なツールです。 これらのプラグインを理解し、適切に…

【レスポンシブ対応】videoタグで読み込む動画をブレイクポイント毎に切り替える

スマホとPCで動画を出し分けたい スマホとPCで読み込む動画を変更したい 必要な動画だけ読み込みたい このような悩みに答えます。 この記事では、 JavaScriptを活用してビデオソースを動的に出し分ける方法とその利点 について詳しく解説…

【エンティティ化】メールアドレスを安全に埋め込む方法

ウェブページにメールアドレスを掲載する際、スパムボットからの保護は大きな課題です。 この記事では、 HTMLエンティティ化の概要から、具体的なメールアドレス保護の技術までをわかりやすく解説します。 この記事を読むことで、特にメールアドレスを…

【MicroModal】モーダルを簡単に実装できるJSプラグインを紹介

モーダルウィンドウの作り方がわからない 使いやすいモーダルウィンドウの実装方法を知りたい。 パフォーマンスに影響を与えずモーダルウィンドウを実装したい。 このような悩みに答えます。 モーダルウィンドウは、ユーザーの注意を惹ける便利なツールで…

【CSS】最初の文字を大文字にする方法、最初の文字のデザインを変更する方法

CSSで英字の最初を大文字にしたい 最初の文字だけ色を変えたい 最初の行だけデザインを変えたい このような悩みに答えます。 この記事では、 ::first-letter や ::first-line を使った見出しの装飾方法、さらに tex…

【リスク有り】Basic認証情報をURLに組み込む方法

Basic認証を毎回打ち込むのが面倒 Basic認証のURL埋め込みを使用する注意点は？ どのブラウザがURL内のBasic認証をサポートしているのかを確認したい。 このような悩みに答えます。 Basic認証は管理的なアクセス制限に便利です…

CSS設計とは？最適な設計手法を徹底解説

CSS設計ってそもそも何？ 効率的にCSSを管理したい チーム開発をスムーズに進めたい このような悩みにお答えします。 書くだけであれば単純な CSS ですが、サイトの規模が大きくなるにつれて管理が難しくなることが多々あります。 特に複数人…

【CSS + jQuery】ハンバーガーボタンの作り方

ハンバーガーボタンの作り方がわからない ハンバーガーボタンの線が崩れる retina対応のハンバーガーボタンを作りたい このような悩みに答えます。 多くのwebサイトに実装されているハンバーガーメニュー。 メニューを表示するための3本線のボ…

【初心者向け】ブラウザに合わせて.webp画像を切り替える方法

.webpのメリットがわからない HTMLで.webpの切り替え方がわからない CSSで.webpの切り替え方がわからない このような悩みにお答えします。 コーディング案件で.webp対応を求められることもあるかと思います。 WordPre…

【CSS&jQuery】スクロール時にふわっと表示するアニメーション実装方法

スクロールでふわっと表示するアニメーションを実装したい スクロールでふわっと表示するアニメーションにバリエーションが欲しい このような悩みにお答えします。 スクロールに応じてコンテンツをアニメーションさせる動作はよく要望される仕様の1つです…

【jQuery】簡単！縦スクロールに合わせて要素を横に動かす方法

こんにちは。 すずき です。 縦スクロールに合わせて要素を横に動かしたい 横の動きも入れて立体的なパララックスを入れたい このようなお悩みに答えます。 縦スクロールのサイトで、スクロールに応じて要素を横に動かしたい時がありますよね。 自分も…

【CSS】counterを2桁で表示する方法を解説！01から始まる番号の作り方

こんにちは。 すずき です。 この記事では、 CSS の counter を2桁で表示する方法について解説 します。 昨日、以下のような投稿をしました。 CSSのcounter、これまで h2:before { content: "0" c…

【ConoHa WING】初期プラグイン、コントロールパネルプラグインは必要？機能と最適解を解説

こんにちは。 すずき です。 この記事では、 ConoHa WINGに最初からインストールされているWordPress初期プラグインについて、それぞれの機能と必要性を解説 しています。 プラグインは、サイトの機能を追加、拡張、変更できる便利…

【WordPress】前後の記事をサムネイル付きで表示する方法

こんにちは。 すずき です。 WordPressの投稿に前後の記事を表示させたい。 前後の記事を表示させたが、サムネイルや本文も表示したい。 このようなお悩みにお答えします。 自作のWordPressテーマを制作しているとこのような悩みが出…

【WordPress】固定ページの子ページ一覧を表示する方法

こんにちは。 すずき です。 「WordPressの固定ページに、子ページを表示させたい」 という悩みが最近ちょくちょくありました。 ページ数の多いサイトなどを作る際は、区分毎にまとめたページがあると見やすく、目的のページにも辿り着きやすい…

【超簡単】CSSのみでページトップボタンを実装する方法

ページトップボタンの実装方法がわからない。 ページトップボタンの動作の実装方法がわからない。 このような悩みに答えます。 webサイトでよく見かけるページトップボタン。スルスル〜っとトップまで移動してくれるので便利ですよね。 特にLPなど、…

【CSS】YouTubeをレスポンシブ対応で埋め込む方法！自動再生などのカスタマイズ方法も紹介します。

こんにちは。 すずき です。 この記事では、 WebサイトにYouTubeをレスポンシブ対応で埋め込む方法 と、 自動再生などのカスタマイズ方法 を紹介します。 このような人にオススメ YouTube動画をウェブページに埋め込みたいが、CS…

HTML共通パーツのインクルード化：PHP・JS・Astroの使い分け方

HTMLの共通パーツのインクルード方法がわからない方 インクルードのメリットとデメリットを知りたい方 JavaScriptを使ったインクルード方法を学びたい方 このような悩みを持つ方にオススメです。 この記事では、HTMLの共通パーツをイン…

SSGformを静的LPに使う：action URLとサンキューページの注意点

静的サイトはWordPressなどのCMSと比べて表示速度も速く安全ですが、お問い合わせフォームの実装が一手間です。 （WordPressならcontact form7などのプラグインがありますが、静的サイトではなかなかありません。） そこ…

WordPressのオリジナルテーマをやめた話

WordPressでのサイト制作といえば、「オリジナルテーマを1から作る」がずっと自分の定番でした。 自由度も高く、要望にも柔軟に対応できる…と思っていたのですが、ここ最近はそのスタイルをやめることにしました。 今は既存テーマをベースに、必…

XServer Static × GitHub Actions で静的サイトを自動デプロイする方法

今回、 XServer Static を契約して静的サイトを公開し、 GitHub Actions を利用して自動デプロイの環境を構築しました。 もともと、静的サイトのホスティングにはさまざまな選択肢がありますが、 XServer Stat…

Gulpのおすすめプラグイン一覧

フロントエンド開発の効率を飛躍的に高めるために、多くの開発者が利用しているGulp。 タスクの自動化を通じて、コーディング作業を楽にするこのツールは、初心者にも非常に有用です。 しかし、Gulpの本当の力を引き出すためには、どのプラグインを…

Gulpの導入方法と基本的な使い方

Gulpは、フロントエンド開発においてタスクの自動化を助けるツールです。 例えば、JavaScriptやCSSの圧縮、Sassのコンパイル、ファイルの監視など、面倒な作業を自動化できます。 これにより、開発の効率が大幅に向上します。Gulp…

【CSS】iPhoneのノッチやセーフエリアに対応するenv()関数の使い方

モバイルで下のボタンがホームインジケーターに重なって押しにくいことはありませんか。 端末が変わるとドロワーやトーストの位置が少しずれて見えることもあります。 その数ピクセルが使いやすさに直結します。 この記事では env(safe-area…

【WordPress】wp_nav_menuでliタグとaタグにクラスを追加する方法

WordPressを使っていると、ナビゲーションメニューのカスタマイズがどうしても必要になります。特に、 wp_nav_menu を使ってメニューの <li> と <a> タグに独自のクラスを追加する方法は、多くの方にとって難しい課題です。…

Macで.DS_Storeを一括削除する方法

.DS_Store を手動で削除するのが面倒。 プロジェクトやリポジトリに .DS_Store が混ざってしまう。 フォルダから .DS_Store を簡単に削除したい。 このような悩みに答えます。 Macを使用していると、 .DS_Sto…

【JavaScript】let、const、varの違いと使い分けを徹底解説

var , let , const の違いがわからない var , let , const ってどう使い分けるの？ このような悩みにお答えします。 JavaScript の文法でよく使う var , let , const ですが、 違いや…

【完全ガイド】metaタグとは？最適な書き方からSEO対策まで徹底解説

metaタグってそもそも何？ どこにどのように書けばいいの？ metaタグをどう活用すれば検索順位が上がるの？ SNSシェア時の表示を最適化したい このような悩みに答えます。 Webページを作るとき、画面の裏側で大切な役割を果たしているのが…

【CSS】テキストの行数を制限し、文末3点リーダーにする方法

こんにちは。 すずき です。 テキストが長すぎてレイアウトが崩れる。 スマホでの表示が乱れて読みにくい。 テキスト省略の方法を知りたい。 複数行のテキストを省略したい。 本記事では、このような悩みにお答えします。 デバイス幅によってテキスト…

【スパム対策】WordPressにGoogle reCAPTCHAを導入する方法！

こんにちは。 すずき です。 この記事では、WordPressサイトにreCAPTCHAを導入する方法について解説します。 ウェブサイトを運用していて一番困るのが、 スパムロボット等による大量の迷惑メール ですよね。 運用しているサイトでも…

Contact Form 7で確認画面とサンクスページを作る方法

こんにちは。 すずき です。 この記事では、 Contact Form 7に確認画面とサンクスページを追加する方法 を解説します、 お問い合わせフォームのプラグインとして有名なContact Form 7ですが、 デフォルトでは確認画面、サ…

【WordPress】メンテナンスモードに出来るプラグイン「LightStart – Maintenance Mode」の設定方法

この記事では、 WordPressのメンテナンス中を簡単にお知らせできるプラグイン「LightStart – Maintenance Mode」の設定方法を解説 します。 WordPressサイトを運用していて、修正やメンテナンスが入ること…

【WordPress】「この投稿を先頭に固定表示」を出力する方法

こんにちは。 すずき です。 この記事では、 「この投稿を先頭に固定表示」にチェックを入れた記事を出力する方法 について解説します。 こんな人にオススメ ブログの特定の投稿をトップに表示したいんだけど、どうすればいいの？ 固定表示された投稿…

WordPressにInstagramの一覧を埋め込む方法

こんにちは。 すずき です。 この記事では WordPressにInstagramを埋め込めるプラグイン「Instagram Feed」について解説します。 このような人にオススメ Instagramの一覧をWordPressに埋め込みたい…

ページ内リンクでハンバーガーメニューが閉じない原因と解決する方法

スマホサイトでよく使われるハンバーガーメニューですが、 ページ内リンクをクリックしてもメニューが閉じない 、というトラブルに遭遇したことはありませんか？ この記事では、 ページ内リンクをクリックした際にハンバーガーメニューを自動で閉じる方法…

【CSS】アニメーションで魅せる！アンダーラインにアニメーションをつける方法

こんにちは。 すずき です。 この記事ではCSSを使ったアンダーラインのアニメーション実装方法について解説します。 このような人にオススメ CSSでアンダーラインを付ける方法が分からない アンダーラインを付けたいが、そのままでは物足りない…

【ScrollHint】要素がスクロール可能な時にヒントを表示するプラグインと使い方を紹介します！

この記事ではスクロール可能な要素にヒントを表示するプラグイン「 ScrollHint 」について解説します。 このような人にオススメ 横スクロールできることを伝える方法がわからずない ScrollHintの使い方がわからない スクロールヒン…

Bootstrapの使い方は？導入から実装まで初心者にもわかりやすく解説

こんにちは。 すずき です。 今回はBootstrapの使い方について解説します。 このような人にオススメ Bootstrapの使い方がわからない Bootstrap情報が多くてどれを見れば良いのかわからない Bootstrapのカスタマイ…

jsはコード1行だけ！rellax.jsで簡単にパララックスを実装する方法

こんにちは。すずきです。 この記事では、簡単にパララックスを実装できるプラグイン「rellax.js」の使い方を紹介します。 こんな人にオススメ パララックスを手軽に実装したい 複雑なjsコードは苦手 レスポンシブ対応が難しい 画像だけでな…

【SCSS】Bootstrapのようにボタンの文字色と背景色を自動生成したい

こんにちは。 すずき です。 Bootstrapのようにボタンの色を指定すると、文字色とホバー色が自動で指定されるのが便利と思い Bootstrap以外でも使えるように自作して見ました。 実際のコード こちらが実装したコードです。 HTML…

【SCSS】色を変更できる便利な関数まとめ

こんにちは。 すずき です。 この記事では、SCSSの色を変更する関数で、自分がよく使うものをまとめました。 SCSSでは色の明度などを自動で計算して出力してくれますので、コーディングを効率的に行うことができます。 こんな人にオススメ CS…

【CSS】tableの列（行）をスクロール時に固定する方法

こんにちは。 すずき です。 この記事ではtableのスクロール時に列や行を固定する方法について解説します。 このような人にオススメ テーブルのヘッダーを画面上部に固定したい テーブルの行をスクロール時に固定したい 列を固定したテーブルの実…

【CSS + jQuery】よく使うハンバーガーメニューの開閉アニメーション4選

こんにちは。 すずき です。 この記事では 実際によく使われるハンバーガーメニューの開閉アニメーション を紹介します。 こんな人にオススメ ハンバーガーメニューの開閉をオシャレにしたい ハンバーガーメニューの実装方法で指示を受けている ハン…

【レスポンシブ】tableタグを縦並びで表示する方法

こんにちは。 すずき です。 この記事では、 <table> タグを使った縦並びにする方法について紹介します。 こんな人にオススメ <table> タグを縦並びに表示する方法がわからない PCとスマホとで <table> タグの表示を切り替…

ハンバーガーメニュー展開時に背景をスクロールさせない方法

ハンバーガーメニューを開いた時、bodyタグをスクロールさせない ハンバーガーメニューを閉じた時、開いた時の位置に戻したい このような悩みにお答えします。 この記事では、ハンバーガーメニューが開いている間、 背景のスクロールを防ぐ方法につい…

【CSS】初心者でも簡単にできる！角丸のtableを作成する方法

こんにちは。 すずき です。 本記事では CSS で角丸のテーブルを作成する方法を紹介します。 このような人にオススメ 角丸のテーブルを作成する方法が分からない。 自分で角丸のテーブルを作ろうとするとなぜかうまくいかない。 既存のテーブルを…

ハンバーガーメニューにaria-expandedとフォーカストラップを実装する方法

ハンバーガーメニューの作り方がわからない 使っているハンバーガーメニューが合っているのか不安 実務で使えるハンバーガーメニューを知りたい このような悩みに答えます。 現代ではほとんどのサイトに使用されているハンバーガーメニューですが、 HT…

スムーススクロールCSS：WordPress干渉とアクセシビリティ対応

こんにちは。 すずき です。 webサイトにスムーススクロールを実装したい ヘッダーの高さ分、スムーススクロールの位置をずらしたい 他のページに移動する時もスムーススクロールで遷移したい このような悩みに答えます。 スムーススクロールとは、…

Bootstrap Tailwind 使い分け：デザインも自分で作る場合

自社サイトをリニューアルしました。 というより、 改めて1から作り直しました。 リニューアルしなきゃいけない理由があったわけではないんです。 SEOがどうとか、機能が古いとか、デザインが時代遅れになったとか、そういう「外的要因」ではなくて。…

MacのZIPがWindowsで文字化け・開けない原因と対処3点

Macで作ったZIPファイルをWindowsユーザーに送ったら、「ファイル名が文字化けして開けない」と言われた経験はありませんか？ このトラブル、実は MacとWindowsの“文字コードの違い ”が原因です。 仕事や学校、地域団体など、異…