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

Before

After

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

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

今回のカスタマイズは

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

カスタマイズのポイント

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

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

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

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

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

「二文字背景丸」ちょうどいい丸い背景を作ってみた

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

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

カスタマイズは自己責任。ぼくはこんな風に思っています。

カスタマイズする準備

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

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

おすすめは追加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;
}