はてなブログでPROのバッジ内容を他の内容にアレンジするのでR

はてなブログでは、無料とPROの2種類の契約があるのでR。

そして、PROでは、サイドバーのプロフィール欄の名前(id:○○○)、とかいてある横に

と表示されるのでR。

PROと書かれるといささか照れるのでRが、少しお金出しってっぞというバッジみたいなものとなるのでR。

無料とPROでの契約の違いは、ここに書いてあるが、

・はてなによる広告を表示しない（自分の広告を自由に配置可能）
・独自ドメインを利用できる
・スマートフォンでもブログパーツや広告を自由に設置
・ヘッダメニューとフッタメニューを表示しない
・固定ページを作成できる
・ブログのトップを一覧形式に

あたりが、メリットなのでR。ただし、少しだけお金がかかるのでR。

ただし、

長い目で見ると、自分の広告、独自ドメインはそのお金以上のメリットとなるのでR。

そこで、

のバッチがほこらしげなのでR。

しかし、

PRO自体はかっこいいが、これを自分流にアレンジしたバッチにもしたいのでR。

そのためには、

「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」で

.badge-type-pro {display: none;}
span.id:after {
    content: "○○○";
    display: inline-block;
    font-size: 11px;
    font-weight: normal;
    line-height:1;
    border: solid 1px;
    border-radius: 5px;
    padding: 3px 5px;
    margin-left: 10px;
}

と挿入すればよいのでR。ちなみに、○○○は自分の好みのアレンジにすればよいのでR。日本語もOKでR。

ちなみに、上のコードにある、