Twitter YouTube RSS
閉じる
AIとの対話

404ふたたび

kelvintコメントをどうぞ

404リダイレクトプラグインを調べたら404エラーが爆増していて、それがアクセス減の原因になっているらしく、tanaka0903.net の方はほとんどのページを非公開にしたから404が発生して当然なのだが、socialakiba.com のほうはまた別の謎のエラーが出ている。

https://socialakiba.com/merriweather/merriweather-all-400-normal.woff?ver=30 のような謎の 404 not found エラーが多発して困ってます。google font を読み込もうとしているようですが、どうすればよいのですか。

この404エラーは、WordPressの標準テーマである 「Twenty Sixteen」 （またはそのCSSを流用・継承したテーマ/プラグイン）がフォントファイルを読み込もうとして発生している可能性が非常に高いです。

Twenty Sixteenテーマの内部CSS（fonts/merriweather.css）には、まさに以下のような記述が含まれています。

url('./merriweather/merriweather-all-400-normal.woff?ver=30')

サーバー上の指定パスに実際のフォントファイル（.woff）が存在しないか、キャッシュ・最適化プラグインによってパスの読み込みがおかしくなっていることが原因です。

以下の手順で原因を特定し、対処してみてください。

対処法1：キャッシュプラグイン・最適化プラグインの再構築

フォントをローカルホスト化するプラグイン（OMGF など）や、CSSを結合・最適化するプラグイン（WP Rocket, Autoptimize, LiteSpeed Cache など）を使用している場合にこのエラーが多発します。

  1. フォントローカル化プラグインを使っている場合
    • プラグイン設定画面から「フォントの再取得（Fetch/Re-host）」または「キャッシュ削除」を実行してください。
  2. ページキャッシュ・CSS最適化プラグインを使っている場合
    • 「CSSキャッシュのクリア」および「クリティカルCSSの再生成」を行ってください。

対処法2：使っていないテーマ「Twenty Sixteen」の無効化・削除

もし現在別のテーマ（SWELL, Cocoon, Astraなど）を使っていて Twenty Sixteen を使用していない場合でも、何らかのプラグインや設定で旧テーマのCSSが読み込まれてしまっているケースがあります。

  1. WordPress管理画面の 「外観」 ＞ 「テーマ」 を開きます。
  2. 「Twenty Sixteen」テーマを使用していない場合は削除（または最新版に更新）してください。

対処法3：Twenty Sixteen（または該当テーマ）の再インストール

もし「Twenty Sixteen」をメインテーマとして使用している場合は、テーマの更新失敗などでフォントファイル自体がサーバーから欠損している可能性があります。

  1. 管理画面から「Twenty Sixteen」を最新バージョンに更新するか、再インストール（上書き）してください。
  2. 正常にファイルが配置されれば404エラーは解消されます。

対処法4：コードで該当フォントCSSの読み込みを停止する（上級者向け）

もし「Merriweather」フォントをサイトで使っておらず、余計なリクエストを止めたい場合は、子テーマの functions.php に以下のコードを追加して該当スタイルの読み込みを解除（dequeue）することができます。

PHP

// Twenty Sixteen の標準フォント読み込みを解除する例
add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'twentysixteen-fonts' );
}, 11 );

まとめ：どこから探すか？

まずは 「CSS圧縮・最適化プラグインのキャッシュクリア」 を試し、解消しない場合は 「ブラウザのデベロッパーツール（F12）の Console や Network タブ」 で、その .woff ファイルを呼び出している元となるCSSファイル（呼び出し元）が何かを確認すると、対象のプラグインやテーマがすぐ特定できます。

twenty-sixteen 迷惑過ぎます。ということでテーマを twenty-twenty-five にしてみたのだが、今度はカスタマイズの追加css というのが無くて困ったことに。

wordpress のテーマ twenty twenty-five の css をいじるにはどうしますか。古いテーマだとカスタマイズで追加記述できたようなのですが、それがありません。

Twenty Twenty-Five などの「ブロックテーマ（フルサイト編集対応テーマ）」では、従来の「外観 ＞ カスタマイズ」メニューが非表示になっているため、戸惑われる方も多いです。

CSSを追加・編集するには主に4つの方法があります。最も簡単で標準的なのはサイトエディター内の「追加 CSS」を使用する方法です。

方法1: サイトエディターから「追加 CSS」を入力する（推奨）

ブロックテーマでは、エディター内のスタイル管理画面の中に「追加 CSS」が用意されています。

  1. 管理画面の左メニューから 「外観」＞「エディター」 をクリックします。
  2. 画面左側のメニューで 「スタイル」 を選択します（編集画面が開いている場合は、画面右上にある白黒の丸い「スタイル」アイコンをクリックします）。
  3. スタイルパネルの右上にある 「︙」（3点リーダーアイコン） をクリックします。
  4. メニュー一覧から 「追加 CSS」 を選択します。
  5. 下部にCSS入力欄が表示されるので、コードを記述して右上の 「保存」 を押します。

方法2: 従来のカスタマイザーURLに直接アクセスする（裏技）

管理画面のメニューからは消えていますが、従来のカスタマイザー機能自体は裏側で動作しています。

  1. ブラウザのアドレスバーに以下のURLを直接入力してアクセスします。https://あなたのサイトのドメイン/wp-admin/customize.php
  2. 見慣れた従来型のカスタマイザー画面が開き、メニュー内に 「追加 CSS」 が表示されます。
  3. 従来通りCSSを入力し、「公開」をクリックします。

方法3: プラグインを使用する

テーマを将来変更した際もCSSを引き継ぎたい場合や、入力補完（シンタックスハイライト）機能を使いたい場合に便利です。

  • WPCode や Simple Custom CSS などのプラグインをインストールすると、専用のコード管理画面から安全にCSSを追加・管理できます。

方法4: 子テーマを作成して style.css に記述する

記述するCSSの量がかなり多い場合や、テーマ構造全体のカスタマイズを行う場合は子テーマを作成するのが安全です。

  1. wp-content/themes/ 内に twentytwentyfive-child フォルダを作成します。
  2. style.css と theme.json を準備し、親テーマとして Twenty Twenty-Five を指定します。
  3. 子テーマの style.css 内に独自のCSSを追加していきます。

💡 ブロックテーマでのワンポイント

単純な「フォントサイズ」「余白」「背景色」などの変更であれば、CSSを書かずとも 「外観 ＞ エディター ＞ スタイル」 や、各ブロックの詳細設定パネルからノーコードで変更できる箇所が大幅に増えています。まずは標準機能で調整できないか確認してみるのもおすすめです。

てわけで、追加cssを出すことには成功したのだが、これをいじっても全然レイアウトが変わらない。

wordpress のテーマ twenty-twentiyfive の main 要素の margin-top を変更したいのですが、うまくいきません。どこを書き換えれば良いですか。

Twenty Twenty-Five などの「ブロックテーマ（FSE）」では、従来のテーマと異なり main 要素そのものの余白（margin）がCSSで定義されているのではなく、WordPressの「ブロック間隔（Block Gap）」や「テンプレート構造」によって制御されている ため、単純に main { margin-top: 0; } と書くだけでは効かない（上書きされる）ケースがよくあります。

解決策は 「管理画面のサイトエディターで調整する（おすすめ）」 か 「CSSで強力に上書きする」 の2パターンあります。

方法1：サイトエディター（ノーコード）で調整する【推奨】

Twenty Twenty-Five では、コードを書かずに管理画面から余白を調整するのが最も確実で壊れにくい方法です。

1.サイトエディターを開く:

WordPress管理画面の 「外観」 ＞ 「エディター」 を開きます。

2.該当のテンプレートを選択:

「テンプレート」 をクリックし、余白を調整したいページ（例: 「単一投稿」「固定ページ」「Index」など）を選択して編集画面に入ります。

3.メインコンテンツ（Groupブロック）の余白を変更する:

リスト表示（画面左上の横3本線アイコン）を開き、Header と main の直下にある一番上の 「グループ (Group)」ブロック を選択します。

右側の設定パネル（スタイルタブ／半月型のアイコン）を開き、「寸法 (Dimensions)」 の中にある 「マージン (Margin)」 や 「パディング (Padding)」 の上部数値を変更します。

方法2：追加CSSで強力に上書きする

CSSで制御したい場合は、WordPressが生成する内部インラインスタイルやCSS変数を上書きする必要があります。

管理画面の 「外観」 ＞ 「エディター」 ＞ 右上の「スタイル（半月アイコン）」 ＞ 右上の「縦の3点リーダー（⋮）」 ＞ 「追加 CSS」 に以下コードを貼り付けてみてください。

① main 要素に直接指定する場合（!important 付与）

WordPress内部の強い指定を打ち消すため、!important を指定します。

CSS

/* main要素自体の上余白を変更 */
main#wp--skip-link-target,
main.wp-block-group {
  margin-top: 20px !important; /* 希望の数値に変更 */
  padding-top: 0 !important;
}

② ヘッダーとメインの間の「隙間」を消したい場合

もし main の上ではなく、ヘッダーとメインエリアの間の余白を調整したい場合、WordPressの block-gap というCSS変数が影響している可能性があります。

CSS

/* ルート直下の要素間の余白（gap）を上書き */
.wp-site-blocks > main {
  margin-top: 0 !important;
}

/* ヘッダー直後の要素の上マージンリセット */
header + main {
  margin-top: 0 !important;
}

うまくいかない場合のチェックポイント

画面上で右クリック ＞ 「検証（デベロッパーツール）」 を開き、main タグ自体に余白がついているか、または内部の最初の div（グループブロック）や header 側に margin-bottom や padding がついているか確認してみてください。

というわけでサイトエディターというものを使ってみたのだが、これが当たりだった。

wordpress どんどん進化してるじゃんやべえってなった。おかげで良い暇つぶしになった。

メニューも、メニューだけのエディターはなくなり、このサイトエディターというものに統合されている（ナビゲーションを編集などとやる）。

なんかもういろんなところに、次々に新たな問題が発生して、その対応に追われて、退屈しているヒマがない。そろそろ収益化のほうにも進展がみられてくれぬものか（笑）。

ていうか収益化してるドメインとされてないドメインの間でリダイレクトしてると問題が複雑になってかなわんので、もうリダイレクトするのはやめた。単に 404だけそれぞれのドメインでリダイレクトすることにした。

最近のテーマはなんで左右にでっかい余白を作りたがるのか不思議だったが、広告を入れるためだったのだな。あとはスマホで見た時のレイアウトを優先すればそうなるよな。

しかしこのブログ大半がAIとの壁打ちの記録になりつつある。

コメントを残す

メールアドレスが公開されることはありません。必須項目には印がついています *