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

Before

After

MENくん

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

くま1号

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

今回のカスタマイズは

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

カスタマイズのポイント
  1. 通常のラベルよりも可愛い
  2. 優しいデザインのサイトに最適
  3. テキストリンクが目立つ

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

MENくん

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

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

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

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

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

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

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

カスタマイズする準備

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

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

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

うまくできたか
確認

確認する際は必ずキャッシュを削除してから見てください

確認方法
「Ctrl」+「F5」(キャッシュ削除)

カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。

Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

カスタマイズはキャッシュ削除をマスターしてからです

くまからのお礼

本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)

もっとカスタマイズしたい人はこちらの記事を見てください。

【圧倒的SANGOカスタマイズまとめ】~ようこそ、沼への入口へ~