色鉛筆風アンダーライン

色鉛筆風アンダーラインの作成方法

1.Snippetsを開く

2.コードを追加する

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

 

add_shortcode( ‘iroenpitsu-pink’, function ($atts, $content = null) {

$atts = shortcode_atts(array(
“color” => “#f200ff”,
),$atts);

$colorcode = preg_replace(“/#/”, “”, $atts[“color”]);
$array_colorcode[“red”] = hexdec(substr($colorcode, 0, 2));
$array_colorcode[“green”] = hexdec(substr($colorcode, 2, 2));
$array_colorcode[“blue”] = hexdec(substr($colorcode, 4, 2));

$out = ‘<span style=”box-shadow: 2px -6px 8px -7px rgba(‘.$array_colorcode[“red”].’,’.$array_colorcode[“green”].’,’.$array_colorcode[“blue”] .’,0.8) inset,-3px 5px 3px -8px ‘.$atts[“color”].’;”>’. $content.'</span>’;
return $out;
} );

3. snppetを有効にする

4.AddQuicktagの設定に移動

4.AddQuicktagの設定を行う

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

 

終了タグ
[/iroenpitsu-pink]

5.動作確認

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