WordPress / サイドメニューのプロフィール欄を塗りつぶす

WordPress
2021.12.01

当サイトはWordPress+cocoonを使用しており、
サイドメニューに色々なヴィジットを表示させることができます。
最新記事だったり、検索窓だったりするのですが、
作成者のプロフィール欄も表示できます。

本サイトでもプロフィール欄を使ってみようと、
色々操作してみる中で、
プロフィール欄を塗り潰そうとした時、
その設定がありませんでした。

ソースを見て、プロフィール欄が記述されている場所を探して、
塗り潰しをしてみましたので、その方法をご紹介します。

プロフィール欄の記述箇所

最初に、プロフィール欄がどこに記述されているか調べるため、
トップページを表示し、右クリックのメニューから
「ページのソース表示」でソースを確認しました。

本サイトのトップページだと大体493行目から542行目の辺り。
<aside>～</aside>で囲まれた部分がプロフィール欄のようです。
以下はそのソースコード部分ですが、
見易くするため、一部改行、スペース追加削除、
アドレスの省略など行っています。

<aside id="author_box-3" class="widget widget-sidebar widget-sidebar-standard widget_author_box">
  <div class="author-box border-element no-icon cf">

    <figure class="author-thumb">
       <img alt='tobiinu.work' src='https://tobiinu.com/....png' class='avatar avatar-200 photo' 
        height='200' width='200' />
    </figure>

    <div class="author-content">

        <div class="author-name">
           <a rel="author" href="https://tob...work/" title="△">tobiinu.work</a>
        </div>
        <div class="author-description">
           <p>主にパソコン関連の...ばかり。</p>
        </div>
        <div class="author-follows">

              <!-- SNSページ -->
              <div class="sns-follow bc-brand-color fbc-hide sf-profile">
                 <div class="sns-follow-buttons sns-buttons">
                    <a href="◆" class="●" target="◇" title="著者サイト" rel="○">
                            <span class="●"></span>
                    </a>
                    <a href="◆" class="●" target="◇" title="feedlyで更新情報を購読" rel="○">
                            <span class="●"></span>
                            <span class="●"></span>
                    </a>
                    <a href="◆" class="●" target="◇" title="RSSで更新情報をフォロー" rel="○">
                            <span class="●"></span>
                    </a>
                 </div><!-- /.sns-follow-buttons -->
              </div><!-- /.sns-follow -->
         </div>
    
    </div>

  </div>
</aside>

プロフィール欄はこんなタグでできている

<aside>～</aside>は余談、補足要素に対して使用するタグです。
本文の流れに直接的に関係がない部分に使用されます。
ここはプロフィール欄ですよって明示するためのようです。

最初に登場する<div>～</div>は、
<aside>～</aside>の中身を全て括っています。

<figure>～</figre>は、
プロフィール画像を表示しています。
タイトルに従い犬のシルエットの画像です。

次に登場する<div>～</div>内では、
プロフィールの内容が記載されています。
テキストやSNSボタンです。

これらのタグの中で、
最初に登場する<div>～</div>タグの
“class”に設定されている”.author-box“が
cocoon親テーマのスタイルシート内に
以下のように記述されています。

.author-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  line-height: 1.4;
  position: relative;
  padding: 1.6% 2.2% 2%;
}

子テーマCSSに背景色の指定を追記

そこで「外観」⇒「テーマエディター」を使い、
子テーマのCSSを選択し、以下の内容を追記します。

背景色を”#e8ecef”に、枠線の太さを”0″にします。
これにより、プロフィール欄を塗りつぶし、
ついでに枠線を消してみました。

.author-box {
 background: #e8ecef;
 border:0;
}

まとめ

WordPress+cocoonの環境で、
サイドメニューのプロフィール欄の色を変更しました。

設定で色を選んで変更できる部分ではないようだったので、
ソースコードから、どの部分でプロフィール欄のスタイルが
記述されているかを調べ、子テーマのCSSに追記するという
方法を取っています。

HTMLやCSSのソースコードを調べて
追記や修正することで、ウェブページの構造が把握でき、
スキルが身に付いていけばいいなと思います。

コメント