How to display HatenaBlog Pro. 自己責任。グレーゾーン。お遊び程度。
発見した
はてなブログ「Pro」だとなんとなくベテランが書いた記事に見えてしまいませんか()。。
noteより内容の薄い日記を始めるべく、はてなブログをカスタマイズしている中、プロフィールに「Pro」マークを表示させる方法はないかとggり、ソースを見つけたのでメモメモやよ。
ブログ始めました。Koshi⚔🎮Tech Blog
方法1 プロフィールに貼り付け
はてなブログ>デザイン>カスタマイズ>サイドバー>プロフィール(モジュール)
プロフィールの自己紹介の中にあるという扱いになる。
上2行だけ。コードを見やすくするため二行に分けた。簡単だけどこれだけでは細かい位置調整は効かない。
クラス badge-type-proをデザインCSSでいじれば位置調整が効くかもしれない。(未検証)
hatenapro.html
<ahref="http://blog.hatena.ne.jp/guide/pro"title="はてなブログPro"><iclass="badge-type-pro">はてなブログPro</i></a>ロボットとゲームが好きな中二病患者です。(自己紹介文:例)
方法2 さらにかっこよくしたい人向け
hatenapro.css
span.id::after{content:"VTuber";/*自由記述*/display:inline-block;font-size:11px;font-weight:normal;line-height:1;border:solid1px;border-radius:5px;padding:3px5px;margin-left:10px;}
位置調整はmarginやpaddingで少しいじる。
はてなブログProを非表示にする
逆に消したい場合
nonedisplay.css
.badge-type-pro{display:none;}
おまけ どっちが本物?偽物?
![]() | ![]() |
---|---|
PRO(自称) | 偽物 |
書体(フォント)が違う。何の書体だ...?
最後に
これであなたも自称はてなブログPROだ。(そのうち修正入るかもね。(ボソ...))