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

ではまた!

スポンサーリンク

サイト内キーワード検索
スポンサーリンク
iPhoneSE
BIGLOBEが「iPhone SE」の取扱を開始~BIGLOBE SIMと合わせて月額2,980円から利用可能

ビッグローブ株式会社は19日、同社が提供する格安SIM「BIGLOBE

スーパーマリオラン
Android版スーパーマリオランは3月に配信開始〜事前登録受付中

任天堂がAndroid版スーパーマリオランの配信開始月を2017年3月

Instagram
インスタグラムが新機能「ライブ動画」を日本でも導入開始

Instagramは現地時間1月17日、昨年11月に発表していた「In

「Vine」が正式終了–「Vine Camera」にリニューアル

以前から予告されていたとおり、現地時間1月17日をもって「Vine」が

pokemongo
【ポケモンGOアップデート】Apple Watchでポケストップのタマゴ獲得を表示(Ver.1.23.1 / 0.53.1)

17日、ポケモンGOより約1ヶ月ぶりとなるアップデートが配信された。

ドコモの学割
ドコモが「ドコモの学割」を1月20日より実施–1年間毎月の基本使用料を最大1,500円割引

image:NTT docomo NTTドコモは17日、25歳以下の

Kindleセール
Kindleストア、「資格試験対策キャンペーン」や「英語&実用書フェア」などの電子書籍セールを開催中

Kindleストアにて「【50%OFF】今年こそ合格~資格試験対策キャ

ソフトバンクが「学割モンスターU18」を実施–18歳以下なら月額2,980円から利用可能に

image:ソフトバンク 本日1月16日、ソフトバンクは18歳以下の

Kindleセール
【20%OFF】「冬☆電書」講談社コミック まとめ買いセール開催中 (2/1まで)

Kindleストアにて電子書籍コミックが20%オフで購入できる「冬☆電

Kindleセール
【50%オフ】Kindleストアで「幻冬舎映像化作品フェア」開催中(1/26まで)

Kindleストアにて電子書籍が50%オフとなる「幻冬舎映像化作品フェ

→もっと見る

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