ブログのちから

副業やマネタイズ方法、アクセス解析やSEO、Wordpress、SNSの活用、ビジネス書の書評、育児、ダイエットなどを中心にお届けしてます。

Stinger3カスタマイズ;サイドバーはウィジェット毎に枠線で囲ってみたよ。

      2014/08/12

アイキャッチ

しばらくブログのカスタマイズに勤しんでいますが、

今回は、サイドバーのカスタマイズに挑戦です。

 

Stinger系のブログを見ると、意外とサイドバーに枠線を付けている方は少ないみたいですね。

あと枠線を付けていてもサイドバー全体だったり。

やはりウィジェット毎に枠線って、ベタ過ぎるんでしょうか。。。

 

SPONSERD LINK

サイドバーをウィジェット毎に枠線で囲む

とはいえ、構成のブロックを明示するのは、ブログを閲覧して下さる方にとっては解りやすくなるハズ。

という勝手な思い込みの元、サイドバーをウィジェット毎に枠線で囲ってみる事にしました。w

 

最初の状態はこんな感じ。
サイドバー デフォルト

随分あっさりしていますね。^^

 

まずは、各ウィジェットを枠で囲ってみましょう。
この辺は要素が入り組んでますが、下記のコードを挿入すればOKです。

※サイドバー指定なので、フッターなどには影響しません。

 

結果、こうなりました。

サイドバー 枠のみ

これだけだと、ウィジェットのタイトルが浮いた感じがしますね。。。

 

ウィジェットのタイトル部分の背景を付ける

という訳でタイトル部分を枠線と同じ色で塗ってみましょう。

はい。結果こうなります。
ウィジェット ヘッダ背景に色付け

これでもまだ、マージンがあるので、微妙ですね。w

ウィジェットのタイトルとボディが離れていて、別物みたいに見えてきます。

 

マージンを調整する

という訳で、ウィジェットタイトルのボトム(下)側のマージンを0にして、オフってみましょう。

結果、こうなります。

マージンの調整

おっ!良い感じでくっつきましたね。^^

 

NEW ENTRY部分にも適用する

後は、[ NEW ENTRY ] 部分ですね。
ここはウィジェットでは無く、sidebar.phpに直接埋め込まれていますので、別途、記述してあげる必要があります。

といっても、下記のコードを追加するだけですが。

はい。結果、こうなります。

NEW ENTRYの調整

以上で完成です。

 

少し装飾も付けてみる

が、これだけだと少し寂しいので、もう少し装飾を付けてみました。

ウィジェットのヘッダー部分に下記のコードを埋め込んでみます。

結果、

角丸化

こんな感じでタイトル上部が角丸になったでしょうか?
(環境によっては変わらないかもwww)

 

以上でカスタマイズ完了です。

と、基本はこんな感じなので、適用してみたいという方は、各パーツの色やborder-styleを調整してみて下さい。

 

 

以上、参考になれば幸いです。^^

SPONSERD LINK

 - stinger3 ,

最後までお読み頂きありがとうございます!

よければシェアしてみませんか?
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 470 follow us in feedly
SPONSERD LINK

  関連記事