Home > FC2ブログ > basic_white > basic_whiteテンプレート トップページなどに指定のSNSボタンを設置する方法

basic_whiteテンプレート トップページなどに指定のSNSボタンを設置する方法

 basic_whiteテンプレートのトップページなどの一覧ページに指定のSNSボタンのHTMLコードを直接貼り付けて設置する方法です。

 公式で対応していないFC2サービスのFC2拍手などを指定の順番で並べることができます。[140608更新]

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

トップページにも拍手・ツイートボタンなどを設置する方法のカスタマイズを行っている場合は追加したHTML「<!--more--><!--/more-->」とスタイルシートを最初に削除してください。

1. HTML

 場所はCtrl+Fキーで『<body』を検索。以下の強調部分を追加します。他のカスタマイズで追加済みの場合は不要です。

<body<!--not_permanent_area--> class="np_area"<!--/not_permanent_area-->>

※body要素に「class="○○○"」という記述が既にある場合はclassの「""」中に「<!--not_permanent_area--> np_area<!--/not_permanent_area-->」を追加してください。

※「class="○○○"」が既にある場合
<body class="○○○<!--not_permanent_area--> np_area<!--/not_permanent_area-->">

2. HTML

 場所はCtrl+Fキーで『entry_more"』を検索。直前に「<div class="fc2_footer"></div>」を追加してその中にツイートボタンや拍手ボタンなどのHTMLコードを設置します。

<div class="fc2_footer">

ここに設置

</div>

<p class="entry_more"><a href="<%topentry_link>" title="<%template_abs_link>"><%template_extend></a></p>

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

<div class="fc2_footer">

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title> : <%blog_name>" data-count="vertical">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>


</div>

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

 ツイートボタンとFC2拍手サービスのタグを設置する場合は並べて入れます。

<div class="fc2_footer">

ツイートボタンのタグ

FC2拍手タグ


</div>

3. スタイルシート

 以下を追加します。

 以上で完成です。

※高さのあるボタンを設置しない時は追加したスタイルシートの「min-height: 70px;」の「70」を「50」などに減らすとボタンの縦位置が改善されます。

 個別ページでも同様に表示する場合は[2]で設置した「<div class="fc2_footer">~</div>」のコードを表示したい場所に貼り付けてください。例えば、記事下なら次の位置に設置します。

<div class="fc2_footer">
SNSボタンのタグ
</div>

</div>
<div class="entry_footer">

※個別ページでも表示する際は環境設定のブログ設定にある拍手やツイートボタンを表示しないに設定してください。

2段でツイートボタンなどを表示

 1段目に設置するボタンを「<div class="sns-first">」と「</div>」で挟むと2段で表示されます。例えば、拍手を1段目、ツイートボタンを二段目に表示する場合は次のようにします。

<div class="fc2_footer">

<div class="sns-first">
FC2拍手タグ
</div>

<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>

</div>

※ツイートボタンの右にツイート数を表示する時は「data-count="horizontal"」を設定してください。ツイート数を表示しない時は「data-count="none"」に変更してください。

最小の横幅を調整

 ウインドウを狭めた時にボタンが表示しきれない時は最小の全体幅を「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;
}

高さ調整…ボタンがサムネイル画像に重なったりする場合

 変更場所はCtrl+Fキーで『* grid_content』を検索。335pxの数値を適当に増やします。

/* grid_content
--------------------------- */
#main_contents .grid_content {
  float: left;
  margin-left: -1px;
  margin-right: -1px;
  margin-bottom: 13px;
  width: 33%;
  height: 360px; /* グリッド表示の時の記事の高さ */
  border-left: 1px dotted #B5B5B6;
  border-right: 1px dotted #B5B5B6;
}

 他のカスタマイズなどで高さを指定するスタイルシートを加えている場合はそちらも変更してください。

 リスト表示の高さを調整する時は[3]で追加したスタイルシートの以下の数値を増やしてください。

.np_area #main #main_contents .list_content {padding-bottom: 60px;}

トップページでカテゴリを表示している場合

 トップページなどで記事にカテゴリを表示で左下にカテゴリを設置している場合はスタイルシートに以下を追加してください。

/* 一覧ページSNSボタン・カテゴリ位置調整 */
.np_area #main_contents .grid_content+.grid_content .entry_category {bottom: 90px; left: 20px;}
.np_area #main_contents .entry_category {left: 360px;}
body.np_area #main #main_contents .grid_content+.grid_content {padding-bottom: 60px;}

 「360」はリスト表示の際の左端からの距離で、増やすとカテゴリが右に移動します。「90」の数値を減らすとカテゴリが下に移動し、増やすと上に移動します。「60」の数値を増やすと記事の高さが増加します。

 最初の記事の横幅を狭めて2列以上表示している場合は「+.grid_content」を削除してください。

 親カテゴリを表示したくない場合はカスタマイズで追加したHTMLの以下の部分を削除してください。

<!--parent_category-->
  <li><a href="<%topentry_parent_category_link>"><%topentry_parent_category></a></li>
<!--/parent_category-->

各ボタンの上に「続きを読む」を配置する

 以下のスタイルシートを加えてください。「トップページでカテゴリを表示している場合」のコードを既に追加済みの場合は最後の行を削除してください(同一なので不要)。

/* 続きを読むの上にSNSボタン */
.np_area #main .grid_content+.grid_content .entry_more {bottom: 90px;}
body.np_area #main #main_contents .grid_content+.grid_content {padding-bottom: 60px;}

 「90」の数値を増やすと続きを読むの位置が上に移動します。「60」の数値を増やすと記事の高さが増加します。

 最初の記事の横幅を狭めて2列以上表示している場合は「+.grid_content」を2つとも削除してください。

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

コメントの投稿

  

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

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

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

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

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

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