【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、もし参考にされる方は自己責任でよろしくお願いします。

ではまた!

ご訪問ありがとうございます。
ごゆっくりどうぞ。

follow us in feedly
スポンサーリンク
▶サイト内キーワード検索&関連記事
スポンサーリンク
【Kindle本セール】珠玉の恋愛小説キャンペーンなど

Kindleストアにて電子書籍がお買い得価格で購入できるセールが複数開

出前の検索・注文ができる「LINEデリマ」がスタート〜ガストやモスバーガー、CoCo壱など全国14,000店舗のフードメニューを注文可能

LINEは7月27日、ピザ・寿司・カレー・中華・弁当・ケータリング・お

iPhone8の発売日は2017年10月〜12月か。顔認証機能が搭載される可能性あり

先日、iPhone10周年記念として発売が予想されるプレミアムモデル「

あんしん連絡先
相手の位置情報を共有できる安否確認用iPhoneアプリ「あんしん連絡先」をGoogleがリリース

7月26日、Googleは家族や親しい友人と自分の現在地を直接共有でき

「君の名は。」Blu-ray&DVD
「君の名は。」iTunes Storeで販売・レンタル開始。Amazonでは「FireTV Stick」購入キャンペーンを実施中

本日7月26日より、昨年の大ヒット映画「君の名は。」の販売およびレンタ

Google、Chromeの最新バージョン60をリリース〜MacBook ProのTouch barに対応

Googleは現地時間7月25日、Google Chromeの最新バー

Adobe、2020年でFlashのサポートを終了へ

Adobeは現地時間7月25日、2020年末までに「Flash」および

iPhone8(MartinHajek)
9月発売は「iPhone7s/7sPlus」のみ?「iPhone8」の発売日は2018年以降か

今年9月に発表される次期iPhoneは「iPhone7s/7sPlus

「iPhone8」、ベゼルは4mmでディスプレイ上部の両端は電波とバッテリー表示。イヤホンジャックは無し

米メディアのForbesが、ケースメーカーのNodusと協力して「iP

Twitter
Twitter、「いいね」したツイートの表示順序を変更へ

Twitterが公式アプリの一部仕様変更を発表している。 今回変更さ

→もっと見る

  • 中の人→


  • 友だち追加数

© 2014-2017 Time to enjoy All rights Reserved.