SANGOのテキストラベル装飾を丸に変更するカスタマイズ（リストにとけ込もう）

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33

Before

After

丸の方がぼくは良く使うので、ラベルの形を変更しました

日本語なら２文字、英語ならもう少しいけるで！

今回のカスタマイズは

SANGOのテキスト装飾の「ラベル（アクセントカラー）」をカスタマイズしました

カスタマイズのポイント

通常のラベルよりも可愛い
優しいデザインのサイトに最適
テキストリンクが目立つ

例リストデザインに溶け込みよる

SANGOオリジナルブロックでリストと併用する時は、丸ラベルのサイズを調整しています。

ちなみに、こちらのカスタマイズはクラシックエディタの時にも紹介しています。

クラシックエディタをお使いの方は、こちらの記事を参考にしてください。

カスタマイズは自己責任でお願いします

自己責任が良くわからない人、初めてカスタマイズする人はこちらの記事を必ず呼んでください。

[toc]

カスタマイズする準備

CSSを追加するだけでできます。

追加する手順を選びましょう。

おすすめは追加CSSからコードを追加する方法です。

はじまてカスタマイズする方は、こちらの記事を読んでくださいね。

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。

普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

カスタマイズに必要な
CSSコード

ãã®ç»åã«ã¯ alt å±æ§ãæå®ããã¦ãããããã¡ã¤ã«åã¯ kopinosikata.png ã§ã

カスタマイズコード

.sgb-label-accent-c {
    font-size: 12px;
    font-weight: 500;
    width: 34px;
    line-height: 34px;
    border-radius: 50%;
    padding: 0;
    text-align: center;
    margin-right: 8px;
    vertical-align: bottom;
}
.sgb-box-simple__body .sgb-label-accent-c {
    font-size: 10px;
    width: 27px;
    line-height: 27px;
    vertical-align: top;
}

[kjk_ab id="4"]