こんにちは、シンプルライフ ナビです。
はてなブログProのマークが変わった!? あなたもお気づきになりましたか？
プロフィール欄の PRO の表示（マーク）が変わってる！
いつからPROのデザインや色が変わったのでしょう。なんだか黄色くなっていますね。黄土色？黄金色ですか？
この変更、ブログのデザインにこだわりのある人からみると、あまり嬉しくないかも。着色表示は一時的なものなんでしょうかね？
プロフィール欄を表示したまま、黄色いPROマークのデザインを変更したり消すことはできるのか？
3つの方法を試してみました。
- はてなブログのPROの表示マーク（画像）を消す方法
- はてなブログのPRO表示の画像を差し替えてデザインを変更する方法
- はてなIDもPRO表示も非表示にして良い場合の対応は簡単
- まとめ｜はてなブログProのプロフィール欄のPROの表示はカスタマイズ可能
はてなブログのPROの表示マーク（画像）を消す方法
はてなブログProのプロフィール欄の、PROマークの色やデザインが変わりました。*1
以前はモノクロ・モノトーン調の表示でしたが、現在は黄金色の背景に白文字に変わっています。
プロフィール欄はデフォルトのものが気に入らなければ自作することもできますが、今回は既存のプロフィール欄を活用しつつ、カスタマイズしてみました。
黄色くなってしまった「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コードを追記してください。
意外と簡単にできましたね！
はてなブログの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で作って調整したら、少しぼやけますが画像を差し替え出来ました。）
はてなIDもPRO表示も非表示にして良い場合の対応は簡単
プロフィール欄の「編集」から「はてなIDを表示する」のチェックを外せば、はてなIDもPRO表示もまとめて非表示にすることもできます。
ダッシュボード画面 → デザイン → カスタマイズ → サイドバー → プロフィール にすすみ、はてなIDの表示をOFFにします。
これが一番簡単だけど、名前（ID）がわからなくなってしまうね。
まとめ｜はてなブログProのプロフィール欄のPROの表示はカスタマイズ可能
はてなブログProのプロフィール欄のPROの表示が、知らないうちに変わってしまいました。（事前に通知があったのかもしれないですが、そうだとすると私は見落としてます。）
私の場合、ブログのカラーコードイメージと合わないような気もしたので、表示を変更できるのか、この記事でご紹介の3つの変更方法を試してみました。
はてなブログProは、カスタマイズの自由度が高いですね。
はてなブログ側で急なデザイン変更があっても、ある程度ブログ運営者側で対処できるカスタマイズの自由度があるので助かります。
はてなブログProにしたのに、「PROのマークがダサくなってしまったよ〜。なんとかならないの？」と思った人の参考になれば幸いです。
なお、表示を標準に戻す場合は、追記したCSSコードを削除してください。
私はもう少し様子見しながら対応を決めようと思います。*3
