WordPressテーマ「LION MEDIA」のサイドバーのタイトル部分をカスタマイズ

2020年1月26日

メインのブログ「masaの食べ歩き記録」では「LION MEDIA」というテーマを使用させて頂いています。(※現在はルクセリタスを使用させて頂いております)

このLION MEDIAはFITさんが無料で提供されているテーマ。無料ですがデザインも素晴らしく、AMP対応・SEO最適化なども最初から組み込まれているという優れたもの。LION MEDIAはメディアサイト向けに作成されたものですが、他に「LION BLOG」ブログ向けのテーマも無料で提供されています。また、現在は有料のテーマも開発中の様で個人的にはどんなものなのか非常に期待しています。

そんなスゴイテーマですが、自分好みにやはり細かいところはちょっとカスタマイズしたい。ということで今回はサイドバーのタイトル部分ちょっと変更してみようと思いました。

 

今回修正したいのはこの部分

今回修正してみたいのはこの部分。サイドバーのタイトル部分で、元の形もスッキリして良いのですが、もうちょっと目立たせたいと思ったのでカスタマイズしてみます。

 

CSSに追加する

直接スタイルシートに書き込んでも良いかとは思いますが、せっかく「外観」-「カスタマイズ」-「追加CSS」があるのでそちらに下記を記入します。

/*サイドバータイトル装飾*/
.heading.heading-widget {
  color: #ffffff;
  padding: 0.5em;
  display: inline-block;
  line-height: 1.3;
  background: #bdb76b;
  vertical-align: middle;
  border-radius: 5px 5px 5px 5px;
  width: 100%;
  border-bottom: none!important;
}
.heading.heading-widget::before {
  content: ' ';
  color: white;
  margin-right: 8px;
  border-bottom: none!important;
  border-color: transparent;
  position: static;
} 
.heading.heading-widget::after {
  border-bottom: none!important;
  border-color: transparent;
  position: static;
}

 
後は適当に自分の好みに合わせて微調整します。今回はこちらのサイト様を参考にさせて頂きました(というかCSSに関しては、ほぼそのまま使わせて頂いています)。他にもLION MEDIAのカスタマイズも書かれているので参考になります。

 


スポンサーリンク


スポンサーリンク