Home > FC2ブログ > basic_white > basic_whiteテンプレート トップページにも拍手・ツイートボタンなどを設置する方法

basic_whiteテンプレート トップページにも拍手・ツイートボタンなどを設置する方法

 basic_whiteテンプレートのトップページなどにも環境設定(ブログの設定)で有効にしたSNSボタン「拍手」「ツイート」「いいね」「シェア」を表示する方法です。

 グリッド表示の際は窮屈になるのでスタイルシートでいくつかのボタンを非表示にすることを推奨します。有効の設定は個別記事の方にも反映されます。

1. 環境設定

 管理画面の環境設定→ブログの設定にある「拍手ボタンの表示位置」を「追記リンクの後」に設定して更新します。既に追記リンクの後になっている場合はそのままでOKです。

2. 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-->">

3. HTML

 場所はCtrl+Fキーで『entry_more"』を検索。直前に「<!--more--><!--/more-->」を追加します。

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

4. スタイルシート

 以下を追加します。

/* 一覧ページ拍手SNSボタン */
.np_area .fc2_footer{
  position: absolute;
  bottom: 0;
  left: 12px;
  min-height: 70px;
  text-align: left !important;
  white-space: nowrap;
}
.np_area .fc2button-line {display:none !important;}
.np_area #main #main_contents .grid_content {padding-bottom: 30px;}
.np_area #main #main_contents .list_content {padding-bottom: 30px;}

/* END */

 以上で完成です。

グリッド表示の場合のみ特定のSNSボタンを表示しない

 ボタンが多すぎるとグリッド表示で「続きを読む」にボタンが重なります。特定のボタンを非表示にして表示数を減らす時はスタイルシートに必要なコードを追加してください。

「拍手」を非表示

.np_area .fc2button-clap {display: none !important;} /* 拍手非表示 */

「ツイートボタン」を非表示

.np_area .fc2button-twitter {display: none !important;} /* ツイート非表示 */

「いいね!」と「シェア」を非表示

.np_area .fc2button-facebook {display: none !important;} /* いいねシェア非表示 */

「いいね!」を非表示(シェアボタンは表示)

.np_area .fc2button-facebook {display: none !important;} /* いいね表示シェア表示 */
.np_area #main .fc2button-facebook + .fc2button-facebook {display: inline-block !important;}

「シェア」を非表示

.np_area .fc2button-facebook div {display: none !important;} /* シェア非表示 */

最小の横幅を調整

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

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

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

.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;}
.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つとも削除してください。

水平配置で「いいね」と「シェア」を二段目に設置する

 環境設定のブログの設定にある各SNSボタンのカウントを横に並べて表示している時はフェイスブックを2段目にすることでコンパクトにまとまります。

 [4]で追加したスタイルシートの次の部分を変更・追加してください。

.np_area .fc2_footer{
  position: absolute;
  bottom: 0;
  left: 15px;
  min-height: 70px;
  text-align: left !important;
  white-space: normal;
  width: 230px;
}
.np_area .fc2button-facebook {margin-top: 5px;}
.np_area .fc2button-line {display:none !important;}

関連記事
スポンサー リンク
コメント
#180 : SNSボタン
初めまして。
いつも参考にさせていただいております。

質問なのですが、mayさんのテンプレのようにヘッダー右側にSNSボタンを設置する方法は教えてもらえないでしょうか。

お忙しい所申し訳ありませんが、よろしくお願い致します。
#208 : No title
こんにちわ。

「続きを読む」ボタンの左横に拍手ボタンやツイッターボタン等を設置するにはどうすればよいでしょうか?

「続きを読む」ボタンは記事枠右下に固定された状態で、その左横に各種ボタンを一列で表示させたいと思ってます。
ちなみに、表示させたいボタンは、拍手ボタンとツイッターボタン、そしていいねボタンの三つで、シェアボタンは使いません。

どうかよろしくお願いします!
#233 : No title
始めまして。
SNSボタンの拍手ボタンをブログ内で設定できる拍手ボタンではなく、FC2サービスにある方(他ブログでも使用できる方)のお礼ページがある拍手ボタンを設置したい場合、どうしたらよいでしょうか??変更する場所が分からず質問させていただきました。お忙しいところ申し訳ありません。よろしくおねがいします。
#235 : Re: #233 FC2拍手設置
コンバンハ。
URLリンク先に「トップページなどに指定のSNSボタンを設置する方法」を投稿いたしましたのでそちらをご参考くださいませ。
※拍手だけ入れ替える仕組みにはなっていないので、ツイートボタンなどのHTMLコードも公式サイトからコピーしてご自身で貼り付ける必要があります。
#237 : No title
こんばんわ
迅速な対応をありがとうございました!
早速できました! お忙しいところありがとうございました!

コメントの投稿

  

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

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

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

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

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

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