【Stinger3】記事下にSNSボタンを追加したらスマホのレイアウトが崩れる問題の対処法


公開日: カスタマイズ(Stinger)

2日に渡って「LINEで送る」ボタンと、「Pocket」の追加方法をご紹介しましたが、肝心なことを忘れていました。

おそらく、どれかひとつのSNSボタンを削除して、新しいボタンを追加したひとは大丈夫だと思いますが、削除せずに新たなボタンを追加して、ボタンが5個以上になってしまった場合は、スマホのレイアウトが崩れてしまったひとがいるかもしれません。

Stingerは、横に4つしか並べることができないようにできているみたいです。

 

スマホのレイアウトが崩れる場合の対処法

 

IMG_1558

▲たとえばコレ。

「はてぶ、どこいってんねん!」

「Pocketとfeedly、くっつきすぎやろ!」

と、ツッコミたくなりますね。

 

対処法

対処法としましては、SNSボタンの列そのものを2列にしてみました。

スマホで見た場合、横に4個しかSNSボタンが入らないってことでしたので、それなら2列(4個×2列)にすればいいじゃんと思ったわけですね。

具体的に「sns.php」をみてみると…

<div id=”snsbox03″>
<div class=”sns03″>
<ul class=”snsb clearfix”>
〜中略〜

</ul>
</div>
</div>

▲これがSNSBOXのコードなので、中略の部分に入れるSNSボタンのコードは4つまでにして、それ以上分のコードは、上記と同じコードをもうひとつ追加して作ることになります。

わかりますか?このようにすれば、1列(ボタン4個)が2列並ぶようになります。

IMG_1560

▲こんな感じになります。

 

管理人のひとこと

ブログでは何度も言っていますが、ぼくはPHPとかCSSとかさっぱりわかりません。完全なる素人です。

ですので今回の自己流のやり方も、ちゃんとしたやり方なのかはわかりません。

一応検索して調べてみたんですが、いづれも難しそうなやり方ばかりで対応できず、自己流でイジるしかなかったわけです。

とりあえずうまくいってますので、結果オーライではありますがw、もし参考にされる方は自己責任でよろしくお願いします。

ではまた!

スポンサーリンク

サイト内キーワード検索
スポンサーリンク
【iTunesカードキャンペーン情報】ローソンでiTunesカードバリアブルを購入・応募すると15%分のボーナスコードプレゼント!(4/2まで)

コンビニエンスストア「ローソン」にてiTunesボーナスコードのプレゼ

AUKEY/CB-H18
【レビュー】「AUKEY/CB-H18」は7つのUSBハブと3つの充電専用ポート搭載でポート不足の心配無用!(Windows/Macに対応)[PR]

パソコンを常時使用する人はUSBポートが足りなくて困った経験はないだろ

金色コイキング
【ポケモンGO情報】「Ver.1.29.1」「水タイプポケモン増加」「金色コイキング出現」

この記事では、人気スマホゲームアプリ「ポケモンGO」の現時点での最新ア

Instagram
インスタグラムのアカウント乗っ取りを防止する2段階認証の設定方法

インスタグラムでアカウントの乗っ取りを未然に防止する「2段階認証」の設

スーパーマリオラン
Android版スーパーマリオランが配信開始!iOS版もバージョン2.0.0にアップデート

本日2017年3月23日、以前からの予告どおりAndroid版のスーパ

iPhoneSE
UQモバイルとワイモバイルがiPhone SEの取り扱いを開始へ

先日、Appleから「iPhone SE」の32GB版と128GB版が

iPhone7 red
iPhone7/Plusの赤が登場!SEは32GBと128GBに変更へ

Appleは3月21日、iPhone7/7Plusの新色として赤「(P

9.7インチiPad
Apple、価格が3万円台の新しいiPad「9.7インチiPad」を発表

Appleは3月21日、「iPad Air 2」の後継モデルとみられる

インスタグラム、ライブ配信動画の保存(録画)が可能に

今年1月に追加されたインスタグラムの新機能「ライブ動画」で、これまでは

スリザリオ
ミミズのゲーム「スリザリオ(slither.io)」はiPhoneでも遊べて地味にハマる!

「スリザリオ(slither.io)」というミミズのゲームを知っている

→もっと見る

  • 中の人→
  • 友だち追加数

Copyright© Time to enjoy(タイムトゥエンジョイ) , 2014-2017 All Rights Reserved.