「チェックマーク付きリスト」を「囲み型ショートコード」で出力

1. CSSで「チェックマーク付きリスト」をデザインして、
2. WordPressの「囲み型ショートコード」で出力します。

• チェックマーク付き文字列の簡単表示

チェックマーク付き文字列をショートコードで簡単表示

【文章内での使い方】

記事内で、
[point]チェックマーク付き文字列[/point]
↑このように書くと
↓このように表示されます。

• チェックマーク付き文字列

【functions.php】

/*
 * 囲み型ショートコードでチェックマーク付き文字列を出力
 *
 * ex.) [point]チェックマーク付き文字列[/point]
 *      
 * @param	string		
 * @return	string
 */
function point_func( $atts, $content = null ) {
    return '<ul class="point_ul"><li class="point_li">' . $content . '</li></ul>';
}
add_shortcode('point', 'point_func');

【CSS】

/* 囲み型ショートコードでチェックマーク付き文字列 */
.point_ul{
	 list-style-type: none!important;
}
.point_li{
    position: relative;
    padding-left: 25px;
	font-weight: 600;
	color:#333;
}
.point_li:before {
    content: "";
    position: absolute;
    top: .3em;
    left: 0;
    -webkit-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    transform: rotate(50deg);
    width: 7px;
    height: 12px;
    border-right: 4px solid #3680bd;
    border-bottom: 6px solid #3680bd;
}