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


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

IMG_1558

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電子書籍セール情報
Amazon、3日間限定のKindle電子書籍50%ポイント還元セール開催中(12/8まで)

Amazonが今年最後のビッグセール「サイバーマンデーウィーク」に合わ

Amazonサイバーマンデー2016
Amazon冬の一大セールイベント「サイバーマンデーウィーク」を開催(12/6~12/12)

Amazonにて12月6日より1週間、冬の一大セールイベント「サイバー

楽天スーパーセール(2016/12)
ポイント最大35倍!楽天スーパーセール開催中(2016/12/8まで)

楽天市場にて恒例の「楽天スーパーセール」が開催されている。 セール期

LINE
【LINE最新アップデート】タイムラインで1時間後の自動削除や大文字投稿が可能に(Ver.6.9.0)

12月2日、iOS版LINEアプリがアップデートされ、タイムラインにい

Amazonプライム会員1,000円オフキャンペーン
今ならAmazonプライム会員が1,000円オフ!12月4日まで

もしAmazonプライム会員を検討している人がいたらぜひ今のうちに加入

iPhone 6sバッテリー交換プログラム
iPhone 6sが突然シャットダウンする不具合発生〜対象モデルの場合はバッテリー無償交換

Appleは先日、iPhone 6sが突然シャットダウンしてしまう問題

AirPods
Appleのワイヤレスイヤホン「AirPods」は数週間以内に出荷とティム・クックCEOが明言

当初は10月下旬に発売される予定だったAppleのワイヤレスイヤホン「

Apple Music学割
Apple Music、日本でも月額480円の学割プランを開始

Appleは現地時間29日、同社が提供する音楽配信サービス「Apple

applestore_ginza
Apple、iMacのヒンジ部分を修理したユーザーに費用の払い戻しを実施か

iMacのディスプレイが緩くて固定できない、もしくは過去に修理したこと

Ameba不正ログイン被害
パスワードの変更を!Amebaでまた約59万アカウントに不正ログイン被害発生

株式会社サイバーエージェントは29日、同社が運営する「Ameba」にて

→もっと見る

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