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

ではまた!

もしお役に立ちましたら
いいねやフォローをお願いします!

中の人を
▶おすすめ記事
スポンサーリンク
▶サイト内キーワード検索&関連記事
スポンサーリンク
kindle
【40%ポイント還元】Kindleストアで「ビジネス/IT/実用書 2016年度ベスト50」開催中(6/8まで)

Kindleストアにて「ビジネス/IT/実用書 2016年度ベスト50

Kindle
【50%OFF】Kindleストアで「日本文芸社大規模セール」開催中

Kindleストアにてセール対象タイトルが50%オフとなる「日本文芸社

マクドナルドで楽天スーパーポイントが利用可能に。貯めるだけでなく支払いも可能

マクドナルドと楽天がポイントサービス「楽天ポイントカード」において提携

kindle
【半額】Kindleストア、「沈黙のWebマーケティング」などが半額となるWebデザイン・Web技術書セール実施中(6/1まで)

Kindleストアにて対象の電子書籍が半額となる「Webデザイン・We

wwdc2017
Appleが「WWDC 2017」の基調講演をライブ中継すると発表~日本時間6月6日午前2時から

Appleが「WWDC 2017」の基調講演の様子をライブ中継すること

10%SALE
ファミマ、サークルKサンクスで1,500円以上のiTunesカードバリアブルを購入・応募すると10%分のボーナスコードプレゼント!(6/1まで)

コンビニエンスストアの「ファミリーマート」と「サークルKサンクス」にて

スクエニがiOS版「ドラゴンクエストⅣ〜Ⅷ」を最大35%オフで配信中

現在スクウェア・エニックスは、人気ゲーム ドラゴンクエストのiOS版ア

スマホ版ウイニングイレブン2017がリリース

ウイイレのスマホ版「Winning Eleven 2017」がリリース

Benjamin Geskin氏がiPhone8の図面およびハンズオン動画を公開

先日からiPhoneやiPadのリーク情報を提供しているBenjami

Facebook、ライブ動画配信に招待機能や友達同士だけの非公開チャット機能を提供

現地時間5月23日、Facebookはライブ動画に二つの新たな機能、「

→もっと見る

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

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