忍者おまとめボタンの上下のスペース調整方法

おすすめ記事ピックアップ

忍者おまとめボタン（http://www.ninja.co.jp/omatome/）って便利ですよね。Bloggerに設置した「忍者おまとめボタン」の上下に自由にスペースを作りたいと質問を頂きましたので、ついでに説明します。

「忍者おまとめボタン」を設置しても、その上や下の隙間をどれだけつくるか設定することはできません。今回はCSSを強制的に上書きして、上下の空きを作ります。

2013年6月時点では「忍者おまとめボタン」は、「ninja_onebutton」というdiv classでレイアウトを制御しています。そのCSS自体は「忍者おまとめボタン」のサーバ上にあるため編集できません。

「ninja_onebutton」のCSSは、貼り付けコードをいじっても変更できないのです。ちなみに「http://omt.shinobi.jp/css/ninja_onetag.css」がそのCSSです。

そんな時は、CSSを強制的に上書きすれば良いのです。importantという処理になります。BloggerのCSSコード（テンプレートのHTML編集で追加する）に「ninja_onebutton」のCSSコードを追記します。追記は管理しやすいように、自分で分かりやすい位置に設置しましょう。

CSSコード例です。

.ninja_onebutton {
padding: 10px 0px 10px 0px !important;
}

paddingは、上下左右にどれくらいのスペースを取るか指定するCSSコードです。時計回りに　↑→↓←　の順でサイズを指定できます。

上記の場合は、、10px（上に10ピクセル空きをつくる） 0px（右に0ピクセル空きをつくる）） 10px（下に10ピクセル空きをつくる） 0px（右に0ピクセル空きをつくる）という設定になります。この空きを、20pxにしたければ、20って入力すればOKです。

importantでCSSの上書き方法を覚えておけば、いろんなサービスでデザインの調整ができます。結構便利ですよ。

Bloggerに関する質問を、分かる範囲で適当にお答えします。質問はお気軽にどうぞ！
http://www.furimuke.com/p/blog-page_3.html