|
このブログでSNS（ソーシャル）ボタン表示に忍者ツールズの“忍者おまとめボタン”を使用しています。 このボタン文字通りSNSのシェアボタンをまとめて表示出来て便利なのですが、デフォルトだと横位置が「右」or「左」しかなくて微妙な位置に表示出来ないんですよね。 まずは真ん中に表示させたくて、web上で色々調べたら、忍者ツールズで『助太刀忍者（質問掲示板）』ってのがありまして、同じような質問をされて解答されていたのを見つけたので、それを利用しましたが・・・ 参考URL： http://csbbs.ninja.co.jp/Thread_View/52059/ 頭の <div class="ninja_onebutton"> を <div class="ninja_onebutton" style="width:200px;margin:0 auto;"> に変更すると真ん中に寄りますよとの事で試しました。 ※サイズの“200px”は例としてあげられています 概ね、真ん中に寄るのですが、微妙にど真ん中にはならなかったんです。 理由は、文中の「width:200px」部分でボタン一列分の横幅を指定するのですが、私が使用しているオリジナルボタン（丸型）だと、このサイズが微妙で、どうやってもドセンターにならず、「もうちょいでど真ん中や」と思って、数ピクセルずらすとボタン一個が下に入ってデザインが崩れて一列にならず、もう無理やしそこまでこだわらなくてもと思っていたんですが、最初の <div class="ninja_onebutton"> に、違う加工をすれば解決するんちゃうんと思い、やってみました。 以下の方法で 忍者おまとめボタンを中央（Center）位置に表示出来、且つ横位置であれば微調整可能です。但し、ブログ画面は固定サイズと言うのが前提ですが私のブログはPC用の画面は固定サイズなので、左位置の始まりを調整すれば解決やなと思いまして <div class="ninja_onebutton" style="margin-left: 260px;"> としました。 結果は、予想通りというか、ならないとおかしいんですけどね  ※“忍者おまとめボタン”は左寄せに設定 ちなみに、レスポンシブタイプの“忍者おまとめボタン”を、これに当てはめると  左の出だしはどちらも左から260ピクセルになっています。 これにプラスして、レスポンシブボタンの横幅を調整したければ <div class="ninja_onebutton" style="width:300px; margin-left: 260px;"> と、することで以下のようになります。 ※例では、レスポンシブボタンの横幅を300ピクセルに指定  これで、レスポンシブタイプの“忍者おまとめボタン”の、幅も変えられました。 もし、レスポンシブタイプの“忍者おまとめボタン”をど中央のセンター寄せにしたいならば、冒頭の『助太刀忍者（質問掲示板）』の方法だけで出来ますし、微調整をしたいならこの記事の方法で可能です。 どうでしょうか？ これでご自身のブログデザインに合った位置に“忍者おまとめボタン”を設置出来るようになったのではないでしょうか？ ところで、行頭の <div class="ninja_onebutton"> をカスタマイズするのはアドセンス等と違って、カスタマイズありですよね？ 利用規約を見たんですが、「あり」とも「なし」とも書いていなくてと言うか、そういう類の項目が見つけられなくて・・・ まぁ、常識の範囲で考えても、どこかに不利益が出る事もないし・・・たぶん、良いよな・・・ ではでは、ご参考まで。 |
広告
|
広告
|
| ▶ | この記事にピンときたら |  |
へ |
| << 前記事(2016/06/12) | ブログのトップへ | 後記事(2016/06/17) >> |
| 内 容 | ニックネーム／日時 |
|---|
| << 前記事(2016/06/12) | ブログのトップへ | 後記事(2016/06/17) >> |
