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

ではまた!

スポンサーリンク

サイト内キーワード検索
スポンサーリンク
LINE
iOS版LINEアプリがアップデート。@名前指定機能などが追加(Ver.7.1.0)

iOS版LINEアプリが27日にアップデートされている。最新版は「バー

画面が割れたiPhone
Apple、サードパーティ製ディスプレイに修理済のiPhoneも保証の対象内に

iPhoneのディスプレイ(画面)が割れてサードパーティー製のディスプ

Kindle電子書籍、99円雑誌や新生活応援フェアなどのセールを開催中

AmazonのKindleストアにて電子書籍がお買い得になるセールが複

Apple、MacBook・MacBook Pro Retinaの画面コーティングが剥がれる問題の対象期間を拡大

MacBookおよび、MacBook Proの画面コーティングが剥がれ

ポケモンの誕生日を記念してとんがり帽子をかぶったピカチュウが出現

いちばん最初のポケモンゲームソフト「ポケットモンスター 赤・緑」が発売

iTunesカードキャンペーン情報_Time to enjoy
【iTunesカード割引情報】ファミマ、サークルKサンクスで1,500円以上のiTunesカードバリアブルを購入・応募で15%分のボーナスコードプレゼント!2017年3月2日まで

ファミリーマートとサークルKサンクスにてiTunesコードのプレゼント

Instagram
Instagram、1回の投稿で写真や動画を何枚もアップできる新機能をリリース(最大10枚)

現地時間2月22日、Instagramは1つの投稿に複数の写真や動画を

Amazonが2段階認証を導入。さっそく設定してセキュリティを強化しておいた!

Amazonで2段階認証が導入されたので早速設定してみた! 2段階認

OMAKER222キャンペーン
Omakerの小型スピーカー「M7」が限定300台限りの20%オフセール実施中!

本日2月22日、モバイルバッテリーやBluetoothスピーカー、スマ

Fire TV Stick (New モデル)
Amazon、新型の「Fire TV Stick」を4月6日に発売。Wi-Fi・CPUがパワフルに

本日Amazonが、テレビのHDMI端子に挿すだけでAmazonビデオ

→もっと見る

  • 中の人→
  • 友だち追加数
  • ▼プッシュ通知▼

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