Home > FC2ブログ > basic_white > basic_whiteテンプレート 記事タイトル下にツイートボタンなどを設置する方法

basic_whiteテンプレート 記事タイトル下にツイートボタンなどを設置する方法

 basic_whiteテンプレートのトップページなどの一覧ページの記事タイトルすぐ下のヘッダーにツイートボタンなどを設置する方法です。

 グリッド表示の場合は横幅が狭いので設置するボタンの数を一つにするか、トラックバック数を非表示したりすることを推奨します。[140608更新]

[140608up] 紹介しているツイートボタン部分のHTMLコードを修正。

1. HTML

 場所はCtrl+Fキーで『entry_body"』を検索。以下の強調部分を追加します。

<!--deny_tb--><!--/deny_tb-->
<li>ここにツイートボタンなどのコードを設置</li>
</ul>
<div class="entry_body">

 例えば、ツイートボタンのみ追加する場合は次のようにします。

<!--deny_tb--><!--/deny_tb-->
<li><a href="https://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title> : <%blog_name>" data-count="horizontal">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>

</ul>
<div class="entry_body">

※ツイート数を表示しない時は「horizontal」を「data-count="none"」に変更してください。

 複数のSNSボタンを設置する時は数を増やします。ツイートボタンの右にツイート数を表示している場合は横幅の関係で最後尾に設置することを推奨します。

<!--deny_tb--><!--/deny_tb-->
<li>ボタン設置コード1</li>
<li>ボタン設置コード2</li>
</ul>
<div class="entry_body">

2. スタイルシート

 変更場所はCtrl+Fキーで『* entry_date』を検索。以下の強調部分を追加・変更します。

/* entry_date */
#main .entry_date li,#main .entry_state li {font-size: 91%;}
#main .p_area .entry_date li, #main .list_content .entry_date li,
#main .p_area .entry_state li, #main .list_content .entry_state li {font-size: 100%;}
.entry_state iframe.twitter-tweet-button {width: 110px !important; vertical-align: middle;}
body .entry_state iframe.twitter-count-none {width: 80px !important;}

#main_contents .entry_date {
  float: left;
  width: auto;
  margin: 0 0 10px 15px;
  text-align: left;
}
#main_contents .entry_date li {
  display: inline;
  margin-right: 0.3em;
}

/* entry_state */
#main_contents .entry_state {
  float: right;
  overflow: hidden;
  width: auto;
  margin: 0 5px 10px 0;
  text-align: right;
}
#main_contents .content .entry_state li {
  display: inline;
  margin-left: 0em;
  padding-right: 0.3em;
  border-right: 0px solid #999999;
}

※ツイートボタンを右端に設置しない場合は「margin: 0 5px 10px 0;」を「margin: 0 15px 10px 0;」にして右余白を増やすと丁度いい間隔になります。

 以上で完成です。

注意事項

 グリッド表示を3列表示するなどして各記事の横幅が狭くなっている場合は設置したツイートボタンなどが日付の下の行に移動してしまいます。その場合は最小の横幅を増やしたり、投稿時間やリンク項目(トラックバック「TB:数」)を削除するなどしてください。

トラックバック項目を削除

 ボタンを設置した場所のすぐ上にある次の部分を削除するとトラックバック「TB:数」が表示されなくなります。

<li><a href="<%topentry_link>#tb" title="<%template_trackback>">TB:<%topentry_tb_num></a></li>

コメント項目を削除

 ボタンを設置した場所のすぐ上にある次の部分を削除するとコメント「CM:数」が表示されなくなります。

<li><a href="<%topentry_link>#cm" title="<%template_post_comment>">CM:<%topentry_comment_num></a></li>

投稿時間を削除

 ボタンを設置した場所のすぐ上にある次の部分を「<!--permanent_area-->」と「<!--/permanent_area-->」で挟むと投稿時間が表示されなくなります。

<!--permanent_area--><li><%topentry_hour>:<%topentry_minute></li><!--/permanent_area-->

最小の横幅を増やす

 最小の全体幅を「200px」程度増やして各記事の幅を広げます。変更場所はCtrl+Fキーで『min-width:』を検索。それぞれを書き換えます。

#container { min-width: 1000px; }
#headermenu , #wrap ,
#footer_plg , #footer_inner {
  min-width: 1000px;
  max-width: 1200px;
  width:expression(document.body.clientWidth < 1002? "1000px" : document.body.clientWidth > 1202? "1200px" : "auto"); /* For IE */
}

#header h1,
#header p {
  min-width: 985px;
  max-width: 1185px;
  width:expression(document.body.clientWidth < 1002? "1000px" : document.body.clientWidth > 1202? "1200px" : "auto"); /* For IE */
  margin: 0 auto;
}

 少しでもグリッド部分の面積を広げたい時は更にサイドバーの横幅を狭くします。変更場所はCtrl+Fキーで『#main {』を検索。該当する数値部分をすべて同じ数だけ減らします。以下は30px減らしています。

#main {
  float: left;
  position: relative;
  width: 100%;
  margin-top: 35px;
  margin-right: -310px;
  text-align: left;
}

#main_contents {
  margin: -36px 310px 0 0; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
  padding-top: 35px;
}

#sidemenu {
  float: right;
  position:relative;
  overflow: hidden;
  width: 290px; /* サイドメニューの幅 */
  padding-top: 35px;
}



※他のカスタマイズで日付とボタン部分の横幅が固定されている場合は以下をスタイルシートに追加してください。追加しても変わりない、追加すると崩れる場合は追加しないでください。

#main .entry_date, #main .entry_state {width: auto !important;}

個別ページでも記事タイトル下にボタンを表示

 ボタンを設置した場所の少し上にある「<!--not_permanent_area-->」を「</ul>」の直後に移動させます。

<!--not_permanent_area-->
<ul class="entry_state">

(省略)

</ul>
<div class="entry_body">

↓ 移動

<ul class="entry_state">

(省略)

</ul><!--not_permanent_area-->
<div class="entry_body">

 次に二つある「<%topentry_link>」を「<!--not_permanent_area-->」と「<!--/not_permanent_area-->」で挟みます。コメントやトラックバック数を削除している場合は不要です。

<ul class="entry_state">
  <!--allow_comment-->
  <li><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#cm" title="<%template_post_comment>">CM:<%topentry_comment_num></a></li>
  <!--/allow_comment-->
  <!--deny_comment--><!--/deny_comment-->
  <!--allow_tb-->
  <li><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#tb" title="<%template_trackback>">TB:<%topentry_tb_num></a></li>
  <!--/allow_tb-->
  <!--deny_tb--><!--/deny_tb-->
  <li>SNSボタン</li>

</ul><!--not_permanent_area-->
<div class="entry_body">

 以上で完成です。


 個別ページでのみコメント数とトラックバック数を表示する場合は更に次のようにします。

<ul class="entry_state">
<!--permanent_area-->
  <!--allow_comment-->
  <li><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#cm" title="<%template_post_comment>">CM:<%topentry_comment_num></a></li>
  <!--/allow_comment-->
  <!--deny_comment--><!--/deny_comment-->
  <!--allow_tb-->
  <li><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#tb" title="<%template_trackback>">TB:<%topentry_tb_num></a></li>
  <!--/allow_tb-->
  <!--deny_tb--><!--/deny_tb-->
<!--/permanent_area-->
  <li>SNSボタン</li>

</ul><!--not_permanent_area-->
<div class="entry_body">

 個別ページでのみトラックバック数を表示する場合は次のようにします。

<ul class="entry_state">
  <!--allow_comment-->
  <li><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#cm" title="<%template_post_comment>">CM:<%topentry_comment_num></a></li>
  <!--/allow_comment-->
  <!--deny_comment--><!--/deny_comment-->
<!--permanent_area-->
  <!--allow_tb-->
  <li><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#tb" title="<%template_trackback>">TB:<%topentry_tb_num></a></li>
  <!--/allow_tb-->
  <!--deny_tb--><!--/deny_tb-->
<!--/permanent_area-->
  <li>SNSボタン</li>

</ul><!--not_permanent_area-->
<div class="entry_body">

関連記事
スポンサー リンク
コメント

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered