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

ではまた!

スポンサーリンク
関連記事

サイト内キーワード検索
スポンサーリンク
【ポケモンGO】ファミレスのジョイフルが「ポケストップ」と「ジム」に!

本日4月26日、ファミリーレストランの「Joyfull(ジョイフル)」

SoftBank
ソフトバンク、ギガモンスター向けのテザリング無料キャンペーンを延長。月額使用料も500円に改定

ソフトバンクは25日、ギガモンスター向けのテザリングオプション無料キャ

スーパーマリオラン
【スーパーマリオラン】バージョン2.1.0をリリース〜キノピオラリーで獲得できるキノピオの最大数増加など

スマホ向けゲームアプリ「スーパーマリオラン」がバージョン2.1.0をリ

10%SALE
【iTunesカードキャンペーン情報】セブンイレブン、デイリーヤマザキで10%分のiTunesコードプレゼント中

コンビニエンスストアの「セブンイレブン」と「デイリーヤマザキ」でiTu

AUKEY(CP-T03)
【レビュー】1000円台のおすすめスマホスタンド(三脚タイプ)〜AUKEY:CP-T03[PR]

スマホを固定するためのスタンドが欲しいけど、でっかい三脚は大げさだし、

10%SALE
【iTunesカードキャンペーン情報】ローソン、ミニストップで10%分のiTunesコードプレゼント中(5/7まで)

コンビニエンスストアの「ローソン」と「ミニストップ」でiTunesコー

Chromeのプッシュ通知解除
PC(Chrome)に通知されるニュース配信を停止/解除する方法

PC(Google Chrome)で作業していると、読みもしないニュー

【50%OFF】「Kindle旅行本フェア」開催中

Kindleストアにて電子書籍が50%オフとなる「Kindle旅行本フ

pokemongo
【ポケモンGO】「ポケストップのちかくにいるポケモン」の表示が追加

本日ポケモンGOが、マップ画面右下にある「かくれているポケモン」の機能

Amazon fresh
Amazonが生鮮食品を自社配送で届ける新サービス「Amazon fresh」を一部地域から開始

本日4月21日、Amazonは肉や野菜などの生鮮食品を自社配送により最

→もっと見る

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

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