おすすめ記事ピックアップ
忍者おまとめボタン(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コード例です。
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
「忍者おまとめボタン」を設置しても、その上や下の隙間をどれだけつくるか設定することはできません。今回は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