WordPress

【AFFINGER5】CSS追記なし!タブ付きデザインのボックスを作る方法

WordPressのテーマ『WING(AFFINGER5)』で、CSSを追記せずにタブ付きデザインのボックスを作る方法を紹介します。

タブ付きデザインのボックスっていうのは…

ここにタブがある
  • こんな感じのデザインのボックスです。
  • リストを入れてもお洒落になります。

タブはあくまでデザインなので、タブや内容を切り替える機能はありません。

『JIN』にも『SANGO』にもある、めちゃくちゃ使いやすいデザインのボックスなので、『AFFINGER5』でも再現できないかと試していたところ、ショートコードだけで再現できました。

タブ付きデザインのボックスの作り方

このタブ付きデザインのボックスは…

「まるもじ(小)」と

「マイボックス」のショートコードの組み合わせでできています。

「まるもじ(小)」「マイボックス」の間を詰め、borderradius(角の丸み)を個別に設定しています。

コピペで使えるコード

[st-marumozi fontawesome="" bgcolor="#546E7A" bordercolor="" color="#fff" radius="4px 4px 0 0" margin="0 100px 0 10px"]タイトル[/st-marumozi]

[st-mybox title="" fontawesome="" color="" bordercolor="#546E7A" bgcolor="#ffffff" borderwidth="1" borderradius="0 4px 4px 4" titleweight="" fontsize="" myclass="st-mybox-class" margin="0 10px 25px"]

内容

[/st-mybox]

「まるもじ(小)」のbgcolorと、「マイボックス」のbordercolorを好みの色に変えて使ってください。

borderradiusの設定方法

『AFFINGER5』のショートコードのborderradiusは、CSSのborder-radiusと同様、角の丸みを個別に設定することができます。

CSSのborder-radiusと同じく、左上、右上、右下、左下の順です。

ただし、最後に単位(px)が自動的に挿入されるので、最後の単位は省略します。

まとめ

『AFFINGER5』でタブ付きデザインのボックスを作るには、「まるもじ(小)」と「マイボックス」を組み合わせます。

『AFFINGER5』のショートコードでも、角の丸みを個別に設定できます。

-WordPress

© 2020 MARKLOG