ふんわり囲み

ふんわり囲みの作成方法

0.cssを追加する

外観→カスタマイズ→の追加CSSに移動し
コードの最後に下記のコードを追加します。

/****ふんわりピンク****/
.funwari-pink {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 color: #555555; /* 文字色 */
 background-color: #fff; /* 背景色 */
 box-shadow: 0 0 5px 5px #ffdefe, 0 0 5px 3px #ffdefe inset; /* 影 */
 border-radius: 10px; /*角の丸み*/
}

1.Snippetsを開く

2.コードを追加する

AddNewから新規作成して、
画像を参考に赤に記入してください。
コードの内容は下記となります。
記入が終わったら画面したのsavechangeボタンを押します


add_shortcode( 'funwari-pink', function ($atts, $content = null) {
	
$atts = shortcode_atts(array(
  "color" => "#ffdefe", 
),$atts);
	
	$out = '<div class="funwari-pink" style="box-shadow: 0 0 5px 5px '.$atts["color"].', 0 0 5px 3px '.$atts["color"].' inset;">'. $content.'</div>';
	return $out;
} );

3. snppetを有効にする

4.AddQuicktagの設定に移動

4.AddQuicktagの設定を行う

開始タグ
[funwari-pink color=”色”]

終了タグ
[/funwari-pink]

5.動作確認

４までの手順で設定は完了ですので
実際にタグを入力して動作確認してみましょう。