毎週末は家族サービスデイなので、ブログの更新はできませんでしたが
またXeoryのカスタマイズをしていきましょうね。
と言っても、さっきまで寝てたので、style.cssの変更だけでササっとできるやつをｗ
サイドバーのウィジェットのタイトルに背景色を付ける
サイドバーのタイトル文字の背景に、色をつけてみました。
それに伴い、文字の色も白に変更。
もともとこんなんで、なんかメリハリないですよね。
で、こんな感じになりました。
/* —————————————-
* 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
これは削除して、文字色のカラーコードだけ変更してください。
文字の大きさなどもここで変更できます。
間違いようがないところなので、簡単にできますよ！
時間があれば、もっと細かな変更を追記したいと思います。
ブログ著者原美穂（りりちこ）のプロフィール
いろんな事情から外で働くのが困難な主婦は多いです。
はじめまして！
Xeory baseユーザーの僕にとってはかゆいところに手が届く記事でした（笑）
胸糞の記事もすごいお気持ち分かります。
僕も消えろって連中はいくらでも後を絶たないですw
これからもちょこちょこ参りますね！
とーるさん、コメントありがとうございます！
嬉しいです(＊´◡‘＊)
最近記事更新が滞ってますが、また役に立つ記事を書いていこうって思いましたｗ
胸糞悪いやつらは多いけど、無視して自分の道を行きましょうね！！
今後ともよろしくお願いします＾＾
[…] Xeoryカスタマイズ！サイドバーのタイトルに背景色を入れる編 […]
こんにちは。
記事、参考にさせていただいております。
コードをそのままコピペして使わせていただいております！
最初はワードプレスの部分だけを読んでいたのですが、ほかの記事も、「確かに…」と思うことがたくさんあり、興味深く拝見しております。
ブログの先輩として、これからも参考にさせてくださいね♪
こんにちは！
コメントいただきありがとうございます＾＾
すごく励みになります。
しばらくブログをお休みしてカスタマイズの仕事に明け暮れてたので
仕事で得たカスタマイズをまた公開していきたいと思います！
これからもよろしくお願いします！
こんにちは
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
}
いろいろトライしているうちにうまく表示されました。
ありがとうございます。
こんにちは！
解決されたということで、よかったです。
スマホ対応のカスタマイズなど、載せていきたいと思ってるので
今後ともよろしくお願いします！