賢威サイドバーのカスタマイズ方法!見出し・幅・枠・背景色

今回はWordPressテーマ賢威のサイドバーのカスタマイズ方法を紹介します。

内容としては見出し・幅・枠線・背景色などの編集方法になります。

賢威は非常にカスタマイズしやすいテーマですので、色々とカスタマイズしてみましょう。

賢威サイドバーのカスタマイズ方法:見出し

記事内の見出しを変更すると、サイドバーにも背景色など一部反映されてしまいます。

そこでサイドバーの見出しが記事の見出しの影響を受けないよう、サイドバー独自のカスタマイズを行います。

記事内の見出しを変更した影響で、サイドバーの見出しが以下のようになっているとします。
賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色1
 

この緑色になってしまった見出し部分を白色に変更するカスタマイズ方法を紹介します。

ダッシュボードの「外観」→「テーマエディター」→「design.css」をクリック。
WordPressの外観のテーマエディター 賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色 外観 テーマエディター design.css
 

まず、「design.css」内の以下の部分を探してください。

ここに以下のよう「background-color: #fff;」を追記します。

編集が完了したら、【ファイルを更新】をクリックします。
賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色 外観 テーマエディター ファイルを更新
 

以上で編集は完了です。

以下のように、サイドバーの見出しの背景色が白色に変更されます。
賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色2
 

賢威サイドバーのカスタマイズ方法:幅

次にサイドバーの幅を変更するカスタマイズ方法を紹介します。

ダッシュボードの「外観」→「テーマエディター」→「layout.css」をクリック。
賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色 外観 テーマの編集 賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色 layout.css
 
「layout.css」内では以下のように1~3カラムの場合のレイアウトが指定されています。

今回は「2カラムレイアウト」を編集しますが、他のカラム数でもやり方は同じです。

「layout.css」内の以下の部分でサイドバーの幅(2行目)とメインコンテンツの幅(5行目)を指定しています。

例えば、以下のように編集してみます。

以下が変更前と変更後の幅の違いです。サイドバーの幅が変更されているのが確認できます。

↓変更前
賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色 幅変更前

↓変更後
賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色 幅変更後

賢威サイドバーのカスタマイズ方法:枠

次にサイドバーの枠を変更するカスタマイズ方法を紹介します。

ダッシュボードの「外観」→「テーマエディター」→「design.css」をクリック。
賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色 外観 テーマエディター 賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色 外観 テーマエディター design.css
 
「design.css」内にどこでも良いので以下を追加します。

すると、以下のようにサイドバーに枠をつけることができます。

↓変更前
賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色 枠変更前

↓変更後
賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色 枠変更後

賢威サイドバーのカスタマイズ方法:背景色

次にサイドバーの背景色を変更するカスタマイズ方法を紹介します。

ダッシュボードの「外観」→「テーマエディター」→「design.css」をクリック。
賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色 外観 テーマエディター 賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色 外観 テーマエディター design.css
 
「design.css」内の以下の部分を探します。

ここに背景色を指定するコード「background-color:#FFEFD5;」を追記します。

編集が完了したら、【ファイルを更新】をクリックします。
賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色 外観 テーマエディター ファイルを更新
 

すると以下のようにサイドバーの背景色が変更されます。

↓変更後
賢威 サイドバー カスタマイズ方法 見出し 幅 枠 背景色 背景色変更後
 
 
以上、今回は賢威のサイドバー「見出し・幅・枠・背景色」のカスタマイズ方法を紹介しました。

記事を参考に編集してみてください。

見出しのデザイン変更に関しては以下の記事をご参考に
見出しデザインフリー素材集(サンプル)CSS・HTMLタグも!

 

また、賢威のデフォルト設定では、スマホ表示にした時にサイドバーが折りたたまれた状態になっています。

ユーザーにサイドバーの内容も見てもらうために、スマホ表示の折りたたみを解除する方法をこちらの記事で紹介していますのでご参考に。
賢威サイドバーのスマホ折りたたみ表示カスタマイズ方法!

 

最後まで読んで頂いてありがとうございました。

記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!

↓↓↓メルマガ登録は下のフォームから↓↓

無料メールマガジン登録フォーム

メルマガ登録フォーム

苗字 (漢字で)
メールアドレス

※私からお送りする全てのメールに解除リンクを付けていますので、いつでもメルマガ解除をすることが可能です。




コメントを残す



コメントはサイト管理者が確認するまで表示されません。
他の読者さんにも有益だと判断した場合のみコメント対応を致します。

個別の問い合わせは【こちら】からお願いします。

CAPTCHA