【Cocoon】モバイル(iPhone)視点で「円形にした囲いボタン」からはみ出す「光らせる」を直す方法

どうも、CSS迷子ことオトナシです?

※この修正案はCocoonのフォーラムにてご教示いただきました。

▽この記事から分かること▽

iPhoneから観た時の囲いボタンの光る部分のはみ出しの直し方（※ボタン円形時）
正前と後のビフォー＆アフターの比較GIF画像

有難いことに、無料テーマのCocoonではデフォルトのブロックエディタの機能で「囲いボタン」のブロックが付いていますよね。

その「囲いボタン」のブロックを設置して文字を入力した後、ブロック≫囲みボタン設定からボタンを「光らせる」をオフからオンにするとボタンの上に白い線(shine)のエフェクトを流すことができます。

さらに、角を丸める機能も付いているため、よりボタンらしい見た目を再現することも可能です。

その機能を使って必要なボタンを設置していたある日のこと、ちょっとしたハプニングが生じてしまいました。

それがタイトルの「囲いボタンから光りがはみ出る件」になります。

コクーンの「円形にした囲いボタン」からはみ出す光るエフェクトの直し方の手順
1. 修正するための2種類のコードを記事のカスタムCSSで試してみました
  1. 記事のカスタムCSSって何？なぜスタイルシートのCSSからはダメなの？
2. 記事のカスタムCSSに追加したコードとその内容

コクーンの「円形にした囲いボタン」からはみ出す光るエフェクトの直し方の手順

まず、状況の簡単な説明は以下の通りです。

状況

必要なボタンを設置した後、
PCから投稿画面を確認してみると綺麗にボタンの枠内に収まっていた光るエフェクトが、
モバイル(iPhone)から見たときだけ長方形にはみ出ている。

※iPhone以外では枠内に収まって見えるようなのでiPhone視点のみの見え方の違いです。

iPhoneから初期状態の様子を見ると、丸くする前の状態が反映されているという感じでしょうか。

親テーマを参照するとスタイルシートのCSSの中に「ボタンを光らせる」項目があり、overflow:hidden;によって対象からはみ出さないように設定されているようです。

パソコンから見たときは丸めた枠内に収まっているのに対してiPhoneではみ出してしまうのはなぜだろう？とCSSをいじってみましたが解決できずフォーラムの活用に至ります。

修正するための2種類のコードを記事のカスタムCSSで試してみました

他のコードが悪影響を及ぼしている可能性がないようにコードを書き換えていないサイトを使用して相談してみたところ、2つの方法を教えていただけため手順の通りに記事のカスタムCSSにコードを追加してみました。

※このコードが光のはみ出しの修正以外にどのような影響を及ぼすのか正確に判断できないため、ご自身で行う場合は全て自己責任で行ってください。

※また、コードを追加する前にはバックアップをしてください。

記事のカスタムCSSって何？なぜスタイルシートのCSSからはダメなの？

Cocconのテーマでは記事（ページ）ごとに反映できるカスタムCSSも手軽に追加することができます。

この件を例に挙げると、テーマエディターのCocoon Child(子テーマ)のスタイルシート (style.css)でCSSを追加すると同要素を持つ他のページにも反映されるため、

光らせたいボタンを使用しているページのみに反映させたい場合は投稿ページに設置されている『記事ごとのカスタムCSS』の使用が望ましいです。

他のコードに影響がないとも限らないため全体に反映させるリスクは避けておきましょう。

※カスタムCSSやカスタムJavaScriptはブロックエディタの場合、記事を下にスクロールしていくと設置されています。

※見当たらない場合は非表示になっているため、右上の…マーク≫設定≫パネル≫カスタムCSSにＯＮに切り替えてください。

それでは、コードを追加した様子を以下に記載します▽

記事のカスタムCSSに追加したコードとその内容

ページのカスタムCSSを追加した様子

見本.1
1つ目の修正案コード
```
.btn-circle,
.btn-wrap-circle > a {
    background-clip: padding-box;
}
```
引用元：Cocoonフォーラム
1つ目のコード適応時
囲いボタンを光らせる修正（background-clip＋padding-box）背景黒
・background-clip
background-clip は CSS のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。
・padding-box
背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。
引用元：MDN Web Docs-background-clip
1つ目では、background-clipの背景の拡張とpadding-boxの範囲指定によって光の部分をボックス（値：circle）の枠に合わせるように修正されています。
そして、初期状態と比べて上下左右の枠一杯に光りが拡張しているため、本文の背景をデフォルトの白にすることで視覚的にはボタンだけが光っているように見せることが可能です▽
囲いボタンを光らせる修正（background-clip＋padding-box）背景白
見本.2
2つ目の修正案コード
```
.btn-circle,
.btn-wrap-circle > a {
    clip-path: border-box;
}
```
引用元：Cocoonフォーラム
2つ目のコード適応時
囲いボタンを光らせる修正（clip-path＋border-box）背景黒
・clip-path
clip-path は CSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。
・border-box
背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。
引用元&参照元：MDN Web Docs-clip-path,Coliss
2つ目の修正では、clip-pathによってborder-boxの外側を非表示することで枠内のみ光るように修正されています。
※ボタン（.btn-circle, .btn-wrap-circle）のクラスの要素にスタイルを適用させているため、同要素にborder-boxの外側を装飾するようなCSS（例：ボタンに影を付ける）などのコードを追加している場合は非表示になる恐れがあります。
※この状態になるのはiPhone視点です。PC（ブラウザ:Google chrome）では、この場合であっても影は反映されています。