Simple Life Navi

ミニマルな日常の気づき、楽しい体験などを掲載

- トップもご覧ください - 検索画面では「シンプルライフナビ」と検索ください -

Blog

Mobile

Travel

Useful

☕ New Articles ☕️️

はてなブログでプロフィール欄のPROの表示を消す(デザインを変更する)|コピペ用CSS付

はてなブログのPROマークを削除・変更する方法

はてなブログのPROマークを削除・変更する方法

こんにちは、シンプルライフ ナビです。

はてなブログを見ていたら、不思議な違和感を感じました。その正体は…あなたもお気づきになりましたか?

プロフィール欄の PRO の表示(マーク)が変わった!?

はてなブログのPROマーク

PROマークの表示デザインが変わった?

いつからPROのデザインや色が変わったのでしょう。なんだか黄色くなっていますね。黄土色?黄金色ですか?

この変更、ブログのデザインにこだわりのある人からみると、あまり嬉しくない変更なのではないでしょうか。着色表示は一時的なものなんでしょうかね?

プロフィール欄を表示したまま、黄色いPROマークのデザインを変更したり消すことはできるのか?
3つの方法を試してみました。

はてなブログのPROの表示マーク(画像)を消す方法

はてなブログProのプロフィール欄の、PROマークの色やデザインが変わっています。*1

以前はモノクロ・モノトーン調の表示でしたが、現在は黄金色の背景に白文字に変わっています。

はてなブログのPROマークを変更する

はてなブログのPRO表示を変更する

プロフィール欄はデフォルトのものが気に入らなければ自作することもできますが、今回は既存のプロフィール欄を活用しつつ、カスタマイズしてみました。

黄色くなってしまった「PRO」の表示を消す方法(またはデザインを変える方法)を3つ試しましたので、ご紹介します。

現在の表示コードを分析してみた

まず、現在表示されている「標準表示状態のコード」を確認してみました。

「PRO」表示の部分は「badge-type-pro」という設定で表示がコントロールされているようです。(細かい話は不要で、消す方法だけ分かれば良い人はこの項目は読み飛ばしてOKです。)

.badge-type-pro{background-image:url(/images/common/badge-type-pro.svg?version=2e25b72ecf89f74274bb2ac807508c);
<中略>
height:16px;margin-left:.3em;margin-right:.3em;width:32px}

PROマークは画像表示になっていて、赤色の部分でPROマークの画像が指定されています。また紫色部分で画像の大きさ指定などがされています。

つまり、赤色と紫色の部分を新たに指定すれば、黄色のPROマークを消したり変更することができますね。

PROの表示マーク(画像)をCSSで非表示にする方法

PROマーク(画像)を消す方法は簡単です。(上の図の❸の状態になります。)

 

次のCSSコード(この1行だけでOK)をデザインCSSの最後に追記すると、PROマークが非表示になります。

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

 

CSSコードを記述する場所は、次の通りです。

 ダッシュボード画面 →  デザイン →  カスタマイズ → デザインCSS にすすみ、既存のコードを消さないように注意して、既存のコードの後ろにCSSコードを追記してください。
デザインCSS

Warning!
CSSコードの記述を改変する場合は、はてなブログ|デザインCSSのバックアップ!トラブルへの備え を参考にして必ずバックアップを取っておきましょう。

意外と簡単にできましたね!

はてなブログのPRO表示の画像を差し替えてデザインを変更する方法

上記でご紹介の方法の場合は、プロフィール欄から「PRO」の表示が消えてしまいます。

PROの表示を好きなようにデザイン変更できるのでしょうか?

せっかく「はてなブログPro」にしているので、PRO利用をアピールしたいと思われている場合は、少し手間がかかりますが、好きなPRO表示にデザインを変更することができます。

画像差し替えもできる

 

上記の「PROマーク(画像)を非表示にする方法」のCSSを追記した人は、その該当部分を削除してください。

そして、代わりに次のコードをCSSに追記しましょう。

.badge-type-pro{background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/XXXXXXXXXXX);}

赤色の部分は、ご自身のはてなブログのフォトライフの画像を指定すればOKです。

 

あらかじめフォトライフに表示させる画像を作成して、アップロードしておきましょう。*2

画像サイズは、上で確認した「表示コードの分析」から、高さ16px、幅32pxを目安にしてください。好きな画像を作成して、お試しください。

(試しにCanvaで作れる最小サイズの40pxで作って調整したら、少しぼやけますが画像を差し替え出来ました。)

simplelifenavigation.com

はてなIDもPRO表示も非表示にして良い場合の対応は簡単

プロフィール欄の「編集」から「はてなIDを表示する」のチェックを外せば、はてなIDもPRO表示もまとめて非表示にすることもできます。

 

 ダッシュボード画面 →  デザイン →  カスタマイズ → サイドバー → プロフィール にすすみ、はてなIDの表示をOFFにします。

はてなIDと連動して消す方法

はてなIDと連動して消す方法

これが一番簡単だけど、名前(ID)がわからなくなってしまうね。

まとめ|はてなブログProのプロフィール欄のPROの表示はカスタマイズ可能

はてなブログProのプロフィール欄のPROの表示が、知らないうちに変わってしまいました。(事前に通知があったのかもしれないですが、そうだとすると私は見落としてます。)

私の場合、ブログのカラーコードイメージと合わないような気もしたので、表示を変更できるのか、この記事でご紹介の3つの変更方法を試してみました。

 

はてなブログProの場合、はてなブログ側での急なデザイン変更があっても、ある程度ブログ運営者側でも対処できるカスタマイズの自由度があるので助かりますね。

 

はてなブログProにしたのに、「PROのマークがダサくなってしまったよ〜。なんとかならないの?」と思った人の参考になれば幸いです。

なお、表示を標準に戻す場合は、追記したCSSコードを削除してください。

 

私はもう少し様子見しながら対応を決めようと思います。*3

その他カスタマイズの参考→ブログなど カテゴリーの記事一覧  

*1:2022年8月2日に気がつきました。

*2:はてなフォトライフを開き、作成した画像を選択して表示し、右クリックして「イメージのアドレスをコピー」をしたら、赤色の部分に貼り付ける。

*3:いったんこの記事で紹介しているカスタマイズをしていますが、そのうち元に戻したり、表示を消すかもしれません。