【Cocoon】高速化でアイコンが歪む・楕円になる不具合をCSSで一発解決！

高速化設定（Lazy Load）によって発生したアイコンの歪み例

WordPressを高速化（Cocoon設定やConoHa WINGの機能）すると、副作用として「吹き出しアイコンが細長く潰れる」、あるいは「アイコンの枠が楕円に伸びる」といった不具合が起きることがあります。

Geminiさん、高速化したらアイコンがひどいことに…！これ、読者さんのサイトでも同じことが起きていたら大変ですよね。

そうですね。これは画像の読み込みを遅らせる「Lazy Load」が原因で、Cocoonユーザーなら誰でも起こりうる現象です。でも、共通のCSSで一発解決できますよ！

全Cocoonユーザー共通：アイコン歪み解決CSS

以下のコードを [外観] ＞ [カスタマイズ] ＞ [追加CSS] に貼り付けてください。激しい歪みも、枠の楕円も、これ一つで直ります。

CSSコード

/* 吹き出しアイコンの歪み・楕円化を完全修正 */
.speech-icon {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important; /* 横伸び（楕円）防止 */
    max-width: 60px !important;
    min-height: 60px !important;
    border-radius: 50% !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.speech-icon img {
    width: 60px !important; /* 数値指定で「縮み」を防止 */
    height: 60px !important;
    object-fit: cover !important; /* 画像の潰れ防止 */
    margin: 0 !important;
    padding: 0 !important;
}

これで、どんなに高速化してもアイコンは常に「正円」で美しく表示されます。もし画像が小さく縮んでしまう場合は、%ではなくpx（数値）で直接指定するのがコツですよ！