- CSSで「チェックマーク付きリスト」をデザインして、
- 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;
}
コメント