WordPressやiPadをはじめ、必要な情報を簡潔にまとめたサイト

iPhone6とWordPress情報を中心に、あなたの生活・知識を向上させるサイト

*

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

      2014/07/30

wordpress

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

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

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

が入っているこれです。
twitter-box-11
初期だと左下にヨコ型で表示されていいるはずです。

今回修正するのは

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

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

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

2014/5/5追記
CSSを変更してもキャッシュの関係で表示がスグに変更されない事があります。その場合はブラウザのスーパーリロードを実施してみてください。
通常は【CTRL+F5】もしくは【SHIFT+F5】を押すと全てのデータをサーバーからダウンロードしてくれます。
もしくはCSSを変更しても表示が変わらない。自動的にスグ表示を変更させる設定方法。【STINGER改造】を参考にしてください。
2014/7/30追記
縦型にしたSNSボックス内の各ボタンをさらに中央配置させる方法をエントリーの一番下に追記しました。
松崎様ご質問ありがとうございました。

スポンサーリンク

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

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

邪魔だからです。

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

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

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

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

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

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

twitter-box-5
今回の場合は

を検索すると

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

 

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

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

手順は下記です。

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

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

こうなります。
twitter-box-7

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

手順は下記となります。

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

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

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

上記のコードですと
twitter-box-13

【100px】にすると
twitter-box-12
こうなります。

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

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

  1. cssコードを2箇所消す
  2. タイトル用のcssコードを追加
  3. タイトルを追加する

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

 

cssコードを消す1箇所目

こうなります。

 

cssコードを消す2箇所目

こうなります。

 

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

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

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

だと
twitter-box-1

だと
twitter-box-10

となります。

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

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

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

 

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

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

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

 

 SNSボタンを中央寄せする

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

  1. cssコードを2箇所消す
  2. cssコードを1箇所追記

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

 

cssコードを消す1箇所目

こうなります。

 

cssコードを消す2箇所目

こうなります。

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

 

まとめ

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

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

WP-basic


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

 - STINGER

スポンサーリンク

amazonで4つ星以上の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に関しては、2年ほど前から勉強してきましたが、全体像というか肝の部分の理解がなかなか出来ていない感がありました。多くの解説本は、分厚いリファレンス・マニュアル形式が多く、中級者であれば調度良いのでしょうが、初心者であれば、よほど強い決意なくしては、途中で挫折しそうになるものが多かったです。今回の書籍は、そうした超初心者であっても、志さえあれば基本的な理解が出来るよう、解りやすい言葉と図解でハードルを下げてくれています。 (続く:※引用)

Comment

  1. 木元将貴 より:

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

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

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

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

    • livett1 より:

      木本様コメントありがとうございます。

      Stinger20140327の中身を確認していませんが、木本様のサイトを確認してみた所『width:75px;』が適用されれば縦になりそうです。
      CSSを更新しても見た目が変わらないのは、パソコン本体に以前のCSSの情報がキャッシュとして残っているのが原因かと思います。
      キャッシュを削除してからサイトを確認してみてください。

      もしくは全てのデータをサーバーからダウンロードさせる《スーパーリロード》を実施してみてください。
      IE、Firefoxのブラウザを使用されている場合は【CTRL】+【F5】
      Choromeなら【CTRL】+【F5】もしくは【SHIFT】+【F5】

      上記でいかがでしょうか?

      Stinger20140327の中身を確認してみた所、『SNSボックス』が別ファイル(sns02.php)になっていましたが、その他で変わった事はありませんでした。
      上記作業を実施して確認してみてください。

  2. 松崎 より:

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

    • livett1 より:

      サイト訪問とコメントありがとうございます。

      松崎様のサイトのCSSが分からないので確実ではないですが、スタイルシートで以下2点を修正してみてください。
      1,【.snsb li】と【.sns .snsb li】の項目にある《float: left;》を削除
      2,【.snsb li】の項目に《text-align: center;》を追加

      以上です。
      後日このエントリーにも修正版を掲載するようにしますが、取り急ぎご確認ください。
      2014/7/30にエントリーに追記しました。

      • 松崎 より:

        さっそくのお返事ありがとうございました!無事中央にすることができました!役に立つ記事をありがとうございます!

livett1 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

WPで簡単CSS反映(oh my god)-@livett1-
CSSを変更しても表示が変わらない。自動的にスグ表示を変更させる設定方法。【STINGER改造】

サイトデザインを変更するためにCSS(カスケード・スタイル・シート)を修正。 ワ …