WordPress『AFFINGER5』枠（マイボックス）の中に枠を入れたい

WordPressのテーマ『AFFINGER5』は、様々な装飾アイテムが入っているので、とっても便利です。テーマ独自のコードを、ボタンやプルダウンから一発配置出来るので使いやすいですが、組み合わせが効かないこともあるんですよね。今回は、枠の中に枠を入れようとしたらハマったので、メモとして残したいと思います。

店舗サイトのお知らせ枠

簡略化すると、こんなイメージで、枠の中に枠を入れたいのです。

仕事で、お客様の店舗サイトを作成管理していますが、新型コロナウイルスによる緊急事態宣言の影響で、いつもとは異なる『お知らせ欄』の表現が必要になりました。普段は新着順に上から並べ、重要事項はボタンリンクなどで表現していましたが、今回は一時的かつ期間未定な為、特殊な営業時間を掲載することになったのです。

作戦1『枠の中に枠』

上記コードは『AFFINGER5』オリジナルの『マイボックス』で、単純に枠の中に枠を入れてみました。

すると、枠は入るけど文字が出てしまいます。

作戦2『<div>で囲む』

次は<div>で挟んでみました。

結果は、同じですね・・・。

作戦3『HTMLを使う』

考えてみれば範囲指定に無理があったので、通常のHTMLの枠線を使って挟んでみました。

すると、無事に収めることが出来ました。
もっとスマートなやり方があるかも知れませんが、コードが書けない身としては、十分に頑張ったと思います。