Xeoryカスタマイズ!サイドバーのタイトルに背景色を入れる編

毎週末は家族サービスデイなので、ブログの更新はできませんでしたが
またXeoryのカスタマイズをしていきましょうね。

と言っても、さっきまで寝てたので、style.cssの変更だけでササっとできるやつをw

サイドバーのウィジェットのタイトルに背景色を付ける

サイドバーのタイトル文字の背景に、色をつけてみました。
それに伴い、文字の色も白に変更。

もともとこんなんで、なんかメリハリないですよね。
sidebar

で、こんな感じになりました。
sidebar1

/* —————————————-
* 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;
}

この記述のところに

.side-widget .side-title {
margin: 0 0 32px;
font-size: 15px;
color: #ffffff;/*変更部分:文字色のカラーコード*/
background-color: #2897cf;/*変更部分:メニューの背景カラーコード*/
border-radius: 3px;
padding: 2px 10px;
margin: 0
}

このコードを加えます

スポンサーリンク

 

border-radius っていうのは、角の丸いところです。
数字が大きければ大きいほど、角が丸くなってきます。
これはお好みで。

 

文字を太くしたければ
font-weight: bold;
っていうのを付け加えてください。

文字の色だけ変更したかったら

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

これは削除して、文字色のカラーコードだけ変更してください。

文字の大きさなどもここで変更できます。

間違いようがないところなので、簡単にできますよ!

時間があれば、もっと細かな変更を追記したいと思います。

8 件のコメント

  • はじめまして!
    Xeory baseユーザーの僕にとってはかゆいところに手が届く記事でした(笑)

    胸糞の記事もすごいお気持ち分かります。
    僕も消えろって連中はいくらでも後を絶たないですw

    これからもちょこちょこ参りますね!

    • とーるさん、コメントありがとうございます!
      嬉しいです(*´◡‘*)

      最近記事更新が滞ってますが、また役に立つ記事を書いていこうって思いましたw

      胸糞悪いやつらは多いけど、無視して自分の道を行きましょうね!!

      今後ともよろしくお願いします^^

  • こんにちは。
    記事、参考にさせていただいております。

    コードをそのままコピペして使わせていただいております!

    最初はワードプレスの部分だけを読んでいたのですが、ほかの記事も、「確かに…」と思うことがたくさんあり、興味深く拝見しております。

    ブログの先輩として、これからも参考にさせてくださいね♪

    • こんにちは!

      コメントいただきありがとうございます^^
      すごく励みになります。

      しばらくブログをお休みしてカスタマイズの仕事に明け暮れてたので
      仕事で得たカスタマイズをまた公開していきたいと思います!

      これからもよろしくお願いします!

  • こんにちは
    Xeoryのカスタマイズの投稿、大変助かっています。
    ありがとうございます。
    どんどん追加期待しています。

    ところで、以下のように挿入しても変化がありません。
    何かまちがってるのでしょうか?

    .side-widget .side-title {
    margin: 0 0 32px;
    font-size: 15px;
    color: #ffffff;/*変更部分:文字色のカラーコード*/
    background-color: #1e90ff;/*変更部分:メニューの背景カラーコード*/
    border-radius: 3px;
    padding: 2px 10px;
    margin: 0
    }

    • こんにちは!
      解決されたということで、よかったです。

      スマホ対応のカスタマイズなど、載せていきたいと思ってるので
      今後ともよろしくお願いします!

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    ABOUTこの記事をかいた人

    りりちこです。福岡在住2児の母です♪ web制作をしてます。またwebデザインで仕事をしたい方のサポートもしてます。 目まぐるしく変化していくWebの世界で生き残っていくために、日々インプットアウトプットを繰り返しています。