Web運用・SEO・AI最適化 Bing検索の結果表示がGoogleと違う場合の直し方～Bing検索とGoogle検索の違いも説明
Bingの検索結果がGoogleと違っておかしいと感じた方へ。canonicalタグの見直しやBingWebマスターツールの活用、不要なURLの削除依頼方法など、検索結果を統一するための具体的な対策をわかりやすく解説しています。WordPress特有の注意点にも触れているので、サイト運営者は必見です。
admin
Web運用・SEO・AI最適化 
WordPress WordPressでカスタムポストの複数記事の特定文字を一括変更するPHPコード
何十、何百と記事を投稿したあとにある言葉が日本語が間違っていたなんてことはないでしょうか？ひとつひとつの記事を管理画面から修正するなんて考えたら気が重くなります。効率よく複数記事の内容を変更する方法は何個かあると思いますが今回はPHPプログラムを書いて変更する処理を書いていきます。間違っている状況例本文中の「（仮）」が...
JavaScript JavaScriptで一定時間後に自動で閉じるalertの実装方法
はじめにJavaScriptのalert関数は、簡単にダイアログを表示できる便利な機能ですが、通常はユーザーが手動で閉じる必要があります。しかし、特定の状況では一定時間後に自動で閉じたい場合もあります。本記事では、JavaScriptを使って自動で閉じるalertを実装する方法を詳しく解説します。なぜalertを自動で...
開発環境・インフラ PostCSSで入れ子を実現できるプラグイン「postcss-nesting」使用時に起きる問題と解決法
cssのポストプロセッサPostCSSは使用したい機能だけを利用してcssを加工するツールです。非常にたくさんのプラグインが存在しその種類によってはSASSの機能を再現することが可能です。SASSでは非常に使用頻度が高い入れ子表記を実現可能にするプラグインpostcss-nestingを使用時にちょっと気になる問題があ...
css 知っておくとかなり使える！複数行の文字を丸めるcssプロパティline-clamp
はじめにあるブロック範囲内にテキストを収めたい場合、cssプロパティtext-overflow: ellipsis;を設定するとはみ出した文字は…（３点リーダー）として表示されます。WordPressなどの記事の抜粋を表示するサイト制作の際にとても役にたつプロパティなのですがtext-overflow:ellipsis...
css 入力内容に応じて高さを自動調整するtextareaの作り方（Javascript、CSS<field-sizing>、jQuery、ライブラリを使った各方法）
はじめにWEBサイトで長い文字列を入力可能にするtextareaタグですがデフォルトのままだと行が増えていくと初期の高さを超えた時に上部の文字が見えなくなってしまいます。スクロールバーが出現してスクロールをすることによって見ることができはしますがいちいちスクロールするのは煩わしいので ユーザーが使いやすいように入力内容...
WordPress tailwindcssをWordPressにマッチさせる方法 – テーマ開発における相性の悪さをカバーしよう
tailwindcssというCSSフレームワークが人気です。非常に便利なのでWordPressテーマ開発に導入して見たところ相性について思うことがありましたのでお伝えします。tailwindcssとはユーティリティーベースのCSSフレームワークです。似たようなものにTwitterBootstrap等があります。Twit...
css Tailwind CSS（テイルウィンドCSS）とは？導入手順・他フレームワークとの違い・実用チートシートまで
開発効率を劇的に向上させるTailwind CSSの完全ガイド。Bootstrapとの違い、最新のv4導入手順、Next.js/React連携を解説。実務で役立つユーティリティクラスのチートシートや、BEMとの併用テクニックまで網羅。CSSの命名規則に悩む時間をゼロにし、モダンなUIを爆速で構築する方法を習得できます。
HTML・マークアップ ちょっと待って！！知っていますか？input type=numberの落とし穴
はじめにユーザーに何かを入力してもらいたい画面を作成する場合にinputタグのtypeは何にしていますか？数字を入力してほしい場合にtype属性の値をnumberにするべきだと安直に考えてはいけません。input type=numberには落とし穴があります。input type=numberの落とし穴Chromeでs...
開発環境・インフラ スタイルガイドジェネレーターfractalでHandlebarsではなくNunjucksを使用する方法
はじめにサイトやWEBアプリなどの見やすいスタイルガイドを作成できるジェネレーターのひとつに「Fractal」というツールがあります。FractalFractalは何も指定しなければテンプレートエンジンに「Handlebars」を使用しますが設定次第でそれを「nunjucks」に変更することができます。今回はFract...
開発環境・インフラ レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら
はじめにレスポンシブのサイトを作る際にフォントサイズの指定はどのようにしているでしょうか？この記事ではメディアクエリを使用せず画面幅に合わせたフォントサイズを指定するコードを紹介します。CSSではなくnode製altcssのstylusのコードになります。各要素に気軽に設定できるようにmixinになっています。styl...
css grid-areaプロパティでレスポンシブレイアウトをもっと楽に自由に！cssのgridレイアウトの活用方法
はじめにレスポンシブレイアウトを構築するとき、どのようにCSSを設定するのがよいのでしょうか？display:flex、display:gridのどちらかで設定を行うのがセオリーとなっています。どちらを使うかは条件によって分かれます。例えば…＜条件1＞スマホは1列、デスクトップは4列、要素は左詰めでOK＜条件2＞スマホ...
フレームワーク・ライブラリ jsカルーセルswiperでキャッチ画像は見切れてテキスト部分は見切れないレイアウトを実現する方法
はじめにカルーセル（スライダー）をWEBサイトに導入するときにおそらく第1候補に上がってくるだろうプラグインswiper.jsの利用サンプルです。▼Swiper今回作りたいカルーセルの仕様記事のリンクを想定しています。上側は記事のサムネイル、下側は記事のテキスト情報を表示します。さらにテキスト情報には以下の内容が入りま...
HTML・マークアップ iPhone、safariでボタンの文字が青くなる原因と対処方
はじめにWEBサイトのコーディングも終盤にかかりいざ実機確認を行った際、「iPhoneでリンクじゃないボタン（buttonタグ）の色が黒じゃない…」という状態になったことはないでしょうか？Windowsの端末で作業している人は特に。BootstrapなどのCSSフレームワークを使用していれば基本要素には全部ノーマライズ...
開発環境・インフラ 意外と簡単！WSL2にCentos9Streamをインストールする方法
はじめに最近CentOS9Streamを操作する必要が発生しましたがいきなり本番系で操作するのも不安なのでまずWSLにインストールして試してみようと思いました。ただUbuntuはMicrosoftStoreでボタン一つで簡単にインストールできるのに対してCentOSはMicrosoft Storeにありません…。ネット...
css JavaScript不要！CSSでタブ切り替えをアニメーション化する方法｜コピペOK・レスポンシブ対応付き
CSSだけでタブ切り替えアニメーションを実現する方法を知りたい方へ。ラジオボタンを使った純CSSの基本実装から、transitionやtransformで切り替える応用、フェードインなどのおしゃれな実装例まで紹介。さらにレスポンシブ対応やアクセシビリティ改善のポイントも。快適に動くタブを作りたい方におすすめです。
HTML・マークアップ HTMLのdialogタグでモーダルダイアログを実装！基本・構造・閉じ方までわかる完全ガイド
HTMLのdialogタグを使えば、モーダルや確認ダイアログをシンプルに実装できます。本記事では基本的な使い方から、show()やshowModal()の違い、閉じるボタンやESCキー対応、背景ぼかし・z-index調整などのデザイン方法まで丁寧に解説。初心者から実務で使いたい方まで幅広く役立つ内容です。
css 【CSS】floatした画像を文章の右下に回りこませる方法
はじめにデザイナーから渡されるデザインカンプで画像が右下の回り込んでいるパターンを見たことがある人はどれだけいるのでしょうか？画像が回り込んでいる部分の幅や高さが固定値ならばそれほど困らないのですが画面幅によって見た目が変わるレスポンシブデザイン全盛の現在では対応に困ってしまいます。そんな右下回り込み画像ですがCSSの...
フレームワーク・ライブラリ Astro.jsにReactを導入する完全ガイド｜Astro×Reactでインタラクティブなサイトを作る
Astro.jsは超高速な静的サイトジェネレーターとして注目されていますが、Reactと組み合わせることで、柔軟でインタラクティブなサイト制作が可能になります。本記事では、AstroとReact の組み合わせによる開発手順を、初心者にもわかりやすく解説します。公式 チュートリアルは体系的に学べるのが良いのですがサッと見...
WordPress WordPressでAjax処理を行う時の簡単な方法と流れ
はじめにWordPressでオリジナルテーマやプラグインでAjax通信を設定する流れの備忘録です。wp_localize_scriptwp_ajax_、wp_ajax_nopriv_javascriptこれらのキーワードをこの順番で覚えておくと良いと思われます。各処理の詳細は下記になります。①Ajax通信用のjavas...
フレームワーク・ライブラリ 2手で完了!? Astroフレームワークにtailwindcssを追加する方法
はじめに静的サイトジェネレーターAstroフレームワークにCSSフレームtailwindcssを導入する方法を記します。tailwindcssの導入によってクラス名に悩んだりメディアクエリを無駄に増やすことを避けられて制作がスムーズに進められます。前提node.jsは既にインストールされている状態を想定しています。※n...
Web運用・SEO・AI最適化 UTMパラメータの設定方法：utm_mediumとutm_sourceのどちらに「qr」を含めるべきか？
1. はじめにQRコードを活用してウェブサイトのアクセスを解析する際、Googleが提供するCampaign URL Builderを利用することで、アクセス元を明確に把握し、マーケティング戦略を最適化できます。しかし、QRコードからのアクセスを追跡する際、utm_mediumとutm_sourceのどちらに「qr」と...
フレームワーク・ライブラリ Astro.jsでSEO対策を実装する方法：初心者向けガイド
Astro.jsでSEO対策を完全攻略！高速化、メタタグ、サイトマップの実装手順から成功事例まで、初心者も上級者も検索上位を目指せるガイド。
フレームワーク・ライブラリ Astroフレームワークで生成フォルダをdistから任意のフォルダ名にする方法 – Astro.jsで静的サイト制作
最新のWEBフレームワーク「Astro.js」で静的サイトを作成するために覚えておくとよいこと第2弾です。今回はビルドコマンドで生成されるフォルダをデフォルトの「dist」から任意の名前に変更する方法です。なぜ任意のフォルダ名にしたいか既存のサイト内の子ページを作成したい場合にはフォルダ名を変更してアップロードする必要...