はてなブログで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。

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

.badge-type-pro {display: none;}

は、元のPROのバッジを消すcssなのでR。

このカスタマイズは、アリーサントワネット (id:alysantwanet) さんのものを参照したのでR。

ちなみに、アリーサントワネット (id:alysantwanet) さんは○○○に、AMATEURと表示させているようなのでR。

はてなブログのカスタマイズも含めて、はてなブログには下の本はとても分かりやすい本なのでR。

広告



(広告)月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
(広告)WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
(広告)年間920円(税抜)からの格安ドメイン取得サービス─ムームードメイン─




この記事をシェアできます。