【2026年10月20日時点の情報です】
このブログは、WordPressのテーマ「Cocoon」を使っています。2026年10月に、前に書いた技術記事を1本ずつ書き直していたとき、公開したページで、文の中の例のURLが大きなカードに変わって崩れている記事がいくつも見つかりました。
原因は、Cocoonの「ブログカード」の機能でした。この記事では、そのときに見つけた崩れ方と、URLをカードにしないための書き方をまとめます。
場面1：例のURLが、カードになって並んでいた
崩れていたのは、Laravelというフレームワークの使い方を書いた記事です。「このように書くと、次のURLになります」のような説明で、例のURLを本文に書いていました。
| No. | 記事で書いていたURL | 公開したページでの見え方 |
|---|---|---|
| 1 | http://example.com/user/profile のような、例のドメインのURL | 文の代わりに、カードやサムネイルの画像が出ていた。1本の記事では、同じURLのカードが6回並んでいた |
| 2 | http://127.0.0.1:8000 のような、自分のパソコンで動かすときのURL | これもカードに変わっていた |
説明の文として読ませたかったURLが、どれも「ほかのページへのリンク」の形に変わっていました。読む人から見ると、何のカードなのか分からず、説明の流れも切れてしまいます。
場面2：編集画面では、気づきにくい
この崩れは、WordPressの編集画面では分かりません。編集画面では、ブログカードは広がらず、URLの文字のまま見えます。カードになるのは、公開したページ（とプレビュー）だけです。
| No. | 見る場所 | URLの見え方 |
|---|---|---|
| 1 | 編集画面 | URLの文字のまま |
| 2 | プレビュー・公開したページ | ブログカードになる |
そのため、書いているときは問題がないように見えて、公開したあとに崩れていました。
Cocoonには、本文にURLだけを書いた行を、自動でブログカードにする機能があります。ほかの記事を紹介するときには便利な機能ですが、技術記事で「例のURL」を書くときには、これが逆にはたらきます。
場面3：URLをカードにしない書き方
書き直しでは、URLの役目に合わせて、次のように直しました。
- パスだけを書く：
example.com のような例のドメインは、説明には要らないことが多いです。ルーティングの説明では、http://example.com/user/profileではなく/user/profileのように、パスだけを表に書く形にしました - インラインコードに入れる：
127.0.0.1:8000のように、URLそのものを見せたいときは、文の中のURLをインラインコード（WordPressの書式のツールバーの「インラインコード」）にしました。プレビューで、カードにならずにURLの文字のまま出ることを確かめました - コマンドと一緒に書くときは、コードブロックに入れる：
curl のように、URLを入れたコマンドを見せるときは、コードブロックの中に書きます。コードブロックの中のURLは、カードになりません
例えば、このブログでは、ページの返事を確かめるコマンドを次のように書いています。
curl -sI https://softdev-learn.cc/ | grep -i "^HTTP"場面4：公開する前に、プレビューで確かめる
編集画面では見分けられないので、URLを書いた記事は、公開する前にプレビューを開いて、URLがカードに変わっていないかを確かめると安心です。
確かめるところは、次の3つです。
| No. | 確かめるところ | 見るポイント |
|---|---|---|
| 1 | 文の中に書いたURL | カードにならず、文字のまま出ているか |
| 2 | 表の中に書いたURLやパス | 表がくずれていないか |
| 3 | わざとカードにしたURL（ほかの記事の紹介など） | カードになっているか |
まとめ
Cocoonでは、URLだけを書いた行がブログカードになります。編集画面ではURLの文字のまま見えるので、例のURLを書いた技術記事では、公開してから崩れに気づくことがあります。
例のURLは、パスだけを書くか、インラインコードやコードブロックに入れる。そして、公開する前にプレビューで確かめる。この2つで、意図しないカードは防げます。
コードブロックやコマンドの書き方の例は、データベースのコマンドの記事でも見られます。WordPressのほかの記事は、WordPressのカテゴリーにあります。
コメント