当ブログはWordPressテーマ「Cocoon」、スキンは「SILK」を使用しています。
新しくブログを立ち上げ、外観などの設定をいじっていたのですが、標準のプロフィールウィジェットをサイドバーに追加したところ、名前の前に@（アットマーク）が強制的に表示されていることに気がつきました。
「プロフィール設定のどこかにアットマークを消す項目があるはず……」と設定画面を探してみたのですが見つからず。最終的に、カスタムCSSにコードを追加する形で無事に解決できましたので、同じ悩みを持つ方に向けて解決策をシェアします。
原因
検証したところ、どうやら私が使用しているスキン「SILK」の仕様により、標準プロフィールウィジェットの名前の前にFont Awesomeのアイコン（@ マーク）がHTML要素として直接出力される仕様になっていたようです。
該当のHTML構造：
<div class="author-name">
<i class="fa fa-at"></i><a target="_blank" href="...">名前</a>
</div>この <i class=”fa fa-at”></i> がアットマークを表示させている正体でした。
対策（テーマファイルをいじらない安全な方法）
テーマのPHPやテンプレートファイルを直接変更するのは怖いので、今回はWordPressの「追加CSS」機能を使って、該当のアイコンだけを非表示にしました。
手順：
WordPress管理画面 ＞ [外観] ＞ [カスタマイズ] ＞ [追加CSS] を開き、以下のコードを貼り付けて公開ボタンを押すだけです。
追加するCSSコード：
.author-name .fa-at {
display: none !important;
}これで無事に＠が消え、目的を達成できました。
影響範囲：
このCSSで非表示になるのは、「プロフィールウィジェット内の名前の横にある＠アイコン」のみです。
記事内の文章や、他の場所にあるアイコン、サイト全体の表示には影響しません。
おわりに
AIに相談しても、最初は「どこかに＠を入力してしまっているのでは？」とか、「空欄が＠に置き換えられる仕様なのでは？」などと言われ、設定項目を探し回りましたが見つかりませんでした。
その後「＠を強制的に表示させなくする追加CSS」とか「今度こそ絶対に＠を消す最強の追加CSS」などを何度も提案されましたが、どれも解決には至らず。
検証ツールで該当部分のHTMLを探してAIに見せたところ、Font Awesomeのコードで表示されていたことがわかり、無事に解決できました。
詳しい方でしたらテーマのPHPやテンプレートファイルを編集して解決するのだと思いますが、CSSにコードを追加する形なら私のような初心者でも手軽にカスタマイズできるのでおすすめです。
同じように悩んでいる方の参考になれば幸いです。
