【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
スポンサーリンク
▶サイト内キーワード検索&関連記事
スポンサーリンク
【ランチ】博多駅徒歩3分、安い、個室完備、子連れOKの店「海山邸 福鈴」

この記事では、4月にランチで利用させていただいた博多駅から徒歩3分で行

【50%OFF】Kindleストア、Web解析・マーケティング書セール開催中(6/29まで)

KindleストアにてWebマーケティング関連書籍が全品50%オフとな

Apple_iPhone7で撮影する方法
Apple、iPhone7での写真撮影テクニックを日本語で解説した特設ページを公開

Appleはこれまで「How to Shoot on iPhone 7

【ポケモンGO】新しいジムが再登場〜レイドバトルはレベル35以上から

本日23日、ポケモンGOが新機能を追加した新しいジムを公開したことをア

iPhone8のカラーは新色のホワイトを含めた5色展開か

iPhoneやiPadなどのリーク情報を提供しているBenjamin

Apple:How to Shoot on iPhone 7
Apple、写真アプリの「メモリー機能」の使い方を紹介した動画を2本公開

AppleがiPhoneの写真アプリに搭載されている「メモリー機能」の

UQ mobile(UQモバイル)
UQモバイルポータルアプリが「データチャージ履歴表示」「タイマーターボ機能」に対応

UQモバイルは20日、以前から告知していたとおりスマートフォン向けアプ

Instagram
Instagram、ライブ配信動画の録画リプレイを24時間限定で公開可能に

Instagramは米国時間6月20日、ライブ配信動画のリプレイを「イ

ポケモンGO、最新版(ver.0.67.1)にアップデート〜「レイドバトル」や「ジムバッジ」機能などを追加

昨日、ポケモンGOから協力プレイ機能「レイドバトル」の予告があったばか

【ポケモンGO】協力プレイ「レイドバトル」を予告〜ジムをアップデート

ポケモンGOは19日、ジムを新しくアップデートしてポケストップのように

→もっと見る

  • 中の人→


  • 友だち追加数

© 2014-2017 Time to enjoy All rights Reserved.