【css】SWELLで数字を入れる飾り枠

工程項目を入れる時に、数字が入れられる飾り枠が便利です。

便利というか、必要に駆られてさっき作ったので、忘れないうちに書いておく次第です。

こちらのカスタマイズはSWELL利用を前提としていますが、SWELL以外でも使えます。

数字を入れる飾り枠

こういうやつが出来上がります↓

購入

材料を買う

料理

レシピを見ながら

完成

いただきまーす

数字入り飾り枠の作り方

STEP

リッチカラムを用意

SWELLのリッチカラムを用意します。SWELLじゃない場合はカラムでもOKです。カラムで作ったことないけど恐らく大丈夫でしょう。必要なカラム数を用意してください。

STEP

リッチカラムにカスタムhtmlを挿入

リッチカラムにカスタムhtmlを挿入します（ワードプレスのブロックエディタの機能です）。

そこに↓と書いてください。

<div class="title-maru"><span class="marunumber">1</span></div>

ここが飾り枠に入る数字の部分ですので、適宜変更しましょう。

STEP

カスタムhtmlの下にセクションを挿入

カスタムhtmlのまま全部やるのだるいんで、カスタムhtmlの下にセクションを挿入します。

したら枠の中に入れたいものを入れていきます。

上の飾り枠でいうなら、①の下にある「購入」から画像の部分までですね。

まあ自由に入れたいもの入れてください。

STEP

カスタムhtmlからカスタム下にあるセクションまで全部選択しグループ化

カスタムhtmlからカスタム下にあるセクションまで全部選択、グループ化します。

選択はShiftキー押しながらひとつひとつ押しておけばいけます。

グループ化したら右タブの高度な設定を開き、追加cssクラスに「flowboxwaku」と入れておきます。

STEP

cssを追加cssまたは記事編集下にあるcss用コードに記載

/*フロー*/
.flowboxwaku {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 width: 100%;　 /*横幅*/
 border: 1.5px solid #04384c; /*線の色*/
 color: #04384c;  /*文字の色*/
 background-color: #fff;　 /*背景色*/
 border-radius: 8px;  /*枠のまるみ*/
	min-height: 300px;
}

 /*丸い数字部分*/
.title-maru {
 position: absolute;
 right: 0;
 left: 0;
	margin: auto;
	top: -32px;
 padding: 0 .5em;
 font-weight: normal;
 font-size: 2em;
 color: #fff; /*数字の色*/
 background-color: #04384c;　 /*数字背景色*/
	height:60px; /*丸の大きさ*/
 width:60px; /*丸の大きさ*/
 border-radius:50%; /*数字の丸い枠*/
 line-height:50px;
 text-align:center;
}
/*数字を良い感じの場所におくために必要なやつ*/
.marunumber{
	position: absolute;
	right: 0;
	left: 0;
	top: 5px;
}

完成です。