Column
コラム
ホームページ制作・運用・地方 Web マーケティングについて、現場の経験から発信しています。
全 59 件中 59 件を表示
-
WordPressWordPressとAstroの使い分けで迷ったら確認する3つの条件
「とりあえず WordPress」で進めた結果、更新機能を使わないままの重いサイトが出来上がる — 制作の現場でよく起きる判断ミスのパターンです。 技術選定を慣れで決めると、クライアントの保守費用が不必要に膨らみ、後で説明に困る場面が出てき…
2026.04.13
- UI実装
【CSS】YouTubeをレスポンシブ対応で埋め込む方法！自動再生などのカスタマイズ方法も紹介します。
こんにちは。 すずき です。 この記事では、 WebサイトにYouTubeをレスポンシブ対応で埋め込む方法 と、 自動再生などのカスタマイズ方法 を紹介します。 このような人にオススメ YouTube動画をウェブページに埋め込みたいが、CS…
2026.04.11
- UI実装
【CSS】初心者でも簡単にできる！角丸のtableを作成する方法
こんにちは。 すずき です。 本記事では CSS で角丸のテーブルを作成する方法を紹介します。 このような人にオススメ 角丸のテーブルを作成する方法が分からない。 自分で角丸のテーブルを作ろうとするとなぜかうまくいかない。 既存のテーブルを…
2026.04.11
- UI実装
ハンバーガーメニュー展開時に背景をスクロールさせない方法
ハンバーガーメニューを開いた時、bodyタグをスクロールさせない ハンバーガーメニューを閉じた時、開いた時の位置に戻したい このような悩みにお答えします。 この記事では、ハンバーガーメニューが開いている間、 背景のスクロールを防ぐ方法につい…
2026.04.11
- UI実装
【超簡単】CSSのみでページトップボタンを実装する方法
ページトップボタンの実装方法がわからない。 ページトップボタンの動作の実装方法がわからない。 このような悩みに答えます。 webサイトでよく見かけるページトップボタン。スルスル〜っとトップまで移動してくれるので便利ですよね。 特にLPなど、…
2026.04.11
- WordPress
【WordPress】固定ページの子ページ一覧を表示する方法
こんにちは。 すずき です。 「WordPressの固定ページに、子ページを表示させたい」 という悩みが最近ちょくちょくありました。 ページ数の多いサイトなどを作る際は、区分毎にまとめたページがあると見やすく、目的のページにも辿り着きやすい…
2026.04.11
- WordPress
【WordPress】前後の記事をサムネイル付きで表示する方法
こんにちは。 すずき です。 WordPressの投稿に前後の記事を表示させたい。 前後の記事を表示させたが、サムネイルや本文も表示したい。 このようなお悩みにお答えします。 自作のWordPressテーマを制作しているとこのような悩みが出…
2026.04.11
- UI実装
【レスポンシブ】tableタグを縦並びで表示する方法
こんにちは。 すずき です。 この記事では、 <table> タグを使った縦並びにする方法について紹介します。 こんな人にオススメ <table> タグを縦並びに表示する方法がわからない PCとスマホとで <table> タグの表示を切り替…
2026.04.11
- UI実装
【コピペOK】ハンバーガーメニューの作り方を徹底解説【jQuery】
ハンバーガーメニューの作り方がわからない 使っているハンバーガーメニューが合っているのか不安 実務で使えるハンバーガーメニューを知りたい このような悩みに答えます。 現代ではほとんどのサイトに使用されているハンバーガーメニューですが、 HT…
2026.04.11
- UI実装
【CSS + jQuery】よく使うハンバーガーメニューの開閉アニメーション4選
こんにちは。 すずき です。 この記事では 実際によく使われるハンバーガーメニューの開閉アニメーション を紹介します。 こんな人にオススメ ハンバーガーメニューの開閉をオシャレにしたい ハンバーガーメニューの実装方法で指示を受けている ハン…
2026.04.11
- UI実装
【CSS】tableの列（行）をスクロール時に固定する方法
こんにちは。 すずき です。 この記事ではtableのスクロール時に列や行を固定する方法について解説します。 このような人にオススメ テーブルのヘッダーを画面上部に固定したい テーブルの行をスクロール時に固定したい 列を固定したテーブルの実…
2026.04.11
- UI実装
【コピぺOK】jQueryでスムーススクロールを実装する方法
こんにちは。 すずき です。 webサイトにスムーススクロールを実装したい ヘッダーの高さ分、スムーススクロールの位置をずらしたい 他のページに移動する時もスムーススクロールで遷移したい このような悩みに答えます。 スムーススクロールとは、…
2026.04.11
- CSS設計
【SCSS】色を変更できる便利な関数まとめ
こんにちは。 すずき です。 この記事では、SCSSの色を変更する関数で、自分がよく使うものをまとめました。 SCSSでは色の明度などを自動で計算して出力してくれますので、コーディングを効率的に行うことができます。 こんな人にオススメ CS…
2026.04.11
- CSS設計
【SCSS】Bootstrapのようにボタンの文字色と背景色を自動生成したい
こんにちは。 すずき です。 Bootstrapのようにボタンの色を指定すると、文字色とホバー色が自動で指定されるのが便利と思い Bootstrap以外でも使えるように自作して見ました。 実際のコード こちらが実装したコードです。 HTML…
2026.04.11
- UI実装
jsはコード1行だけ！rellax.jsで簡単にパララックスを実装する方法
こんにちは。すずきです。 この記事では、簡単にパララックスを実装できるプラグイン「rellax.js」の使い方を紹介します。 こんな人にオススメ パララックスを手軽に実装したい 複雑なjsコードは苦手 レスポンシブ対応が難しい 画像だけでな…
2026.04.11
- CSS設計
Bootstrapの使い方は？導入から実装まで初心者にもわかりやすく解説
こんにちは。 すずき です。 今回はBootstrapの使い方について解説します。 このような人にオススメ Bootstrapの使い方がわからない Bootstrap情報が多くてどれを見れば良いのかわからない Bootstrapのカスタマイ…
2026.04.11
- UI実装
【ScrollHint】要素がスクロール可能な時にヒントを表示するプラグインと使い方を紹介します！
この記事ではスクロール可能な要素にヒントを表示するプラグイン「 ScrollHint 」について解説します。 このような人にオススメ 横スクロールできることを伝える方法がわからずない ScrollHintの使い方がわからない スクロールヒン…
2026.04.11
- UI実装
【CSS】アニメーションで魅せる！アンダーラインにアニメーションをつける方法
こんにちは。 すずき です。 この記事ではCSSを使ったアンダーラインのアニメーション実装方法について解説します。 このような人にオススメ CSSでアンダーラインを付ける方法が分からない アンダーラインを付けたいが、そのままでは物足りない…
2026.04.11
- UI実装
ページ内リンクでハンバーガーメニューが閉じない原因と解決する方法
スマホサイトでよく使われるハンバーガーメニューですが、 ページ内リンクをクリックしてもメニューが閉じない 、というトラブルに遭遇したことはありませんか？ この記事では、 ページ内リンクをクリックした際にハンバーガーメニューを自動で閉じる方法…
2026.04.11
- WordPress
WordPressにInstagramの一覧を埋め込む方法
こんにちは。 すずき です。 この記事では WordPressにInstagramを埋め込めるプラグイン「Instagram Feed」について解説します。 このような人にオススメ Instagramの一覧をWordPressに埋め込みたい…
2026.04.11
- WordPress
【WordPress】「この投稿を先頭に固定表示」を出力する方法
こんにちは。 すずき です。 この記事では、 「この投稿を先頭に固定表示」にチェックを入れた記事を出力する方法 について解説します。 こんな人にオススメ ブログの特定の投稿をトップに表示したいんだけど、どうすればいいの？ 固定表示された投稿…
2026.04.11
- WordPress
【ConoHa WING】初期プラグイン、コントロールパネルプラグインは必要？機能と最適解を解説
こんにちは。 すずき です。 この記事では、 ConoHa WINGに最初からインストールされているWordPress初期プラグインについて、それぞれの機能と必要性を解説 しています。 プラグインは、サイトの機能を追加、拡張、変更できる便利…
2026.04.11
- WordPress
【WordPress】メンテナンスモードに出来るプラグイン「LightStart – Maintenance Mode」の設定方法
この記事では、 WordPressのメンテナンス中を簡単にお知らせできるプラグイン「LightStart – Maintenance Mode」の設定方法を解説 します。 WordPressサイトを運用していて、修正やメンテナンスが入ること…
2026.04.11
- WordPress
Contact Form 7で確認画面とサンクスページを作る方法
こんにちは。 すずき です。 この記事では、 Contact Form 7に確認画面とサンクスページを追加する方法 を解説します、 お問い合わせフォームのプラグインとして有名なContact Form 7ですが、 デフォルトでは確認画面、サ…
2026.04.11
- WordPress
【スパム対策】WordPressにGoogle reCAPTCHAを導入する方法！
こんにちは。 すずき です。 この記事では、WordPressサイトにreCAPTCHAを導入する方法について解説します。 ウェブサイトを運用していて一番困るのが、 スパムロボット等による大量の迷惑メール ですよね。 運用しているサイトでも…
2026.04.11
- UI実装
【CSS】counterを2桁で表示する方法を解説！01から始まる番号の作り方
こんにちは。 すずき です。 この記事では、 CSS の counter を2桁で表示する方法について解説 します。 昨日、以下のような投稿をしました。 CSSのcounter、これまで h2:before { content: "0" c…
2026.04.11
- UI実装
【jQuery】簡単！縦スクロールに合わせて要素を横に動かす方法
こんにちは。 すずき です。 縦スクロールに合わせて要素を横に動かしたい 横の動きも入れて立体的なパララックスを入れたい このようなお悩みに答えます。 縦スクロールのサイトで、スクロールに応じて要素を横に動かしたい時がありますよね。 自分も…
2026.04.11
- UI実装
【CSS】テキストの行数を制限し、文末3点リーダーにする方法
こんにちは。 すずき です。 テキストが長すぎてレイアウトが崩れる。 スマホでの表示が乱れて読みにくい。 テキスト省略の方法を知りたい。 複数行のテキストを省略したい。 本記事では、このような悩みにお答えします。 デバイス幅によってテキスト…
2026.04.11
- UI実装
【CSS&jQuery】スクロール時にふわっと表示するアニメーション実装方法
スクロールでふわっと表示するアニメーションを実装したい スクロールでふわっと表示するアニメーションにバリエーションが欲しい このような悩みにお答えします。 スクロールに応じてコンテンツをアニメーションさせる動作はよく要望される仕様の1つです…
2026.04.11
- CSS設計
【初心者向け】ブラウザに合わせて.webp画像を切り替える方法
.webpのメリットがわからない HTMLで.webpの切り替え方がわからない CSSで.webpの切り替え方がわからない このような悩みにお答えします。 コーディング案件で.webp対応を求められることもあるかと思います。 WordPre…
2026.04.11
- 基礎知識
【完全ガイド】metaタグとは？最適な書き方からSEO対策まで徹底解説
metaタグってそもそも何？ どこにどのように書けばいいの？ metaタグをどう活用すれば検索順位が上がるの？ SNSシェア時の表示を最適化したい このような悩みに答えます。 Webページを作るとき、画面の裏側で大切な役割を果たしているのが…
2026.04.11
- UI実装
【CSS + jQuery】ハンバーガーボタンの作り方
ハンバーガーボタンの作り方がわからない ハンバーガーボタンの線が崩れる retina対応のハンバーガーボタンを作りたい このような悩みに答えます。 多くのwebサイトに実装されているハンバーガーメニュー。 メニューを表示するための3本線のボ…
2026.04.11
- CSS設計
CSS設計とは？最適な設計手法を徹底解説
CSS設計ってそもそも何？ 効率的にCSSを管理したい チーム開発をスムーズに進めたい このような悩みにお答えします。 書くだけであれば単純な CSS ですが、サイトの規模が大きくなるにつれて管理が難しくなることが多々あります。 特に複数人…
2026.04.11
- UI実装
【コピぺOK】ハンバーガーメニューの中にアコーディオンメニューを入れる方法
ハンバーガーメニューにアコーディオンメニューを入れたい 自作WordPressテーマでもアコーディオンを入れたい このような悩みに答えます。 ハンバーガーメニューとアコーディオンは、サイトを見やすくするのに効率的です。 しかし、なかなか上手…
2026.04.11
- UI実装
【JavaScript】let、const、varの違いと使い分けを徹底解説
var , let , const の違いがわからない var , let , const ってどう使い分けるの？ このような悩みにお答えします。 JavaScript の文法でよく使う var , let , const ですが、 違いや…
2026.04.11
- ツール・環境
【リスク有り】Basic認証情報をURLに組み込む方法
Basic認証を毎回打ち込むのが面倒 Basic認証のURL埋め込みを使用する注意点は？ どのブラウザがURL内のBasic認証をサポートしているのかを確認したい。 このような悩みに答えます。 Basic認証は管理的なアクセス制限に便利です…
2026.04.11
- ツール・環境
Macで.DS_Storeを一括削除する方法
.DS_Store を手動で削除するのが面倒。 プロジェクトやリポジトリに .DS_Store が混ざってしまう。 フォルダから .DS_Store を簡単に削除したい。 このような悩みに答えます。 Macを使用していると、 .DS_Sto…
2026.04.11
- WordPress
【WordPress】wp_nav_menuでliタグとaタグにクラスを追加する方法
WordPressを使っていると、ナビゲーションメニューのカスタマイズがどうしても必要になります。特に、 wp_nav_menu を使ってメニューの <li> と <a> タグに独自のクラスを追加する方法は、多くの方にとって難しい課題です。…
2026.04.11
- UI実装
【CSS】最初の文字を大文字にする方法、最初の文字のデザインを変更する方法
CSSで英字の最初を大文字にしたい 最初の文字だけ色を変えたい 最初の行だけデザインを変えたい このような悩みに答えます。 この記事では、 ::first-letter や ::first-line を使った見出しの装飾方法、さらに tex…
2026.04.11
- UI実装
【MicroModal】モーダルを簡単に実装できるJSプラグインを紹介
モーダルウィンドウの作り方がわからない 使いやすいモーダルウィンドウの実装方法を知りたい。 パフォーマンスに影響を与えずモーダルウィンドウを実装したい。 このような悩みに答えます。 モーダルウィンドウは、ユーザーの注意を惹ける便利なツールで…
2026.04.11
- 基礎知識
【エンティティ化】メールアドレスを安全に埋め込む方法
ウェブページにメールアドレスを掲載する際、スパムボットからの保護は大きな課題です。 この記事では、 HTMLエンティティ化の概要から、具体的なメールアドレス保護の技術までをわかりやすく解説します。 この記事を読むことで、特にメールアドレスを…
2026.04.11
- UI実装
【レスポンシブ対応】videoタグで読み込む動画をブレイクポイント毎に切り替える
スマホとPCで動画を出し分けたい スマホとPCで読み込む動画を変更したい 必要な動画だけ読み込みたい このような悩みに答えます。 この記事では、 JavaScriptを活用してビデオソースを動的に出し分ける方法とその利点 について詳しく解説…
2026.04.11
- UI実装
【JavaScript】実務でよく使うおすすめプラグイン一覧
おすすめのjsプラグインが知りたい プラグインの使い方について知りたい 簡単にサイトに動きを実装したい このような悩みに答えます。 JavaScriptとjQueryのプラグインは非常に重要なツールです。 これらのプラグインを理解し、適切に…
2026.04.11
- CSS設計
【CSS】iPhoneのノッチやセーフエリアに対応するenv()関数の使い方
モバイルで下のボタンがホームインジケーターに重なって押しにくいことはありませんか。 端末が変わるとドロワーやトーストの位置が少しずれて見えることもあります。 その数ピクセルが使いやすさに直結します。 この記事では env(safe-area…
2026.04.11
- ツール・環境
Gulpの導入方法と基本的な使い方
Gulpは、フロントエンド開発においてタスクの自動化を助けるツールです。 例えば、JavaScriptやCSSの圧縮、Sassのコンパイル、ファイルの監視など、面倒な作業を自動化できます。 これにより、開発の効率が大幅に向上します。Gulp…
2026.04.11
- ツール・環境
Gulpのおすすめプラグイン一覧
フロントエンド開発の効率を飛躍的に高めるために、多くの開発者が利用しているGulp。 タスクの自動化を通じて、コーディング作業を楽にするこのツールは、初心者にも非常に有用です。 しかし、Gulpの本当の力を引き出すためには、どのプラグインを…
2026.04.11
- ツール・環境
VSCodeの拡張機能をやめるべき理由と代替手段
VSCode（Visual Studio Code）は、多くの開発者に愛用されている軽量かつ強力なエディタです。 その魅力の一つは、豊富な拡張機能を簡単に追加できる点にあります。 しかし、拡張機能に過度に依存することには、いくつかの重要な問…
2026.04.11
- ツール・環境
XServer Static × GitHub Actions で静的サイトを自動デプロイする方法
今回、 XServer Static を契約して静的サイトを公開し、 GitHub Actions を利用して自動デプロイの環境を構築しました。 もともと、静的サイトのホスティングにはさまざまな選択肢がありますが、 XServer Stat…
2026.04.11
- WordPress
WordPressのオリジナルテーマをやめた話
WordPressでのサイト制作といえば、「オリジナルテーマを1から作る」がずっと自分の定番でした。 自由度も高く、要望にも柔軟に対応できる…と思っていたのですが、ここ最近はそのスタイルをやめることにしました。 今は既存テーマをベースに、必…
2026.04.11
- CSS設計
CSS 長さ単位の使い分けメモ
CSS には多くの長さ単位がありますが、実際の実装で「どこで何を使うべきか」迷うことも多いです。 このメモは、長さ単位の使い分けルールを整理しておくためのものです。 目的は デザインの一貫性 と ユーザー操作（文字サイズ変更など）による崩れ…
2026.04.11
- WordPress
【2025年版】Broken Link Checkerの設定と使い方解説
リンク切れを放置するとSEOや信頼に影響しますが、サーバーに負荷はかけたくないですよね。 この記事は、Broken Link Checker 設定方法や使い方をまとめました。 ローカル版 Broken Link Checker を週1（16…
2026.04.11
- UI実装
【簡単】CSSのみでページトップボタンを実装する方法
※当サイトはアフィリエイト広告を使用しています。 ページの一番下まで読み進めた後、「上に戻る」までが遠い。 そんな小さなストレスを一発で解消するのがページトップボタンです。 実装はシンプル。 <body> にアンカーを置き、そこへ内部リンク…
2026.04.11
- UI実装
共通パーツをインクルード化！効率よくコーディングする方法
HTMLの共通パーツのインクルード方法がわからない方 インクルードのメリットとデメリットを知りたい方 JavaScriptを使ったインクルード方法を学びたい方 このような悩みを持つ方にオススメです。 この記事では、HTMLの共通パーツをイン…
2026.04.11
- UI実装
【初心者向け】ハンバーガーメニューの作り方【コピペOK】
ハンバーガーメニューは、スマホサイトではもう定番のナビゲーションです。 でも、実装となると案外やっかいなことが多くて、 ネットで拾ったコードが微妙に動かない 開閉アニメーションがぎこちない キーボード操作やスクリーンリーダーに対応していない…
2026.04.11
- UI実装
【ScrollHint】スクロール可能な要素にヒントを表示するプラグインと使い方を紹介
横スクロールできることをユーザーに伝える方法がわからない ScrollHintの使い方がわからない スクロールヒントの細かな設定方法を知りたい この記事では、スクロール可能な要素にヒントを表示するプラグイン「 ScrollHint 」につい…
2026.04.11
- WordPress
【2025年版】現在使っているWordPressプラグインまとめ
※当サイトはアフィリエイト広告を使用しています。 自分がWordPressサイトを構築・運用するときに使っているプラグインを、メモ代わりにまとめておきます。 どれも実際に使っているものばかりで、案件によって使い分けるものもあります。あくまで…
2026.04.11
- UI実装
ハンバーガーボタンの作り方と実装ポイント【コピペOK】
※当サイトはアフィリエイト広告を使用しています。 スマホサイトやレスポンシブデザインで定番になっているのが「ハンバーガーボタン」です。 三本線のアイコンを押すとメニューが展開する仕組みで、ナビゲーションをコンパクトにまとめるときによく使われ…
2026.04.11
- ツール・環境
SSGformを使ってみた感想と実装メモ
静的サイトはWordPressなどのCMSと比べて表示速度も速く安全ですが、お問い合わせフォームの実装が一手間です。 （WordPressならcontact form7などのプラグインがありますが、静的サイトではなかなかありません。） そこ…
2026.04.11
- ツール・環境
MacからWindowsにZIPを送るときに気をつけたいポイントと対策
Macで作ったZIPファイルをWindowsユーザーに送ったら、「ファイル名が文字化けして開けない」と言われた経験はありませんか？ このトラブル、実は MacとWindowsの“文字コードの違い ”が原因です。 仕事や学校、地域団体など、異…
2026.04.11