気になる…(きになるてん)

アクセスカウンタ

プロフィール・プライバシーポリシー

ほど良い情報をお届けしたいブログ

きになる…(きになるてん)

ブログテーマ | PC | グルメ | おすすめ | ひとりごと | ThinkPad | BABYMETAL | アニメ・マンガ |

zoom RSS 忍者おまとめボタンを中央(Center)位置に表示 〜レスポンシブは任意の横幅に〜

<<   作成日時 : 2016/06/15 09:15   >>

トラックバック 0 / コメント 0

このブログで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"> をカスタマイズするのはアドセンス等と違って、カスタマイズありですよね?

利用規約を見たんですが、「あり」とも「なし」とも書いていなくてと言うか、そういう類の項目が見つけられなくて・・・

まぁ、常識の範囲で考えても、どこかに不利益が出る事もないし・・・たぶん、良いよな・・・


ではでは、ご参考まで。

広告
広告

テーマ

関連テーマ 一覧

• サイト内検索

ブログ 記事一覧

  ―こんな記事も読まれています―

パンチが効いていれば人気ブログランキング


月別リンク

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文

コメントありがとうございます。

返答が必要なコメントのみ、ニックネーム“ブログ主”でコメントさせていただきます。

人気ブログランキング参加中よろしければ気が済むまで投票して下さい。

画像

ブログ “ 気になる… ” は

ほど良い情報をお届けしたい

見た目は子犬!頭脳はおっさん!

なブログ です(´・ω・)

広告


 • サイト内検索

ブログ 新着記事

 ―NEW!―
記事がお気に召せば
(^ω^`)ブログをご覧いただきありがとうございます
ブログ主:Takasui

忍者おまとめボタンを中央(Center)位置に表示 〜レスポンシブは任意の横幅に〜 気になる…(きになるてん)/BIGLOBEウェブリブログ
文字サイズ:       閉じる