ワードプレスの人気テーマ「Stinger8」。
でも、なぜかサイドバーの人気記事とか新着表示、カテゴリーなどの見出しというか、タイトルが表示されないんですね。

こんな時はテーマを直接編集する、というのもありますが、ここではCSSを使って、サイドバーの見出しを簡単に表示させてみます。ついでにデザインも少しカスタマイズしてしっかり見えるようにしておきましょう。

実際のCSS

サイドバーのタイトル、というか見出しが表示されないので、なぜだろうとグーグルクロームの開発者ツールでCSSを見てみると、以下のようになっています。

「display: none;」となってますね。(「表示しない」という設定がされてます)

Stinger8のバージョンによって違うのか、何か意図があってこうなっているのか分かりませんが(いやー、意図があるとは思えませんが...)、サイドバーにタイトルが出ないと、さすがにメリハリがつかない、というか、何が表示されているのか良く分かりません。

タイトルが表示されるようにCSSを追加する

ということで、CSSに以下を追加すれば、サイドバーの各見出しが表示されます。

これを設定すると...

まずはサイドバーの各項目のタイトルが表示されました。

CSSの追加の仕方は以下の記事を見てみてください。

関連記事 >
別記事で見たGoogle Chromeとその開発者ツールの威力。それを武器にCSSがカスタマイズできれば、一気にデザインカスタマイズの可能性が広がります。実際に修正したり他から持ってきたCSSをブログに反映するには、1)使用しているテーマのスタイルシートに直に書き込む2)プラグインを利用したスタイルシートに書

デザインカスタマイズしてみる

サイドバーの見出しが表示されたのは良いですが、単にテキストだけが表示されて、これはこれでしょぼいです。ということから、簡単にデザインしておきましょう。

上で設定したものを以下のCSSに差し替えてみてください。

これをCSSに反映すると、以下のようになります。

まぁ、大体良い感じかな、というところになりました。後は好みの背景色や文字色に変えていきましょう。

今回のまとめ

Stinger8のサイドバーのタイトルが表示されない場合は、CSSを設定することで対応できます。テーマを直接編集する、というのもあるかと思いますが、CSSでできるなら、その方が安全な感じですね。

こういったところは、軽くサラサラっと行きたいところです。

ブログなどネットで収益を上げるぞ!という場合には、以下のメルマガに登録してみてください。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね