バズ部のXeoryの記事が着々と増えてきましたね！STINGERに関するカスタマイズの記事はかなり多いのですが、バズ部のXeoryBaseは意外とカスタマイズの記事がそんなに多くないですね。

ちょっとでもXeoryの認知度が上がってくれると嬉しいですね。

そんな中で今回カスタマイズするのはXeorynoおしゃれ過ぎるサイドバーを見やすくします。

サイドバーがおしゃれ過ぎる

よくも悪くもXeorybaseのデフォルトのサイドバーはおしゃれ過ぎるんですよね。

デフォルトのフォントカラーも完全なブラックでは無く、ちょっとグレーになってます。サイドバーもちょいグレー掛かった色でしかも背景色もちょいグレーなので区切り位置が少々見づらいです。

よくあるアフィリエイトサイトのようにはしたくはありませんが、サイトの回遊率を高めたいのでサイドバーのデザインのカスタマイズをおこないました。

また、安心してください。今回もコピペでOKです！

今回のカスタマイズはコレ！

この黒い部分をもうちょっと区切りが分かりやすいようにカスタマイズします。

早速やってみる

まず外観 > テーマ編集 >スタイルシート (style.css)に移動してください。

Control+Fで「side」などを検索してみて下記のような箇所に行きましょう

/* —————————————-
* side
—————————————- */

/* —————————————-
* side
—————————————- */
.side-widget-area {
padding: 0;
}

.side-widget {
margin-bottom: 40px;
padding-bottom: 40px;
line-height: 1.6;
font-size: 14px;
}
.side-widget .side-title {
margin: 0 0 32px;
font-size: 15px;
}

この記載があるはずです。ここのfont-size: 15pxの直下に下記のコードを追加します。

color: #ffffff;/*変更部分：文字色のカラーコード*/
background-color: #2897cf;/*変更部分：メニューの背景カラーコード*/
border-radius: 3px;
padding: 2px 10px;
margin: 0

これを入れてあげるとこんな感じになります。

こちらも折角だから追記した用語を覚えちゃうと今後楽になります。

.side-widget .side-title {　というところでサイドバーのタイトル部分にだけ反映されるようになってます。
自信ニキで言えば【検索はこちら】や【自信ニキ プロフィール】というサイドバーのタイトル部の内容だけ変わるよ！ということです。

用語の解説はこちら↓

color: #ffffff;　←文字の色ですね！一応書いてます。＃〇〇〇〇〇〇というのが色です。http://www.colordic.org/
background-color: #2897cf;　←背景の色ですね！一応書いてます。＃〇〇〇〇〇〇というのが色です。http://www.colordic.org/
border-radius: 3px;　←百聞は一見に如かず！下の図のとおりです。3pxなのでちょびっとだけ丸みを付けてます。

padding: 2px 10px;　←文字の上下のスペースをどれくらい設定するかです。
margin: 0　←文字の余白スペースをどれくらい設定するかです。

こんな感じでじわじわ覚えていけばきっとわいもちょっとは知識が付きそうですね！

ほな・・・また！