Ryun's Web Note

おすすめのグッズや役立つ情報をあなたにお届けします。

[R]【Stinger3カスタマイズ】Ryun's Web Noteと同じ様にサイドバーの間を開けたいです!【質問コーナー】

   

Stinger3,サイドバー 記事と記事の間りゅんた(@RyunNote)です(・ω・)ノ

Stinger3についての質問が来ていたのですが、問い合わせが来て早1ヶ月経っていました…。質問者の方すみませんc⌒っ゚Д゚)っ

もう理想通りにできたでしょうか?一応こちらでも今後同じようなことをしたい人のために回答させて頂きます。

 

質問!ウィジェットの間を離して背景を見せるようにしたいです!

はじめまして。

stinger3のカスタマイズで質問があります。

りゅんたさんのブログと同じように右のサイドバーにあるウィジェットとウィジェットの間を離して背景を見せるようにしたいのですが、どのようなやり方があるのでしょうか?

(Bちゃん)

なるほどなるほど。これ僕もやりたくて、大分前に頑張った覚えがありますw

その後、TOTOBLOGを書いているととっちさんにも聞かれた覚えがありますね(・ω・´∩)

結構やりたい方が多いカスタマイズなのでしょうか?

実はこのカスタマイズ、難しいように見える方もいるかもしれませんが、とても簡単です。っがちょっと地道な作業が必要になります…。

頑張って行きましょう!

 

サイドバーのウィジェット間をカスタマイズ(・ω・´∩)

stinger3-side-none

大元のStinger3では、サイドバーの背景は無になっていると思います。これをカスタマイズした方はとりあえずリセットしてください。

リセットが分からない方は、最新版のStinger3を導入して、1からカスタマイズを考えてもいいかもしれません。(◀︎僕も現在全リセットを考え中です。)

さて、背景が全くなくなったところで、サイドバーがどのように構築されているのか見てみましょう。

 

できれば答えを見る前に自分で解決してほしい。

上記の記事が若干関連性のある記事になっていますが、Google Chromeのデベロッパーツールを使用すると、他者のブログでもHTMLやCSSコードが分かり易く見れると思います。

こちらを使用して、まずは自分で見てみるのもありだと思います。

面倒臭い方は読み進めてください。

 

Stinger3のサイドバーの構成

side.phpから一部を除きそのまま引用です。

そして注目したいところが、緑部分になります。個々に説明していきます。

 

sideadはサイドバーのアドセンス

上記コードの一番上の部分”sidead”はサイドバーに表示されるアドセンススペースとなります。

まずこいつに背景白を付けてあげればいいですね。ちなみに僕は、背景白意外にも陰を付けたりしているので、CSSは

このような感じになっています。一応分かり易いようにCSSごとにちょこっと説明文を加えてあります。

ちょっとは感覚が掴めたでしょうか?他の部分も同じように記載していくだけの簡単なお仕事です!

 

textwidgetはりゅんた作成だったかな?

このカスタマイズをしたのが昔すぎて記憶が確かではないのですが、たしかtextwidgetは僕が作ったものだった気がします。もともとウィジェットに貼付けていたコードを直接記載したような…。

そこらへんの記憶が曖昧ですが、sideadとやることは変わりません。

marginやpaddingの数値は変わっていますが、根本的な目的はその部分のみに背景を付けるということです。

 

最後は少し難しい。NEW ENTRYの各記事に背景を付ける

おそらく1人でカスタマイズしていて一番つまずくポイントだと思います。

NEW ENTRYの各記事は先ほどのコードの3つめ<dl>というタグで囲まれている箇所です。

ここも背景を付ける意外は好みにカスタマイズされていいと思います。

この他、プラグインなどで表示されている方は該当箇所をカスタマイズしてください。

 

ウィジェットに色が付いたけど、隙間が開かない人は

希望通り色がついたけど、隙間が開かない方は、marginの指定を見直してみてください。おそらくmargin-topの数値を変更してあげれば隙間が開くと思います。

 

りゅんた的ℜoundUp

ざっくり説明になりましたが、お分かり頂けたでしょうか?

かなりアナログな作業をしているだけなんですよね実はw

次回、リニューアルする際は奇麗にまとめてみたいと思いますが、なんせ仕事が忙しいので、いつになることやら…。

 

なにかカスタマイズや、他のことでも質問やリクエストがあれば問い合わせから送ってください!

返事は気長に待ってくださいww

 

以上、ウィジェット間の隙間の開け方でした!

 - Stinger3カスタマイズ