M E N U

Silent_Noiseのカスタマイズ1(忍者おまとめボタン)

Silent_Noise_W

もうそろそろ、他の部分の修正もした上で、レスポンシブWebデザインに変更しようと思っていたのですが、時間がかかりそうなので、とりあえず今の段階で出来ることをば。

■忍者おまとめボタンの設置方法

ツイートボタン、いいねボタンなどをまとめて簡単設置|忍者おまとめボタン

FC2ブログの記事下に忍者おまとめボタンを設置するにはどうしたらいいですか?|ヘルプ|忍者おまとめボタン

FC2ブログの記事下に忍者おまとめボタンを設置するにはどうしたらいいですか?<上級編>|ヘルプ|忍者おまとめボタン
(※この設置例のように拍手ボタンの下に設置することも可能ですが、全文表示した際に、本文と追記の間に表示されてしまうので、今のところオススメできません。HTMLをいろいろかまえば何とか出来そうではありますが。)

1.以下の<!--//////忍者おまとめボタン設置可能域//////-->(1~5)のいずれかにスクリプトコードを記入。
※尚、テキストが回り込むなどしてレイアウトが崩れる場合は、以下のようにスクリプトコードのclass名に(半角スペース+clearfix)を追加するとよい。↓
<div class="ninja_onebutton clearfix">
<!--記事本文全体ここから-->
<div class="entry_body">
<%topentry_body>
<!--「続きを読む」ここから-->
(略)
<!--//.entry_more「続きを読む」ここまで-->
<!--追記ここから-->
(略)
<!--//#more追記ここまで-->
<!--//////1.忍者おまとめボタン設置可能域(関連記事・広告の下1)//////-->
<!--忍者おまとめボタンここから-->
(この部分にスクリプトコードを記入<div class="ninja_onebutton clearfix">~</div>)
<!--//忍者おまとめボタンここまで-->

</div>
<!--//.entry_body記事本文全体ここまで-->
<!--//////2.忍者おまとめボタン設置可能域(関連記事・広告の下2)//////-->

<!--記事のフッターここから-->
(略)
<!--/allow_tb--><!--deny_tb--><!--/deny_tb-->
<!--//////3.忍者おまとめボタン設置可能域(無難)//////-->
<!--//.entry_footer記事のフッターここまで-->

<!--//////4.忍者おまとめボタン設置可能域//////-->
記事のヘッダー部分でも設置可能です。
<!--======1記事の枠ここから======-->
<!--topentry-->
<div id="blog_entry" class="content">
<!--記事のヘッダーここから-->
<div class="entry_header">
<h2 id="e<%topentry_no>" class="entry_title">
<!--not_permanent_area--><a href="<%topentry_link>" title="<%topentry_title>"><!--/not_permanent_area-->
<%topentry_title><!--not_permanent_area--></a><!--/not_permanent_area--></h2>

<!--//////5.忍者おまとめボタン設置可能域(「右寄せ」にした方がスッキリするかも)//////-->

</div><!--//.entry_header記事のヘッダーここまで-->
2.スタイルシートでレイアウトを微調整(デフォルトを参考に、「/*追加分*/」以降を各自の好みに合わせて指定)。
/*--//////忍者おまとめボタン用//////--*/
/*
デフォルトのcss
.ninja_onebutton {
clear: both;
padding-bottom: 10px;
z-index: 10350000 !important;
}
*/

/*追加分*/
.ninja_onebutton {
display: block; /*テキストの回り込みなどを防ぐ*/
padding-top: 15px !important; /*好みに合わせて変更*/
padding-bottom: 0 !important; /*好みに合わせて変更*/
text-shadow: none !important; /*テキスト・シャドウを無効にする*/
}

.ninja_omatome_box,
.ninja_omatome_box_footer span,
.ninja_omatome_box_footer a {
text-shadow: none !important; /*テキスト・シャドウを無効にする*/
}

※上記スタイルシートは<!--//////1.忍者おまとめボタン設置可能域(関連記事・広告の下1)//////-->に設置した場合のもの。
プレビューはコチラ↓
忍者おまとめボタン
関連記事

Comment

Post a comment

非公開コメント

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。