Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8664

誰でもたった一行で、はてなブログ「Pro」を表示する方法

$
0
0

How to display HatenaBlog Pro. 自己責任。グレーゾーン。お遊び程度。

発見した

はてなブログ「Pro」だとなんとなくベテランが書いた記事に見えてしまいませんか()。。
noteより内容の薄い日記を始めるべく、はてなブログをカスタマイズしている中、プロフィールに「Pro」マークを表示させる方法はないかとggり、ソースを見つけたのでメモメモやよ。

ブログ始めました。Koshi⚔🎮Tech Blog

方法1 プロフィールに貼り付け

はてなブログ>デザイン>カスタマイズ>サイドバー>プロフィール(モジュール)
プロフィールの自己紹介の中にあるという扱いになる。

スクリーンショット 2019-11-20 08.35.17.png

上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 さらにかっこよくしたい人向け

はてなブログ>デザイン>カスタマイズ>デザインCSS
スクリーンショット 2019-11-20 08.55.30.png

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で少しいじる。

スクリーンショット 2019-11-20 08.56.02.png

はてなブログProを非表示にする

逆に消したい場合

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

おまけ どっちが本物?偽物?

スクリーンショット 2019-11-20 09.56.10.pngスクリーンショット 2019-11-20 09.45.00.png
PRO(自称)偽物

書体(フォント)が違う。何の書体だ...?

最後に

これであなたも自称はてなブログPROだ。(そのうち修正入るかもね。(ボソ...))

【参考】

はてなブログの[PRO]の表示に対抗してCSSで[AMATEUR]と表示させる方法


Viewing all articles
Browse latest Browse all 8664

Trending Articles