[Đ] WordPressテーマ「Stinger3」のスクロール追尾型SNSボタンを縦並びにする方法。

公開日: : 最終更新日:2015/02/17 Stinger3, WordPress, ブログカスタマイズ, ブログネタ


スポンサーリンク

サムネ

【2015/2/17追記】
2015年2月17日現在、当サイトのスクロール追尾型SNSボタンは非表示にしてます。ご了承ください。

【2014/3/6追記あり】
ども、もう2~3ヶ月すると3人目の子供が産まれます、まつだい(@matsudai23)です。


スポンサーリンク

WordPressテーマ「Stinger3」とは

このブログ「DIGITABLEBOX」はEnji(@ENJILOG)さんが作られた、 「Stinger3」というWordPressテーマをカスタマイズさせてもらって作ってます。Enjiさん、素晴らしいテーマを使わせてもらってありがとうございます。

このStinger3、凄く素晴らしいテーマでブロガーが「欲しい!」と思う機能なんかがほぼ標準搭載されてるんです。何度も言いますが、凄く素晴らしいテーマなので、WordPressのテーマに迷っている人がいたら是非使ってみてください。

WordPressテーマのSTINGER3公式サイト
http://stinger3.com

今回の問題点

そんな素晴らしいテーマ「Stinger3」なんですが、使い始めた時からオレが、どーーーしても気に入らない(ごめんなさいw)機能が「追尾型SNSボタン」の外観だったんです!w

とりあえずこちらの画像をご覧ください↓

カブっとるがなッ!!!

そうです!記事にボタンがカブっとるがなッ!!!w

このボタン、画面のスクロールに追尾するというウザさもあって、オレと同じようにカブりが我慢できずにこのSNSボタン自体を削除、非表示にしているブロガーさんもいるようで、みんな同じような悩みを抱えてるものだなぁ〜っと思いつつ、解決策を考えてました。

まつだいさんは考えた

オレの場合、SNSボタンを削除、非表示というような暴挙には出たくないけど、どうにかならないかな〜…はい!思いつきました!!

このSNSボタン、横並びだから邪魔くさいんです!
んじゃ縦並びにしようじゃないかッ!!

本題:SNSボタンを縦並びにする方法

やり方は簡単です。Stinger3のStyle.cssを以下のように編集するだけです。
編集箇所も3箇所と少なく、コピペと削除だけですので難しくありません。

※【注意!】テーマをカスタマイズする場合は、できればそのテーマの子テーマを作って、子テーマのStyle.cssを編集する事をオススメします。
もし、どーしても親テーマ本体をイジるという方、「子テーマ?何それ美味しいの?」という方は必ずバックアップ(コピー)をとって、いつでも元に戻せるようにして行なってください。

ステップ1:いらないCSSを削る

まず「style.css」をエディタ等で開き、↓のように.sns {と}で囲まれている部分を探します。
※エディタに検索機能があれば「.sns」を検索すると便利ですよ。

↑の{ }の中から以下の2行を探して削除します。(多分先頭あたりにあると思う)

ステップ2:縦並びにするCSSを追加する

【追加するのは2カ所】
1:さっきと同じ.sns {と}の間に以下の2行をコピペで追記します。

2:次にその少し下に記述されてる.sns .snsb li {と}の間に以下の2行をコピペで追記。
【追記(2014/3/6)】この記述はオレのブログ環境に依存するもので、デフォルトのCSSでは必要無かったです。ごめんなさい…(^_^;)
飛ばして次に進んで下さい。

position:relative;
left:-50%;

2:そして最後にその下あたりに(別にstyle.css内の末尾でも問題は無いです)以下の.snsbox div ul {から}までの5行をコピペで追記してください。

編集したCSSをStinger3に適用する

以上でCSSの編集は終了ですので編集が終わったCSSをStinger3に適用してみてください。
適用したら、自分のサイトを確認してみましょう!

無事にSNSボタンが縦並びになりました

縦に並んだ!!!
どうでしょう?SNSボタンは上手く縦並びになりましたか?
ちなみに「.sns」に追記した

↑の2行は、SNSボタンの幅と余白(上右下左の順)の数値です。数値はオレの好みの幅と余白なので、お好みの数値を設定していただいて構いません。
ただ、あまり幅を広くするとレイアウトが崩れて横並びに戻ってしまいますので、ほどほどにお願いします…(^_^;)

まとめ・感想

以上、説明下手でごめんなさい…(-_-;)

この記事がオレと同じようにStinger3のSNSボタンに悩まされている方の役に立てばいいなぁ~♪っと思ってます!

また、オレもプロじゃないので「この記述こうした方がいいよ」とか「もっと良い方法があるよ」などご意見ありましたらコメントやTwitter、Facebookページも有りますので、優しく教えて貰えればありがたいです♪(個人的にはTwitterが一番連絡取りやすいですw)

では、ここまで読んで頂いてありがとうございました!
また何かカスタマイズした時は記事にしたいと思ってますので今後ともよろしくお願いします!!

まつだい(@matsudai23)でした!


スポンサーリンク

いいね!・フォロー大歓迎!

関連記事

ブログを書くのに使ってるアプリたち

暮らしをおトクにかえていく|ポイントインカム
  • まつだい
    (@matsudai23)

    へっぽこモブロガー

    熊本県在住。1984年(昭和59年)生まれ。
    妻子持ち(男1人、女2人、妻1人)の親バカへっぽこモブロガー。
    Apple、Mac、iPhone厨。
    MacやiPhone、嫁と子供が好きな、嫁バカ&親バカのおっさんが暇な時書いてると思って貰えばだいたい合ってます。
    僕についてもっと詳しく知りたいという方は居ないとは思いますが一応自己紹介ページをご用意してますので御覧ください。