所有者が変わったプラグインと、更新経路そのものを狙う攻撃

つくば市のホームページ制作会社

更新の通知が来たらできるだけ早く当てる。WordPressサイトを預かる立場では長く正しい習慣として語られてきましたし、その前提はいまも変わりません。ただ2026年に入ってから表面化したいくつかの事例は、その習慣が暗黙に置いている「配信されてくる更新そのものは信頼できる」という部分に、これまでとは違う角度から光を当てました。

狙われたのはプラグインのコードに残っていた穴ではなく、プラグインが利用者の手元に届くまでの経路のほうです。脆弱性を探して突くのではなく、正規の更新に紛れ込んで入ってくる。防ぐ側から見ると、注意を向ける場所が一段ずれる話になります。

所有者が変わったあとに仕込まれた休眠コード

4月初旬に問題になったのは、Essential Pluginという作者名で公式ディレクトリに並んでいた30本あまりのプラグインでした。カウントダウンタイマー、クリックで開くポップアップ、お客様の声の表示といった、小規模サイトで気軽に足される種類のものが並んでおり、合計の稼働数は数十万件規模とされています。

経緯として報じられているのは、この一群がまとめて売買され、開発者が交代していたという点です。WordPress.orgのプラグインは、作者が変わっても配布の枠組みはそのまま引き継がれます。利用者側の管理画面には、以前と同じ名前のプラグインに更新が来たようにしか見えません。

不正なコードが加えられたのは2025年8月、互換性対応をうたった版でした。そこから約8か月のあいだ、そのコードは何もしないまま眠っていたと分析されています。動き出したのは2026年4月上旬で、外部から指示を受け取って処理を実行する経路が有効になり、検索エンジンのクローラーに対してだけ表示されるスパムや転送が仕込まれました。WordPress.orgのプラグインチームは4月7日に該当する全プラグインの配布を停止し、翌日には強制的な更新で通信部分を無効化しています。

公式ディレクトリの外でも同じ形が起きた

6月には別の形の事例が公表されました。ShapedPluginという開発元の有償版プラグイン、具体的にはWooCommerce向けの商品スライダー、お客様の声、投稿一覧表示の三製品で、開発元自身のビルドと配信の仕組みが侵害されていたというものです。

こちらで問題になったのは、公式ディレクトリに置かれている無償版ではなく、開発元のサーバーから直接配信される有償版のほうでした。つまり影響を受けたのは、対価を払って正規に自動更新を受けていた利用者だけということになります。混入は5月下旬、利用者からの報告が上がり始めたのが6月上旬、開発元が事実を認めたのが6月中旬という流れでした。

盗み出されたとされる情報は、管理者のログイン情報、二段階認証の秘密鍵、データベースの接続情報、メール送信サービスの認証情報、そして受注データにまで及びます。セキュリティメディアの報道では、一連の侵害はCVE-2026-10735として整理されています。有償版だから安全、公式ディレクトリだから安全、という単純な線引きが成り立たないことを、二つの事例は逆方向から示した形です。

気づくまでに時間がかかる理由

Essential Pluginの件で目を引くのは、仕込まれてから発覚するまでのおよそ8か月という長さです。仕込む側からすれば、加えた直後に動かす必要はありません。しばらく普通に動く版を配り、更新が行き渡り、疑いが薄れたころに起こせばよい。監視する側の目線に合わせて時間をずらされると、更新直後の挙動を見るだけでは捕まえられなくなります。

もうひとつは、公式ディレクトリに所有者交代を扱う仕組みが用意されていないという構造の問題です。プラグインが売買されて委譲されても、利用者に通知が飛ぶわけではなく、新しい担当者による最初の更新に追加の審査が入るわけでもありません。稼働数の多いプラグインは、それ自体が売り物として価値を持ちます。数万件のサイトに更新を届けられる立場が、市場で取引できてしまうという事実のほうが、個々の脆弱性より扱いが難しい部分かもしれません。

被害の出方が静かであること

今回のような侵害でやっかいなのは、サイトを見ている限り異変がわからないところです。Essential Pluginの件で配られたスパムは検索エンジンのクローラーにだけ見せる作りで、運営者が自分のサイトを開いても、いつも通りのページが表示されます。気づく糸口は検索結果の見え方や、Search Consoleの警告、ホスティング側からの連絡といった、サイトの外から届く信号のほうになります。

認証情報の窃取はさらに静かです。抜かれた時点では何も起きず、しばらく経ってから別の入口として使われます。管理画面のログイン履歴に見覚えのないものが混ざる、送信していないメールが自社ドメインから出ている、といった形で後から現れることが多く、そのころには最初の原因までたどるのが難しくなっています。

運用側でできる現実的な備え

まず効くのは、入れているプラグインの数を減らすことです。装飾のために一つ、フォームのために一つ、と足していった結果として、10本20本と並んでいるサイトは珍しくありません。一本ごとに、その開発元の更新経路を信頼するという判断が積み上がっていると考えると、使っていない機能のために枠を空けておく理由はあまりありません。

次に、自動更新をどこまで任せるかの線引きです。本体のマイナー更新は自動に任せるとして、プラグインについては稼働数の多いもの、更新頻度の高いものほど、当てる前に一拍置く運用にも意味があります。ただし更新を止めれば安全という話ではなく、既知の脆弱性を放置するほうが確率としてははるかに危ないので、遅らせるとしても数日という幅に留めるのが現実的でしょう。

加えて、更新の中身を軽く確かめる習慣も持っておきたいところです。プラグインの更新画面には変更内容へのリンクが並んでいますし、公式ディレクトリなら開発の記録も公開されています。毎回すべてを読む必要はありませんが、しばらく静かだったプラグインに突然大きな更新が来た、作者名の表示が変わっている、といった違和感は、目を通していれば引っかかります。今年の二件も、外形的な変化としては読み取れる材料が残っていました。

三つ目は、変化に気づける状態を作っておくことです。ファイルの改変を検知する仕組み、wp-config.phpや読み込み処理の周辺に見慣れない記述が増えていないかの確認、そして管理者アカウントの棚卸し。侵入を完全に防ぐ前提ではなく、入られたあと早く気づく前提で組んでおくほうが、この種の攻撃には噛み合います。

依存の数を意識するという話

WordPressの強みは、必要な機能をプラグインで足していける柔軟さにあります。制作会社としてもその恩恵は受けてきましたし、ゼロから作るより速く安く仕上げられる場面はいくらでもあります。ただ、その柔軟さは同時に、他人が書いたコードを自動で受け取り続ける関係を何本も抱えることでもあります。

プラグイン単体の良し悪しだけでなく、誰が作っていて、どういう経路で更新が届いていて、その開発元がいまも同じ人たちなのか。ここまで気にして選ぶのは手間ですが、今年の二件はその手間が無駄ではないことを示しています。次に一本足そうとしたとき、それが本当に必要かどうかを一度考えてみる。当たり前のようでいて、いちばん効く判断はそのあたりに残っている気がします。

WordPress本体で連鎖する脆弱性が見つかり緊急の修正版が出た

つくば市のホームページ制作会社

WordPress本体に、ログインしていない相手がサーバー上で任意のコードを実行できてしまう脆弱性の組み合わせが見つかり、開発チームが緊急の修正版を公開しました。プラグインやテーマ側ではなく本体そのものの問題で、特別な設定や特定の拡張を入れていないサイトも対象になります。

公開は2026年7月17日。研究者が付けた「wp2shell」という呼び名で各所のセキュリティメディアが報じており、公開から数日のうちに実際に狙われている事例も確認されています。WordPressを扱っている制作者としては、いったん手を止めて手元の案件を見直しておきたい内容です。

本体だけで成立してしまう経路

今回問題になったのは二つの弱点です。ひとつは、WordPress 6.9で導入されたREST APIのバッチ処理用エンドポイントで、複数のリクエストをまとめて処理する際に権限の確認が正しく働かない場合があるというもの。もうひとつは、WP_Queryのauthor__not_inというパラメータに残っていたSQLインジェクションの穴で、こちらは6.8の系統から存在していたとされています。

単独で見ればどちらも即座に致命傷というわけではないのですが、順につないでいくと、認証を一切通らないまま任意のコードの実行まで到達します。プラグインを一つも入れていない素のWordPressでも成立する点が、今回いちばん重く受け止められている理由です。REST APIは投稿画面やブロックエディタが日常的に使っている入口なので、単純に閉じてしまえば済むという性質のものでもありません。

対象になる版と修正が入った版

修正版として出ているのは 7.0.2、6.9.5、6.8.6 の三つです。7.0.0から7.0.1、6.9.0から6.9.4、そして6.8系の古い版が対象に含まれます。自分の案件がどの系統で止まっているかによって、上げるべき先が変わる形です。

数年前に納品してそのまま動いている中小企業のサイトほど、メジャー更新を意図的に止めているケースが多いはずです。テーマや古いプラグインとの相性を心配して更新を保留する判断自体は珍しくありませんが、今回のように本体側で認証を通らない経路が見つかった場合は、その保留がそのまま危険の持ち越しになります。

なお、SQLインジェクション側の穴は6.8の系統から存在していたとされる一方で、実際に危険な連鎖として成立するのはREST APIの入口が加わった6.9以降です。古い版だから安全という話ではなく、修正版が出ている以上はどの系統でも上げておくのが素直な対応になります。

強制的な自動更新という対応

WordPress.orgは、対象となるサポート中のインストールに向けて自動更新を強制的に配信する措置を取りました。マイナー更新が自動で当たる仕組みは以前から用意されていましたが、深刻度に応じてここまで踏み込んだ形で運用されるのは、それだけ状況が急いでいるという合図と読めます。

ただし、この仕組みに全面的に寄りかかるのも避けたいところです。自動更新を明示的に無効化している環境、ファイルの書き換えを禁止している構成、独自の配置で運用しているサイトなどでは、そもそも配信が届きません。届いているつもりで届いていない、という状態がいちばん危ないパターンです。

受託で複数のサイトを預かっている立場だと、更新方針が案件ごとにばらばらというのもよくある話です。どのサイトが自動更新に任せてあって、どのサイトが手動運用なのか。今回のような場面で真っ先に効いてくるのは、その一覧がすぐ出てくるかどうかという、地味な管理の部分だったりします。

制作者側で確認しておきたいこと

まずは管理している各サイトのバージョンを実際に開いて確認するのが先です。更新が当たっているサイトはそれで終わりですが、当たっていないサイトが一つでも出てきたら、その環境で自動更新が働いていない理由を確かめておく価値があります。サーバー側で遮断する運用を取っている場合は、バッチ処理用のエンドポイントへの外部からのアクセスを一時的に止める手も選択肢に入ります。

抜けやすいのは、日常の運用から外れているサイトです。検証用に残したままの複製、しばらく更新していない古い案件、担当が変わって誰も見ていないサブドメイン。攻撃する側は運用の熱心さで対象を選り好みしないので、忘れられているサイトほど先に踏まれます。案件一覧を開いて、更新の当たり具合を一通り眺めておくだけでも、この週末の作業としては十分に意味があります。

Firefoxが隔週リリースへ、ブラウザ更新の間隔が縮む

つくば市のホームページ制作会社

Mozillaが、Firefoxのリリース間隔を4週間ごとから2週間ごとへ短縮すると発表した。エンジニアリング担当のSylvestre Ledru氏が開発者向けメーリングリストで明らかにしたもので、8月18日公開予定のFirefox 154が4週間サイクル最後のバージョンになる。以降は9月1日のFirefox 155を皮切りに、9月15日、9月29日と隔週で番号が進んでいく予定だという。対象はデスクトップ版とAndroid版で、リリース履歴の並び方もこれまでとは違って見えるようになる。

狙いは、できあがった機能を待たせずに届けることと、リリース計画を読みやすくすることだとされている。締め切り直前に作業が集中する状況を和らげたい、という説明も添えられている。ただしMozillaは、開発の速度を倍にするという意味ではないと補足しており、熟していない機能は無理に載せず時間をかける方針は変えないという。今回の変更もあくまで試験的な位置づけで、品質や開発者の負荷への影響を見たうえで、恒久化するかどうかを判断するとしている。

Firefoxのリリース間隔は、かつての6週間から4週間へ一度短縮された経緯がある。今回はそこからさらに半分になる計算で、バージョン番号が大きな節目を意味しなくなる流れは、ChromeやEdgeが先に通ってきた道でもある。受け止めは一様ではなく、更新の回数が増えれば不具合に当たる機会も増えるのではないか、二倍の頻度で安定版を出しきる体制があるのか、といった声も出ている。Mozilla自身が試験的と断っているのは、そのあたりを含めて見極めたいという姿勢の表れだろう。リリースの回数が増えるということは、後戻りの判断も細かく打てるということでもあり、どちらに転ぶかは実際に走らせてみないと見えてこない部分が大きい。

制作の現場から見た影響

実務で効いてくるのは、対応ブラウザをバージョン番号で語りにくくなることだと思う。要件定義書や見積書に特定の番号を書き込む運用は以前から実態と合わなくなっていたが、隔週更新が加わると、番号を追いかける意味はさらに薄れる。使いたい機能が主要なブラウザに出そろっているかどうかで判断するほうが現実的で、この見方はすでに定着しつつある。中小企業のサイトのように長く運用する案件ほど、番号ではなく機能の足並みで線を引いておくと、あとから説明もしやすい。

企業内で使われるESR(延長サポート版)は今回の変更の対象外で、これまで通りのゆっくりした間隔が保たれる。社内システムの動作確認を抱えている現場では、ここが動かない点は押さえておきたいところだ。一方、一般の利用者に向けては、修正が手元へ届くまでの待ち時間が縮むことになる。不具合の報告を受けてから直りが行き渡るまでの見通しが立てやすくなるなら、サイトを預かる側にとっても悪い話ではない。表示崩れの相談を受けたときに、環境側の更新でいずれ解消するのか、こちらで手を入れるべきなのかを切り分ける時間も、少しずつ短くなっていくはずだ。

ブロックごとにタブレットとモバイルの見た目を変えられるエディタの新機能

つくば市のホームページ制作会社

WordPressのブロックエディタに、ブロック単位でタブレット表示とモバイル表示のスタイルを指定できる仕組みが入ろうとしています。開発版プラグインのGutenberg 23.5に含まれた変更で、8月19日に予定されているWordPress 7.1に向けた作業の一部です。7月3日にはコアチームからテスト協力の呼びかけも出ており、いまが仕様に意見を出せる時期でもあります。

これまでブロックエディタの画面幅切り替えは、デスクトップ、タブレット、モバイルという固定の三択でした。しかも切り替えられるのは見え方の確認だけで、余白や文字サイズといった値そのものを画面幅ごとに変えることはできません。細かく詰めたい場合は、テーマ側でCSSを書くか、追加CSSクラスを当てて自前のメディアクエリを用意するのが定番の逃げ道でした。今回の変更は、その前提を編集画面の側から作り直そうとしています。

プレビューの幅を自由にドラッグできるようになった

まず目に見えて変わるのが、エディタキャンバスの幅です。従来のプリセット三択はドロップダウンに残ったまま、キャンバス自体が任意の幅にドラッグできるリサイズ可能なものに変わりました。ドロップダウンとリサイズハンドルは連動していて、プリセットの幅に一気に飛ぶこともできれば、ハンドルを掴んで数十ピクセル単位で詰めることもできます。

実務では、崩れるのは決まってプリセットの三点ではなく、その間のどこかです。タブレット表示は問題ないのにやや狭い幅でボタンの文字が折り返す、といった話は日常的に出てきます。幅を連続的に動かせるだけで、そうした境目を編集画面の中で見つけやすくなります。ブロックにビューポート別の設定が入っている場合は、幅を動かすとその境目で表示と非表示が実際に切り替わるため、確認の粒度も上がります。

ブロックごとにタブレットとモバイルの値を持たせる

本題はスタイル側です。プレビューのドロップダウンにレスポンシブ編集の切り替えが追加され、これを有効にすると、そのとき選んでいる画面幅に対してスタイル変更が適用されるようになります。つまりタブレット幅で余白を変えれば、それはタブレットだけの指定として保存され、デスクトップの値は元のまま残ります。同じブロックにタブレットとモバイルで別々の値を持たせ、それぞれが独立して記憶される作りです。

対象は文字サイズだけではありません。テスト呼びかけの中でも、グループやボタン、画像といった異なるブロックで、余白や色を含む複数のプロパティを試してほしいと案内されています。加えて、ブロックの表示と非表示をタブレットだけ切り替えるといった指定も扱えます。これまで追加CSSクラスと自作のメディアクエリで運用していた類の調整が、エディタの標準機能の側に寄ってくることになります。

ブロックの作り手にとっての線引き

制作会社の視点で押さえておきたいのは、恩恵が自動で行き渡る範囲がはっきり分かれている点です。標準のブロックサポートを使って実装されたブロックは、特別な対応をしなくてもレスポンシブなスタイル指定に対応します。一方で、独自のコントロールを自前で組んでいるブロックは対象外で、追いつくには手を入れる必要があります。自社製のカスタムブロックや、独自UIを持つプラグインを抱えているサイトほど、この線引きは効いてきます。

もう一点、useResizeCanvas() というフックが非推奨となり動作しなくなりました。getDeviceType() と setDeviceType() は引き続き使えます。エディタの幅制御に手を入れているテーマやプラグインを持っているなら、7.1が出る前に一度検索をかけておくと安全です。この手の変更は、リリース後に管理画面が白くなってから気づくのがいちばん厄介なので、ベータ期間のうちに確認できるのはありがたいところです。

運用の現場でどう効いてくるか

中小企業のサイトでは、公開後の細かな見た目の調整をお客様自身が行う場面が少なくありません。そのとき、スマートフォンだけ余白を詰めたいという要望に対して、これまでは制作側がCSSを書き足すしかありませんでした。ブロックの設定として持てるようになれば、依頼の往復が一段減ります。地方の小さな制作体制ほど、この手の細かい差し戻しが積み上がって時間を食っている実感があります。

ただし現時点ではまだテスト段階で、仕様も細部が動く可能性があります。本番サイトの開発版プラグインで試すのではなく、ステージング環境や検証用サイトで触るのが前提です。逆に言えば、いま試して違和感を報告すれば、8月のリリースに反映される余地があります。ブロックテーマを使っているサイトを一つ用意して、手持ちのブロックがどこまで追従するかを見ておくと、7.1が出たときの案内が具体的になります。

セール価格の期間と商品カテゴリを伝える構造化データの指針

つくば市のホームページ制作会社

Googleの検索セントラルが、商品ページ向けの構造化データのドキュメントを更新した。セール価格がいつからいつまで有効なのかを書き表す方法と、商品のカテゴリを指定する方法について、これまでよりはっきりした説明が加わっている。ネットショップを運営していると、セールのたびに価格表示の扱いで迷う場面があるが、ちょうどその部分に踏み込んだ内容になっている。

まずセール期間の書き方から。価格が有効な期間を示すプロパティとして、開始日時を表すvalidFromと、終了日時を表すvalidThroughがある。加えて、その時刻を過ぎると価格が有効でなくなることを示すpriceValidUntilも使える。日時はいずれもISO 8601形式で書く。Googleのドキュメントでは、開始と終了の両方を書いて期間をはっきりさせること、そして開始日時が終了日時以前になっているかを確かめることが促されている。書く場所は、Offerノードの価格がそのままセール価格になっているならOfferに、セール価格を別に持たせる構成ならPriceSpecificationノードに置く、という整理になっている。

もうひとつがcategoryプロパティの扱いだ。ここにはテキストをそのまま書くこともできるし、CategoryCodeというオブジェクトを使ってGoogleの商品タクソノミーを参照することもできる。CategoryCodeを使う場合に書くのは、@typeと、タクソノミーのURLを指すinCodeSet、それにカテゴリの数値IDかカテゴリパスを入れるcodeValueの三つ。カテゴリパスは記号で階層をつないで書く形式になっている。値は複数指定できるので、自社サイト独自の分類とGoogle側の分類を併記しておく、という使い方が想定されている。

小さなネットショップならどこから手をつけるか

WooCommerceなどのプラグインを使っているサイトでは、構造化データの出力はプラグイン任せになっていることが多い。その場合でも、セール中の商品ページをリッチリザルトテストにかけて、期間の情報が実際に入っているかを一度見ておく価値はある。期間が抜けたままだと、セールが終わった後も割引価格の情報が検索結果側に残って見えることがある。逆に言えば、ここを整えておくだけで、店頭の表示と検索結果の見え方がずれる場面を減らせる。カテゴリのほうも、商品数がそれなりにあるサイトなら、独自の分類名だけで済ませているケースが少なくない。タクソノミー側の値を足しておけば、検索側に商品の位置づけが伝わりやすくなる。

構造化データの話は全体像が大きく、どこから手をつけるか決めにくい領域だが、価格と期間はどのショップにも共通して効く部分だ。規模の小さいサイトほどセールの入れ替えを手作業でこなしていることが多く、そこに期間の指定が加わると運用も楽になる。新しい機能が増えたというより、これまで各社が手探りでやっていた書き方に公式の型が示された、という受け止め方が近い。

スクロールで画面に入ると動き出すアニメーションのCSS新機能

つくば市のホームページ制作会社

ウェブサイトで「下にスクロールしていくと、画面に入った要素がふわっと動き出す」という演出はよく見かけます。これまでこの手の動きは、JavaScriptでスクロール位置を監視するか、専用のライブラリを読み込むのが定番でした。ところが最近のChromeに、こうした動きをCSSだけで指定できる新しい仕組みが加わりました。制作の手間が一段減りそうなので、いまのうちに内容を整理しておきます。

これまではJavaScript頼りだった

要素が画面に入ったタイミングでアニメーションを始めたい場合、多くの現場ではIntersectionObserverというJavaScriptの仕組みを使ってきました。要素が見えたことを検知し、クラスを付け外ししてCSSアニメーションを起動する、という流れです。

動かす方法としては十分ですが、監視するコードを書き、要素ごとに設定し、画面から外れたときの処理も考える、という作業が毎回ついて回ります。アニメーションを多用するページほど、JavaScript側の記述が積み重なっていきます。GSAPのScrollTriggerのような外部ライブラリを入れる手もありますが、読み込むファイルが増える分、表示速度への影響も気になるところです。

animation-trigger でCSSに寄せられる

新しく加わったのはanimation-triggertimeline-trigger、それにtrigger-scopeという3つのプロパティです。ざっくり言うと、「どの位置に来たら」「どのアニメーションを」再生するかを、CSSの中だけで書けるようになります。

まずtimeline-triggerで、監視したい範囲に名前を付けます。たとえば要素が画面に現れる範囲をview()で指定し、そこに--tのような名前を割り当てます。次に動かしたい要素側でanimation-triggerにその名前を書き、入ってきたら順に再生、出ていったら逆に再生、といった動作を指定します。Chrome for Developersの解説によると、カードが順に現れる演出や、文字が飛び込んでくる表現などが、この仕組みで組めるとされています。なお、トリガーの名前はページ全体から見えるため、同じ名前を複数の箇所で宣言すると最後のものが勝ちます。trigger-scopeで名前の見える範囲を絞っておけば、部品ごとに同じ名前を使い回せます。

細かい調整も効きます。要素がどこまで入ってきたら再生を始めるか、どの範囲にいる間は動いた状態を保つか、といった境目を指定できます。画面の下端に少し入った瞬間から動かす、まだ半分見えていないうちは静止させておく、といった塩梅を、値を書き換えるだけで整えられます。

JavaScriptで書いていた「見えたら動かす」という一連の流れが、スタイルシートの数行に置き換わるイメージです。要素が増えても、監視用のコードを書き足す必要はありません。

スクロール駆動アニメーションとの違い

少し紛らわしいのが、以前から話題になっている「スクロール駆動アニメーション」との違いです。スクロール駆動のほうは、スクロール量そのものにアニメーションの進み具合を結びつけます。スクロールを止めれば動きも止まり、戻せば巻き戻る、という連動です。

今回のスクロールで動き出すほうは性格が異なります。ある位置を通過した瞬間に、決まった長さのアニメーションを頭から再生する動きです。スクロールの速さに関係なく、いったん始まれば最後まで再生されます。JavaScriptのIntersectionObserverでやっていたことに近く、用途もそちらに寄っています。両者は名前が似ていますが、狙う演出が違うので、目的に応じて使い分けることになります。

現場で使うときの見極め

便利な仕組みですが、2026年の時点ではChromeとEdgeで先行して使える段階で、ほかのブラウザはこれからです。すべての来訪者に同じ動きを届けたい場面では、まだ本命として据えるのは早いかもしれません。

とはいえ、この種の演出は「あれば嬉しいが、無くても中身は読める」性質のものです。対応ブラウザでは動き、そうでなければ静止したまま表示される、という前提で組めば、いまから取り入れても実害はありません。中小企業サイトのトップページで、見出しや写真をさりげなく動かす程度の使い方なら、JavaScriptを減らす一歩として試す価値があります。WordPressで運用しているサイトでも、テーマのスタイルシートに数行足すだけで組み込めます。演出のためにプラグインを増やさずに済むのは、管理する部品が少なくなるという意味でも扱いやすい点です。仕様が固まってほかのブラウザにも広がれば、スクロールに連動した演出はCSSで書くのが当たり前になっていくはずです。

次期WordPressのベータに加わったタブや目次の新しいブロック

つくば市のホームページ制作会社

ウェブサイトの土台としてWordPressを使っている制作者や事業者にとって、次のバージョンで何が増えるかは気になるところです。2026年7月15日に、次期版となるWordPress 7.1のベータ1が公開されました。正式リリースは8月19日が予定されています。今回のバージョンはブロックの追加とデザイン調整の作り込みが目立ちます。今回は編集画面に加わる新しいブロックを中心に、実際の制作でどう役立ちそうかという視点で並べて紹介します。ベータは開発中の段階なので、ここで挙げた仕様は正式版までに変わる可能性がある点は念頭に置いてください。

タブ切り替えを標準ブロックで作れる

これまでタブ形式の表示は、プラグインや独自のJavaScriptに頼るのが一般的でした。7.1ではTabsブロックが標準で加わり、料金プランの比較や、よくある質問の分類などを、コードを書かずにタブでまとめられるようになります。標準機能として編集画面に組み込まれているため、表示のためだけに入れていたプラグインを一つ減らせる場面も出てきます。プラグインが増えるほど更新や不具合対応の手間もかさむので、保守を軽くしたい中小企業のサイトとは相性がよさそうです。

目次ブロックは7.1では見送られた

長い記事に目次を付けたいときも、これまでは専用プラグインが定番でした。7.1のロードマップにはTable of Contents(目次)ブロックも挙がっていましたが、正式版に入った新しいブロックはTabsとPlaylistで、目次ブロックは見送られました。標準ブロックで目次を組めるようになるのは、先の版を待つことになります。

音声をまとめて並べるプレイリスト

Playlist(プレイリスト)ブロックは、複数の音声ファイルを一覧として並べ、続けて再生できるようにするものです。ポッドキャストの配信ページや、社内向けの音声資料をまとめるページなどで使い道があります。あわせて、複数の画像を柔軟に扱えるギャラリーの新しい型も実験的に用意されており、メディアを見せる場面での表現の幅が広がりつつあります。動画や音声を扱うページはこれまで外部の埋め込みサービスに頼りがちでしたが、標準ブロックで完結できれば表示の速さや管理のしやすさの面でも扱いやすくなります。

画面幅ごとに見た目を細かく調整できる

ブロックそのものだけでなく、デザインを整える仕組みにも手が入っています。レスポンシブスタイリングによって、同じブロックでもパソコンとスマートフォンで余白や配置を分けて指定できるようになります。加えて、サイト全体のデザイン設定(グローバルスタイル)に文字の影が加わり、グリッドやフレックスで組んだ並びが意図せず縮んだり崩れたりしにくくする調整も入りました。これまでCSSを直接書いて対応していた細かな見た目の調整が、編集画面の操作だけで届く範囲に少しずつ近づいています。ブロックとブロックの内容を結びつけるブロックバインディングも箇条書きの項目まで扱えるようになり、繰り返しの多いページを組みやすくなっています。

ベータ版はそのまま本番サイトに入れるものではありませんが、正式リリースの前に検証環境で触っておくと、公開後の切り替えがスムーズになります。プラグインで補ってきた機能が標準側に取り込まれていく流れは、サイトの構成をできるだけシンプルに保つうえでも見逃せない動きです。詳しい仕様はWordPress開発者向けの公式ニュースで確認できます。

要素同士を結びつけて配置するCSSアンカーポジショニングが全ブラウザに揃う

つくば市のホームページ制作会社

ツールチップやドロップダウンメニュー、吹き出し。ボタンの近くに小さな要素をぴたりと寄り添わせる場面は、ウェブサイトのあちこちにあります。ところが、この「ある要素を別の要素のそばに置く」という一見単純な処理が、これまでのCSSでは驚くほど手間のかかる作業でした。その状況を根本から変えるアンカーポジショニング(anchor positioning)が、2026年に入って主要ブラウザすべてで使えるようになりました。単なる新プロパティの追加ではなく、位置決めという古くからの悩みに対する設計思想の転換なので、少し腰を据えて整理しておきたいと思います。

これまでの位置決めがなぜ面倒だったのか

従来のCSSで要素を任意の場所に置く手段は、position: absolute でした。ただしこれは「親要素を基準にした座標」でしか位置を決められません。ボタンの真下にメニューを出したいとき、ボタンそのものを基準にすることができず、共通の親を用意して相対位置を調整する、といった回りくどい組み立てが必要でした。

さらに厄介だったのが、画面のスクロールやウィンドウのリサイズです。ボタンが動けばメニューも追従させなければなりませんが、CSSだけではそれを追いかけられません。そこで多くの現場が JavaScript に頼りました。要素の座標を getBoundingClientRect で毎回計測し、スクロールやリサイズのたびに再計算して位置を書き換える。この処理を安定して動かすのは意外に難しく、Floating UI や Popper.js といった専用ライブラリが広く使われてきたのは、まさにこの面倒を肩代わりするためでした。

つまり「要素を別の要素のそばに置く」という日常的な要件のために、数十KBのライブラリを読み込み、イベント監視のコードを書く。この構図が長らく当たり前になっていたのです。位置ずれの不具合報告が絶えなかったり、スクロール中にメニューがわずかにガタつく、といった細かな粗さに悩まされた記憶のある制作者も多いのではないでしょうか。

アンカーポジショニングの基本的な考え方

アンカーポジショニングは、この関係を CSS だけで宣言的に記述できるようにします。仕組みは素直です。基準にしたい要素、つまり錨(いかり)となる要素に anchor-name というプロパティで名前を付けます。名前はカスタムプロパティと同じくハイフン二つで始まる文字列です。一方、寄り添わせたい側の要素には position-anchor でその名前を指定し、どの要素に結びつくかを宣言します。

あとは anchor() 関数を使って、錨のどの辺を基準に自分をどこへ置くかを書きます。たとえば錨の下端を自分の上端に合わせれば、ボタンの真下にメニューが並びます。座標を計算するのはブラウザの役目です。錨が動けば結びついた要素も自動で追従し、スクロールしてもリサイズしても関係は保たれます。JavaScript のイベント監視も、再計算のループも要りません。ひとつの錨に対して複数の要素を結びつけることもでき、たとえばボタンにツールチップと補助メニューの両方をぶら下げる、といった構成も素直に書けます。位置の面倒をブラウザに任せられると、制作者は見た目の設計そのものに集中できるようになります。

position-areaで方向をわかりやすく指定する

anchor() 関数は柔軟ですが、上下左右の細かな指定を辺ごとに書くのはやや冗長になりがちです。そこで用意されているのが position-area というプロパティです。これは錨の周囲を九つのマス目に見立て、そのどこに要素を置くかを言葉で指定できる仕組みです。「錨の上」「右下」といった感覚で配置を書けるため、コードの意図が読み取りやすくなります。

ちなみにこのプロパティは策定の途中で inset-area という名前から position-area へ改称された経緯があり、Chrome でも 129 で名称が揃いました。少し前の解説記事では古い名前で書かれている場合があるので、参照するときは注意しておくとよいでしょう。

はみ出しを自動で回避するフォールバック

位置決めで最も神経を使うのが、画面の端での挙動です。ボタンの下にメニューを出す設計でも、そのボタンが画面の下端近くにあれば、メニューが見切れてしまいます。従来はこの判定も JavaScript で書く必要がありました。空きスペースを測り、足りなければ上に開く、といった条件分岐です。

アンカーポジショニングには、この切り替えを CSS だけで完結させる仕組みが備わっています。position-try-fallbacks というプロパティに候補の配置を並べておくと、既定の位置ではみ出しが起きたときにブラウザが順番に候補を試し、収まる配置を自動で選びます。より込み入った代替案は @position-try という規則で定義できます。判定はレイアウトの過程で自動的に行われ、リサイズ監視のコードは一切必要ありません。下に空きがなければ上へ、横が詰まっていれば別の向きへ、といった気配りをブラウザが肩代わりしてくれるわけです。

Popover APIやdialogと組み合わせて真価を発揮する

アンカーポジショニングが特に力を発揮するのは、HTML の popover 属性や dialog 要素と組み合わせたときです。popover 属性は、追加のコードなしで開閉できる小さな重ね表示をブラウザ標準で実現する仕組みで、メニューやツールチップの土台に向いています。ただし popover 属性だけでは「どこに出すか」までは面倒を見てくれません。ここに位置決めを担うアンカーポジショニングを重ねることで、開閉と配置の両方を標準機能だけで組み立てられます。

しかもこの組み合わせにはアクセシビリティ上の利点もあります。popover 属性や dialog 要素と一緒にアンカーポジショニングを使うと、キーボード操作の順序、つまりフォーカスの移動をブラウザが適切に補正してくれます。錨となるボタンから開いた要素へ自然に焦点が移るため、支援技術を使う利用者にも扱いやすい構造になります。メニュー、サブメニュー、設定ダイアログといった部品を、ライブラリ抜きで組み立てられる土台が整ったことになります。

導入をどう見極めるか

気になる対応状況ですが、アンカーポジショニングは Chrome が 125 から、Safari が 18.2 から対応し、最後まで残っていた Firefox も 147 で既定有効となりました。これで主要なブラウザエンジンがすべて出そろい、2026年時点でおよそ9割の利用環境をカバーする水準に達しています。新しい制作案件であれば、実務で採用できる段階に入ったと言ってよいでしょう。

とはいえ、少し前のバージョンのブラウザを使う利用者が一定数残るサイトもあります。中小企業のサイトで慎重に進めるなら、アンカーポジショニングが効かない環境でも致命的に崩れない設計、たとえば従来の配置を素の状態として残し、対応ブラウザではより洗練された位置決めが効く、という重ね方が現実的です。位置が多少ずれても内容は読める、という状態を保っておけば安全に導入できます。

ツールチップ一つのために外部ライブラリを読み込む時代が、静かに区切りを迎えつつあります。読み込むコードが減れば表示は軽くなり、保守すべき依存も減ります。派手さはないものの、こうした基盤の更新こそ、日々サイトを預かる制作者にとって地味に効いてくる変化だと感じています。

gzipやBrotliに続く圧縮方式zstd、全ブラウザ対応が揃う

つくば市のホームページ制作会社

ウェブページやファイルをブラウザに届けるとき、多くのサーバーは中身を圧縮してから送っている。長年その主役はgzipで、近年はより縮むBrotliが加わってきた。ここに三つ目の選択肢として、zstd(Zstandard)という圧縮方式が本格的に使えるようになりつつある。ChromeやFirefoxはすでに対応済みで、遅れていたSafariも直近のアップデートで足並みをそろえた。主要ブラウザが一通り対応したことで、実務でも検討できる段になってきた。

そもそも転送時の圧縮とは何か

HTMLやCSS、JavaScriptといったテキストは、そのまま送るとサイズが大きい。そこでサーバーは送信前にデータを圧縮し、ブラウザが受け取って展開する。この仕組みが転送時の圧縮で、リクエストのAccept-Encodingヘッダーでブラウザが対応方式を伝え、サーバーがContent-Encodingヘッダーで実際に使った方式を返す。読者から見えないところで、日々のページ表示を支えている土台のような機能だ。

gzipは登場からかなり時間が経っているが、いまも事実上すべての環境で通じる共通語として残っている。Brotliはgzipよりよく縮む方式で、Googleがウェブのために設計した。同じファイルでもより小さくなるため、公開サイトの配信では定番になってきた。zstdはMetaが開発した比較的新しい方式で、IANAの圧縮方式一覧にも「zstd」という名前で正式に登録されている。

zstdはどのあたりに位置するのか

三つの方式は、縮む度合いと処理の速さのバランスが少しずつ違う。ざっくり言えば、圧縮率はBrotliがもっとも高く、gzipが控えめ、zstdはその中間あたりに収まる。一方で圧縮にかかる時間はzstdが速く、条件によってはBrotliの最高設定より数倍速く処理できるとされている。縮み具合と速さのどちらを取るかという、昔からある悩みに新しい落としどころを用意した方式だと言える。実測を比べた記事でも、zstdはgzipより一回り小さく縮めつつ、処理そのものは軽いという傾向が繰り返し報告されている。数字の細部は圧縮の強さの設定やファイルの中身で変わるため、自分のサイトで試してみて初めて分かる部分も多い。

この特性から、zstdはその場で圧縮して送る動的なコンテンツと相性がよい。ページを表示するたびに圧縮し直す場面では、少しでも速く処理できるほうが待ち時間の短縮につながるからだ。逆に、あらかじめ圧縮しておける静的なファイルなら、時間をかけてでも最小サイズを狙えるBrotliの最高設定が向く。一度圧縮すれば以後は使い回せるため、処理速度の差はほとんど問題にならない。用途によって使い分けるのが素直な考え方になる。

導入で押さえておきたい前提

実際に使うにはいくつか条件がある。まず、Chromeはzstdを安全な通信、つまりHTTPS接続のときだけ候補として提示する。暗号化されていない通常のHTTPではgzipやBrotliに戻る。常時HTTPS化が当たり前になった今ならほとんどのサイトが該当するが、頭の片隅には置いておきたい。ブラウザごとの対応状況はCan I useのような一覧で確認できる。

サーバーやCDN側の対応も欠かせない。CDN大手のCloudflareは以前からzstdを扱えるようにしており、配信基盤としての土台は整いつつある。自前のサーバーで有効にする場合は、使っているウェブサーバーソフトがzstdに対応しているかを確認することになる。ブラウザが受け取れても、送り出す側が方式を用意していなければ実際には使われない。両側がそろって初めて効いてくる点は、gzipやBrotliと同じ理屈だ。

中小規模のサイトでどう受け止めるか

では今すぐ全サイトがzstdに乗り換えるべきかというと、そこは冷静でよい。多くの中小企業サイトは、gzipやBrotliがすでに効いていれば体感できる速度は十分に出ている。zstdはあくまで選択肢が一つ増えたという話であり、乗り換えないと遅れるという性質のものではない。既存の圧縮が正しく効いているかをまず確かめるほうが、ずっと実益は大きい。

それでも、配信の速さを突き詰めたい場面や、動的に生成する部分が多いサイトでは、zstdが効いてくる余地がある。地方の制作現場でも、圧縮方式の違いと使い分けの勘どころを知っておけば、サーバーやCDNを選ぶときの判断材料が一つ増える。ブラウザ側の対応が一巡した今は、その知識を仕込んでおくのにちょうどよい頃合いだ。

WordPressの最新メンテナンス更新が直した不具合と自動更新の意味

つくば市のホームページ制作会社

WordPress本体に、公開済みのバージョンを細かく手入れする小さな更新が届いた。派手な新機能の発表ではないので見過ごされやすいが、日々サイトを預かる立場からすると案外大事な話なので、手短に共有したい。

WordPress.orgの告知によると、7.0.1が2026年7月9日に公開された。これは5月に登場したメジャー版7.0のあとに見つかった不具合を直すメンテナンスリリースで、ブロックエディター、管理画面、メディアまわりを中心に31件の修正が入っている。新しい機能を足すものではなく、すでにある動きを安定させるための更新という位置づけになる。

31件という数字だけ見ると多く感じるかもしれないが、メジャー版の直後に出る最初のメンテナンスリリースとしてはよくある規模だ。大勢が使い始めて初めて表面化する細かな不具合を、報告を受けて短い周期でまとめて直す。ブロックエディターや管理画面は制作者が毎日触れる場所なので、ここが少しずつ安定していくのは地味ながらありがたい。

マイナー更新は自動で当たることが多い

こうしたマイナー更新は、自動バックグラウンド更新が有効なサイトであれば、管理画面を開かなくても順に適用されていく。手動で運用している場合は、ダッシュボードの「更新」から今すぐ当てられる。特別な準備はいらず、作業としては数分で終わることがほとんどだ。

マイナー更新はメジャー版のように仕様が大きく変わるものではないため、更新でレイアウトやプラグインが急に動かなくなる心配は基本的に小さい。だからこそ自動更新に任せておける部分でもある。もちろん本番前にステージング環境がある案件なら、そこで一度確認してから本番へ、という手順を挟めばより安心できる。

WordPressは初期設定でマイナー更新だけを自動で当て、メジャー版は手動に委ねる作りになっている。つまり7.0.1のような更新は放っておいても順に届く一方、7.0から7.1へといった大きな移行は自分のタイミングで判断できる。運用を任されている側からすると、この線引きを理解しておくと、顧客に「どこまでが自動で、どこからが手動の判断か」を説明しやすくなる。トラブルを避けたいからと自動更新まで止めてしまうと、かえって細かな修正が当たらず古いままになりやすいので、少なくともマイナー更新は生かしておくのが無難だ。

現場では「問題なく動いているから触らない」という判断になりがちだが、メンテナンスリリースは表示の崩れやエディターの引っかかりといった、実際に手を止められる不具合を静かに潰している。安定性やセキュリティに関わる修正が含まれることも多いので、後回しにする理由はあまりない。中小企業のサイトや個人で回している案件ほど、更新通知に気づかず古いまま放置されやすいので、自動更新が効いているかを一度確認しておくとよい。

次のメジャー版7.1は、8月19日のWordCamp USに合わせて公開が予定されている。大きな変更点はそのとき改めて追うとして、まずは足元の7.0.1を当てて土台を整えておきたい。