【STINGER改造】SNSボックス（twitterボタン）を横から縦に設置する方法

2013/11/08 2014/07/30

wordpress

最強の純国産無料WordPressテーマ【STINGER】の『SNSボックス』（以下『twitterボタン』）を修正する方法を書き残します。
photo via:WordPress Logo / oakleyfamily

今回言っている『twitterボタン』とは、

「Twitter-twitterボタン」
「facebook-いいねボタン」
「google-+1ボタン」
「はてなブックマーク-ブックマークボタン」

が入っているこれです。

初期だと左下にヨコ型で表示されていいるはずです。

今回修正するのは

たて型ボックスに変更
たて型ボックスで上下の位置を修正
『twitterボタン』にタイトルを入れる
記事下用『twitterボタン』のCSSを追加する

の４点を行います。
応用が出来るように出来るだけ分かりやすく説明していきます。

ちなみに僕が使っているのは【stinger3ver20131016】です。
他のバージョンでも応用が可能だと思いますが、修正等は必ずバックアップをとってから修正してください。

2014/5/5追記
CSSを変更してもキャッシュの関係で表示がスグに変更されない事があります。その場合はブラウザのスーパーリロードを実施してみてください。
通常は【CTRL＋F５】もしくは【SHIFT＋F５】を押すと全てのデータをサーバーからダウンロードしてくれます。
もしくはCSSを変更しても表示が変わらない。自動的にスグ表示を変更させる設定方法。【STINGER改造】を参考にしてください。

2014/7/30追記
縦型にしたSNSボックス内の各ボタンをさらに中央配置させる方法をエントリーの一番下に追記しました。
松崎様ご質問ありがとうございました。

なぜ『twitterボタン』を縦型にするのか？

『twitterボタン』がヨコ型になっていると

邪魔だからです。

ENJILOGさん、ごめんなさい（汗）
正確に言うと、訪問いただいているユーザーさんにとって邪魔ではないかな？
と思うわけです。

初期の『twitterボタン』はサイトを下にスクロールすると一緒についてきてくれるので、見る人にとっては邪魔には感じないかもしれないですけど…。
少なくとも僕は少し「邪魔かな」と感じました。
通常の記事の上に重なっている状態が、何というか「そこ見たいのに」って思うわけです。
…スクロールすれば見れますけどね（汗）

何となく僕がそう思うので、他には何人かは思われているのでは？
と感じたので、今回修正の方法をシェアしたいと思います。

コードを修正する場所はどこか？

《WordPress管理画面》⇒《外観》⇒《テーマ編集》をクリックします。
まず修正するコードは［スタイルシート（style.css）］にあります。

.sns {
     padding: 5px 5px 5px 5px;
     margin-left: -1px;
     bottom: 10px;
     position: fixed;
     border-radius: 0px 4px 4px 0px;         /* CSS3 */
     -moz-border-radius: 7px;    /* Firefox */
     -webkit-border-radius: 7px;
     border-top-width: 1px;
     border-left-width: 1px;
     border-bottom-width: 1px;
     border-right-width: 1px;
     border-top-style: solid;
     border-left-style: solid;
     border-bottom-style: solid;
     border-right-style: solid;

     border-top-color: #ccc;
     border-bottom-color: #ccc;
     border-left-color: #ccc;
     border-right-color: #ccc;
     background-image: url(images/a30.png);
     background-repeat: repeat;
}

.sns {

padding: 5px 5px 5px 5px;

margin-left: -1px;

bottom: 10px;

position: fixed;

border-radius: 0px 4px 4px 0px; /* CSS3 */

-moz-border-radius: 7px; /* Firefox */

-webkit-border-radius: 7px;

border-top-width: 1px;

border-left-width: 1px;

border-bottom-width: 1px;

border-right-width: 1px;

border-top-style: solid;

border-left-style: solid;

border-bottom-style: solid;

border-right-style: solid;

border-top-color: #ccc;

border-bottom-color: #ccc;

border-left-color: #ccc;

border-right-color: #ccc;

background-repeat: repeat;

}

コードを簡単に探すには検索が手っ取り早いです。
方法は、修正したいファイルを開いた状態で［Ctrl］＋［Ｆ］を押して表示されたボックスに検索したいコードを入力してください。

今回の場合は

.sns {

.sns {

を検索すると

と表示される箇所を確認してください。

【STINGER】の『twitterボタン』の修正方法

たて型ボックスに変更する方法

手順は下記です。

『twitterボタン』が入っているボックスの幅を固定する
ボックスの位置を少し右に移動する

コードは下記となります。
追加しているコードを黄色でマークされている箇所です。

.sns {
     width:75px;
     padding: 5px 5px 5px 5px;
     margin-left: 30px;
     bottom: 10px;
     position: fixed;
     border-radius: 0px 4px 4px 0px;         /* CSS3 */
     -moz-border-radius: 7px;    /* Firefox */
     -webkit-border-radius: 7px;
     border-top-width: 1px;
     border-left-width: 1px;
     border-bottom-width: 1px;
     border-right-width: 1px;
     border-top-style: solid;
     border-left-style: solid;
     border-bottom-style: solid;
     border-right-style: solid;

     border-top-color: #ccc;
     border-bottom-color: #ccc;
     border-left-color: #ccc;
     border-right-color: #ccc;
     background-image: url(images/a30.png);
     background-repeat: repeat;
}

.sns {

width:75px;

padding: 5px 5px 5px 5px;

margin-left: 30px;

bottom: 10px;

position: fixed;

border-radius: 0px 4px 4px 0px; /* CSS3 */

-moz-border-radius: 7px; /* Firefox */

-webkit-border-radius: 7px;

border-top-width: 1px;

border-left-width: 1px;

border-bottom-width: 1px;

border-right-width: 1px;

border-top-style: solid;

border-left-style: solid;

border-bottom-style: solid;

border-right-style: solid;

border-top-color: #ccc;

border-bottom-color: #ccc;

border-left-color: #ccc;

border-right-color: #ccc;

background-repeat: repeat;

}

こうなります。

たて型ボックスで上下の位置を変更する方法

手順は下記となります。

『twitterボタン』が入っているボックスの幅を固定する
ボックスの位置を少し右に移動する
ボックスをブラウザの上に移動する

【たて型ボックスに変更する方法】プラス手順３となります。
コードは下記となります。
修正コードは黄色でマークしています。

.sns {
     width:75px;
     padding: 5px 5px 5px 5px;
     margin-left: 30px;
     top: 200px;
     position: fixed;
     border-radius: 0px 4px 4px 0px;         /* CSS3 */
     -moz-border-radius: 7px;    /* Firefox */
     -webkit-border-radius: 7px;
     border-top-width: 1px;
     border-left-width: 1px;
     border-bottom-width: 1px;
     border-right-width: 1px;
     border-top-style: solid;
     border-left-style: solid;
     border-bottom-style: solid;
     border-right-style: solid;

     border-top-color: #ccc;
     border-bottom-color: #ccc;
     border-left-color: #ccc;
     border-right-color: #ccc;
     background-image: url(images/a30.png);
     background-repeat: repeat;
}

.sns {

width:75px;

padding: 5px 5px 5px 5px;

margin-left: 30px;

top: 200px;

position: fixed;

border-radius: 0px 4px 4px 0px; /* CSS3 */

-moz-border-radius: 7px; /* Firefox */

-webkit-border-radius: 7px;

border-top-width: 1px;

border-left-width: 1px;

border-bottom-width: 1px;

border-right-width: 1px;

border-top-style: solid;

border-left-style: solid;

border-bottom-style: solid;

border-right-style: solid;

border-top-color: #ccc;

border-bottom-color: #ccc;

border-left-color: #ccc;

border-right-color: #ccc;

background-repeat: repeat;

}

ちなみに【200px】の数値を変更する事により上下の位置を変更可能です。
お好みで変更してください。

上記のコードですと

【100px】にすると

こうなります。

『twitterボタン』にタイトルを入れる

少し手順が増えますが、下記となります。

cssコードを２箇所消す
タイトル用のcssコードを追加
タイトルを追加する

今回はコードを消す箇所をマークしています。

cssコードを消す１箇所目

.sns .snsb li {
     float: left;
     margin-right: 10px;
     list-style-type: none;
}

.sns .snsb li {

float: left;

margin-right: 10px;

list-style-type: none;

}

こうなります。

.sns .snsb li {
     float: left;
     list-style-type: none;
}

.sns .snsb li {

float: left;

list-style-type: none;

}

cssコードを消す２箇所目

.snsb li {
     float: left;
     margin-right: 10px;
     list-style-type: none;
}

.snsb li {

float: left;

margin-right: 10px;

list-style-type: none;

}

こうなります。

.snsb li {
     float: left;
     list-style-type: none;
}

.snsb li {

float: left;

list-style-type: none;

}

タイトル用のcssコードを追加

さきほどコードを消した少し下にcssコードを追加します。

.sns .snsb li {
	float: left;
	list-style-type: none;
}
.snsb li {
	float: left;
	list-style-type: none;
}
.post #snsbox03 .sns03 .snsb.clearfix {
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}

.sns-title {
	border-bottom: 1px solid #333;
	color: #333;
	font-weight: bold;
}

.sns .snsb li {

float: left;

list-style-type: none;

}

.snsb li {

float: left;

list-style-type: none;

}

.post #snsbox03 .sns03 .snsb.clearfix {

padding-top: 20px;

padding-right: 0px;

padding-bottom: 20px;

padding-left: 0px;

}

.sns-title {

border-bottom: 1px solid #333;

color: #333;

font-weight: bold;

}

ちなみに【border-bottom: 1px solid #333;】の箇所を少し修正すると見た目を変更できます。
お好みで修正してください。
上記のコードですと

	border-bottom: 3px solid #333;

1	border-bottom: 3px solid #333;

だと

	border-bottom: 1px dotted #333;

1	border-bottom: 1px dotted #333;

だと

となります。

最後にタイトルを追加します

追加する所は《WordPress管理画面》⇒《外観》⇒《テーマ編集》の［フッター（footer.php）］にあります。
追加する所が、２箇所あるので注意してください。

<?php if (is_home()) { ?>
<div id="snsbox">
  <div class="sns">
    <ul class="snsb clearfix">
      <li class="sns-title">シェアする</li>
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="livett_1">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

      </li>
      <li>
        <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo home_url(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
      </li>
      <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php echo home_url(); ?>"></g:plusone>
      </li>
      <li> <a href="http://b.hatena.ne.jp/entry/<?php echo home_url(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      </li>
    </ul>
  </div>
</div>
<?php } else if (is_page()) { ?>
<?php } else { ?>
<div id="snsbox">
  <div class="sns">
    <ul class="snsb clearfix">
      <li class="sns-title">シェアする</li>
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="livett_1">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

<?php if (is_home()) { ?>

<li class="sns-title">シェアする</li>

<li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="livett_1">Tweet</a>

</li>

<li>

</li>

<g:plusone size="tall" href="<?php echo home_url(); ?>"></g:plusone>

</li>

<li> <a href="http://b.hatena.ne.jp/entry/<?php echo home_url(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

</li>

</ul>

</div>

<?php } else if (is_page()) { ?>

<?php } else { ?>

<li class="sns-title">シェアする</li>

<li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="livett_1">Tweet</a>

なぜ２箇所あるかというと、１つ目の黄色マークはトップページ用の『twitterボタン』で２つ目はその他のページ用です。
【シェアする】の文字を変更すれば任意の文字へも変更できます。
ただ５文字を超えると２行になってしますので、注意してください。

記事下用『Twitterボタン』のCSSを追加する

上記の編集を実施した場合は、必ず下記のコードを［スタイルシート（style.css）］に追加してください。
今回は分かりやすく先ほど追加したタイトル用CSSの下に追加しています。
黄色のマーカ部分を追加してください。

そうしないと記事下にある『Twitterボタン』まで縦型になってしまって、見た目がかなり悪くなります。

.sns-title {
	border-bottom: 1px dotted #333;
	color: #333;
	font-weight: bold;
	font-family: arial, helvetica, osaka, "MS PGothic", sans-serif;
}

#snsbox03 .sns03 li {
	float: left;
	margin-right: 10px;
}

.sns-title {

border-bottom: 1px dotted #333;

color: #333;

font-weight: bold;

font-family: arial, helvetica, osaka, "MS PGothic", sans-serif;

}

#snsbox03 .sns03 li {

float: left;

margin-right: 10px;

}

SNSボタンを中央寄せする

SNSボックスを縦型にすると気になるのが各ボタンの位置。って、そこまで掲載していませんでした（汗）自分だけ修正してすっかり忘れていました。問い合わせをいただいたので追記します。

cssコードを２箇所消す
cssコードを１箇所追記

今回はコードを消す箇所をマークしています。

cssコードを消す１箇所目

.sns .snsb li {
     float: left;
     list-style-type: none;
}

.sns .snsb li {

float: left;

list-style-type: none;

}

こうなります。

.sns .snsb li {
     list-style-type: none;
}

.sns .snsb li {

list-style-type: none;

}

cssコードを消す２箇所目

.snsb li {
     float: left;
     list-style-type: none;
}

.snsb li {

float: left;

list-style-type: none;

}

こうなります。

.snsb li {
     list-style-type: none;
}

.snsb li {

list-style-type: none;

}

そして先ほどコードを消した箇所に追記します。

.sns .snsb li {
     text-align: center;
     list-style-type: none;
}

.sns .snsb li {

text-align: center;

list-style-type: none;

}

まとめ

今回は、サイトには欠かせない『twitterボタン』の修正を行いました。
出来るだけ応用が効くようにシェアしたつもりです。
ぜひ、ご自分にあったカスタマイズを行ってみてください。

WordPressを運用・カスタマイズするなら持っておきたい１冊

基礎からのWordPress (BASIC LESSON For Web Engineers)

- STINGER

amazonで４つ星以上のWordPress本

: 『基礎からのWordPress (BASIC LESSON For Web Engineers)』

きめ細かい配慮がちりばめられたテーマ制作に最も優れた入門書 テーマ制作で購入した本は、今まで4冊ほどあるが、400ページ近いボリュームがあるにもかかわらず、文章は平易であり、表現もWordPressが初めてのユーザーにとってわかりやすく、きめ細かい配慮がなされている。（続く：※引用）

: 『本格ビジネスサイトを作りながら学ぶ WordPressの教科書』

対象に当てはまるなら買うべし 本をめくると、主な対象者が書いてあります。 XHTML/CSSの経験がある方(ただしPHPは初心者) 「ビジネスレベルのWebサイトをWordPressで構築したい」「汎用的なCMSサイトをWordPressで構築したい」「WordPressでブログは作れるが、Webサイトの作り方はよくわからない」「XHTML/CSSでのサイト制作はできるが、WordPress化は初めて」（続く：※引用）

: 『ガンガン集客したい人のかんたんWordPress入門』

こういう入門編を待っていました。 WordPressに関しては、２年ほど前から勉強してきましたが、全体像というか肝の部分の理解がなかなか出来ていない感がありました。多くの解説本は、分厚いリファレンス・マニュアル形式が多く、中級者であれば調度良いのでしょうが、初心者であれば、よほど強い決意なくしては、途中で挫折しそうになるものが多かったです。今回の書籍は、そうした超初心者であっても、志さえあれば基本的な理解が出来るよう、解りやすい言葉と図解でハードルを下げてくれています。（続く：※引用）

Comment

木元将貴より:

2014年4月19日 7:49 PM

大変参考になりました。
ありがとうございます。

ただ、最初の横から縦にするところでいきなり躓いています。
コードを
width:75px;
padding: 5px 5px 5px 5px;
margin-left: 30px;

のように変えたのですが、、、、

stingerのバージョンは20140327ですがそこは関係ないでしょうし、、、
思い当たることはありますか？

返信
- livett1 より:
  
  2014年4月20日 11:57 AM
  
  木本様コメントありがとうございます。
  
  ~~Stinger20140327の中身を確認していませんが~~、木本様のサイトを確認してみた所『width:75px;』が適用されれば縦になりそうです。
  CSSを更新しても見た目が変わらないのは、パソコン本体に以前のCSSの情報がキャッシュとして残っているのが原因かと思います。
  キャッシュを削除してからサイトを確認してみてください。
  
  もしくは全てのデータをサーバーからダウンロードさせる《スーパーリロード》を実施してみてください。
  IE、Firefoxのブラウザを使用されている場合は【CTRL】＋【F5】
  Choromeなら【CTRL】＋【F5】もしくは【SHIFT】＋【F5】
  
  上記でいかがでしょうか？
  
  Stinger20140327の中身を確認してみた所、『SNSボックス』が別ファイル（sns02.php）になっていましたが、その他で変わった事はありませんでした。
  上記作業を実施して確認してみてください。
  
  返信
松崎より:

2014年7月28日 11:27 PM

縦にする方法参考にさせて頂いています。記事ありがとうございます。質問があります。現在おかげさまでSNSを縦にすることはできたのですが、このサイトのようにはてぶとGoogleプラスの位置を中央にする方法がわかりません。cssをいろいろいじってみたのですが、どうしてもわからず、、よければ教えて頂けませんでしょうか？よろしくお願いします。

返信
- livett1 より:
  
  2014年7月30日 1:40 PM
  
  サイト訪問とコメントありがとうございます。
  
  松崎様のサイトのCSSが分からないので確実ではないですが、スタイルシートで以下２点を修正してみてください。
  １，【.snsb li】と【.sns .snsb li】の項目にある《float: left;》を削除
  ２，【.snsb li】の項目に《text-align: center;》を追加
  
  以上です。
  ~~後日このエントリーにも修正版を掲載するようにしますが、取り急ぎご確認ください。~~
  2014/7/30にエントリーに追記しました。
  
  返信
  - 松崎より:
    
    2014年8月1日 8:43 AM
    
    さっそくのお返事ありがとうございました！無事中央にすることができました！役に立つ記事をありがとうございます！
    
    返信