ワードプレスの人気テーマ「Stinger8」。
でも、なぜかサイドバーの人気記事とか新着表示、カテゴリーなどの見出しというか、タイトルが表示されないんですね。
こんな時はテーマを直接編集する、というのもありますが、ここではCSSを使って、サイドバーの見出しを簡単に表示させてみます。ついでにデザインも少しカスタマイズしてしっかり見えるようにしておきましょう。
実際のCSS
サイドバーのタイトル、というか見出しが表示されないので、なぜだろうとグーグルクロームの開発者ツールでCSSを見てみると、以下のようになっています。
「display: none;」となってますね。（「表示しない」という設定がされてます）
Stinger8のバージョンによって違うのか、何か意図があってこうなっているのか分かりませんが（いやー、意図があるとは思えませんが．．．）、サイドバーにタイトルが出ないと、さすがにメリハリがつかない、というか、何が表示されているのか良く分かりません。
タイトルが表示されるようにCSSを追加する
ということで、CSSに以下を追加すれば、サイドバーの各見出しが表示されます。
|
1 2 3 |
#side .ad p { display: block!important; } |
これを設定すると．．．
まずはサイドバーの各項目のタイトルが表示されました。
CSSの追加の仕方は以下の記事を見てみてください。
tabibitojin.com - JINのブログデザインカスタマイズしてみる
サイドバーの見出しが表示されたのは良いですが、単にテキストだけが表示されて、これはこれでしょぼいです。ということから、簡単にデザインしておきましょう。
上で設定したものを以下のCSSに差し替えてみてください。
|
1 2 3 4 5 6 7 8 9 |
#side .ad p { display: block!important; /* タイトルを強制的に表示 */ margin-top: 2em; /* タイトル上は2文字分の余白 */ margin-bottom: 1em; /* タイトル下は1文字分の余白 */ border: 1px solid gray; /* 枠を一応設定 */ padding: .5em 1em; /* 内側余白を設定 */ background: gray; /* 背景色を gray に */ color: white; /* 文字色を white に */ } |
これをCSSに反映すると、以下のようになります。
まぁ、大体良い感じかな、というところになりました。後は好みの背景色や文字色に変えていきましょう。
今回のまとめ
Stinger8のサイドバーのタイトルが表示されない場合は、CSSを設定することで対応できます。テーマを直接編集する、というのもあるかと思いますが、CSSでできるなら、その方が安全な感じですね。
こういったところは、軽くサラサラっと行きたいところです。
ブログなどネットで収益を上げるぞ！という場合には、以下のメルマガに登録してみてください。
