【Xeory Base カスタマイズ】サイドウィジェットのタイトル装飾

  • このエントリーをはてなブックマークに追加

テーマに対してちょっとしたカスタマイズを加えるだけでガラッと見栄えが変化したりしますよね。
これからXeroy Baseのテーマに対してカスタマイズを少しずつ加えていくことにしましたので、その辺を紹介していければなと思っています。

まず手始めに何をしようかと考えたところ、サイドページ(ウィジェット)があまりにも殺風景だったので、各サイドウィジェットのタイトルに装飾を加えることにしました。
カスタマイズ内容として非常に単純でCSSに以下赤字箇所を追加することで対応が可能です。

カスタマイズ内容

① タイトルバーのバックグラウンドカラーを設定
② タイトルバーに影を設定して立体化
③ タイトルの印字位置を中央揃えに変更
④ 上下にpadding設定

.side-widget .side-title {
margin: 0 0 32px;
font-size: 15px;
text-align:center;
background-color:#4169e1;
color:white;
padding:3px 0 3px 0;
box-shadow:5px 5px rgba(0,0,0,0.4);

}

③のタイトル印字位置の変更ですが、もともと左揃えがデフォルトであり、リストタイトルの左揃えと同化している感じで気持ち悪かったのでウィジェット別の区切りをはっきりさせようかと思いタイトルの印字位置を中央揃えに変更しました。
また、②のShadow設定と合わせて、よりタイトルの強調化をはかっています。

変更前の画像

変更後の画像

 

ちょっとした変更ですが、サイドウィジェットのタイトルをはっきりさせるだけでもサイトの全体像が少し引き締まった感じがでますね。

SNSでもご購読できます。

コメントを残す

*