こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。
本日はワードプレスの執筆者情報のアイコンに背景色をつける方法を解説いたします。アイコンを透過PNGファイルで作成した場合はデザインによっては背景が透けて見た目に影響することがあります。
執筆者情報のアイコン（PNGファイル形式）に背景色をつける方法
JPEGなど一般的なファイルと違って「PNG形式のファイル」は背景を透過（透明）させられるのが特徴です。しかし透過ファイルならではの悩みも出てきます。本記事では背景が透明化した場合にデザイン面で調整したいシチュエーションをカンタンにご紹介させていただきます。対策方法はシンプルです。
背景に後ろの線が表示されている例
下記がアイコンイメージ（透過PNGファイル）を当て込んだ状態。プロフィール欄のボックスの線がアイコンの後ろに入っていますね。このままでもあまり気にはなりませんが線を消してみましょう。
背景線を見えなくするCSS
改善方法はアイコンイメージの背景に色を指定する方法です。ワードプレスでは管理画面からCSSを追記できるので「外観 > カスタマイズ > 追記CSS」からCSSを追記していきましょう。
上記では執筆者ボックスのclassを洗い出してピンポイントでアイコンに対して背景色を指定しています。
.post-author .post-author-img img {
background-color:#ffffff;
}classは導入テーマによって違いますので詳しくはテーマをチェックしてください。ちなみにclassを見つける方法は以前に別記事で解説させていただきました。記事は最下部にリンクを貼っておきますね。
上記リンク先の記事ではclassで解説していますが「id」でも指定可能です。導入しているテーマがclassで指定されていない場合もありますのでid指定でもOK。idがsampleならCSSでは#sampleと書きます。
背景色が指定されたアイコンイメージ
以下がアイコンの背景色に白色（#ffffff）を指定した状態です。アイコンイメージの背景色に白色を追加しているので裏側に入っていたグレーの横線が見えなくなっていますね。見た目がスッキリしました。
設定方法は以上です。
まとめ
CSSで透過PNGファイルに微調整を行う方法をご紹介いたしました。イメージにCSSが指定できるとさまざまな見せ方ができます。もし同様の症状で困っていた方はぜひお試しくださいませ。
▼classを見つける方法が書かれた記事はこちら
https://wp-labo.com/keni-themes-site-title-iphone-5-se/
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
