snsボタン

WordPressテーマのSTINGERには標準で記事下にSNSボタンが設置されていますが、そこにFeedlyやPocketといった他のSNSをボタンを追加した人も多いはず。

しかし、単純に追加しただけだとPCでの表示は大丈夫なのですが、スマートフォンでの表示が崩れてしまいます。

ですので、CSSでレイアウトを整える必要があります。今回はその方法をご紹介します。

また、今回使用しているテーマはSTINGER5ですが、STINGER3でも同様の方法で解決できます。

まずはFeedlyやPocketのボタンを追加する

まだFeedlyやPocketのボタンを追加していない方もいらっしゃるかもしれませんので、追加方法を確認しておきます。

参考にするのはこのサイト。

[browser-shot url=”http://mizuka123.net/4441/” width=”250”]あとで読む？Stinger3にPocketボタンを追加する方法

[browser-shot url=”http://mizuka123.net/4927/” width=”250”]細かすぎて伝わらないStingerカスタマイズ！ #Stinger-WP

STINGERのsns.phpは以下のようになります。

<div class="sns">
    <ul class="snsb clearfix">
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
      </li>
      <li>
        <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&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 the_permalink(); ?>"></g:plusone>
      </li>
      <li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_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>
      <li>
        <a href="https://getpocket.com/save"
        class="pocket-btn"
        data-lang="en"
        data-save-url="<?php get_permalink(); ?>"
        data-pocket-count="vertical"
        data-pocket-align="left" >Pocket</a>
        <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
      </li>
      <li>
      <?php
      /**
       * FeedlyのブログRSS購読者数(フォロワー数)を取得・表示
       */
      // 値がない、もしくは古いときはデータベースへ一時保存
      if ( false === ( $subscribers = get_transient( 'feedly_subscribers' ) ) ) :
          // RSS feed のURLをエンコード
          $feed_url = rawurlencode( get_bloginfo( 'rss2_url' ) );
          // 購読情報をJsonで取得して購読者数だけ頂く
          $subscribers = wp_remote_get( "http://cloud.feedly.com/v3/feeds/feed%2F$feed_url" );
          $subscribers = json_decode( $subscribers['body'] );
          $subscribers = $subscribers->subscribers;
          // データベースへ購読者数を一時保存する。60 * 60 * 12 = 半日。お好きに値は変えましょう
          set_transient( 'feedly_subscribers', $subscribers, 60 * 60 * 12 );
      endif;
      ?>
      <a href="http://cloud.feedly.com/#subscription%2Ffeed%2F<?php echo rawurlencode( get_bloginfo( 'rss2_url' ) ); ?>"
         class="feedlyButton"
         target="_blank"
         title="<?php bloginfo('name'); ?>のRSSをFeedlyで購読してみませんか">
          <div class="arrow_box_feedly">
          <span class="feedlyCount">
              <?php echo get_transient( 'feedly_subscribers' ); ?>
          </span>
          </div>
          <img id="feedlyFollow" src="http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-small_2x.png"
               alt="follow us in feedly" width="66" height="20">
      </a>
      </li>
    </ul>
  </div>

また、PCでのレイアウトはこのようになります。

stinger_sns

しかし、このままだとスマートフォンでの表示が崩れてしまいます。

表示が崩れている図

これを、2段目にFeedlyとPocketのボタンが表示されるように変更します。

はてなブックマークのボタンにクラスを追加

まず、はてなブックマークのボタンにクラスで適当なものをつけます。例ではhatenaとしています。

      <li class="hatena"> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_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>

クラスのhatenaにpaddingをつける

次に、style.cssでクラスのhatenaにpadding-bottomを11px程度つけます。これは、11ピクセル以上であればいくつでも構いません。

.hatena {
  padding-bottom: 11px;
}

これで、スマートフォンでの表示が整いました。

stinger_sns3

やったね☆

また、この設定をするときにbackground-colorもつけると、どの程度paddingがついているのか分かりやすくなるのでオススメです。

.hatena {
  padding-bottom: 11px;
  background-color: red;
}

軽い注意点

基本的にはこれで大丈夫なのですが、もしかするとFeedlyやPocket以外にもSNSボタンを追加した場合、表示が崩れるかもしれません。

そんなときは他のSNSボタンにクラスを付加するなどして上記の方法を応用すれば対応できると思うのですが、少し注意点があります。

marginを使ってはいけない

padding-bottomではなくmargin-bottomを付加しても、何も変化しません。自分はこれでかなり時間を食いました･･･。注意しましょう！

padding-topをつけてはいけない

paddingを上につけてもスマホの表示が整う（はず）ですが、今度はPCでの表示が崩れます！気をつけましょう！