FC2ブログ 拍手・facebookなどの表示場所を変えたい。

ＦＣ2ブログのテンプレートSoutherly（http://fc2information.blog.fc2.com/?share=45312& …）を使用しています。

現在は、各記事ページで【拍手・ツイート・いいね】が記事の一番下に表示されています。
【facebook・ツイッター・Googleなど】は、コメントの右上に表示されます。

それらを記事タイトルの下（コメント数・カテゴリーの同じ行上右）に表示させたいです。
できれば、大きさも変えたいです。

宜しくお願いします。

No.1 ベストアンサー 回答者： de_viant 回答日時： 2017/08/14 21:49

【拍手・ツイート・いいね】については、どのコードかわかりませんでした。

【facebook・ツイッター・Googleなど】を移動、縮小する場合を以下に書きますね。
HTML編集で、以下のコードに手を入れます。

<div class="entry-info">から<div class="contents">まで、<!-- -->コメントアウトした行を除いたコードがありますので、それに、<!--追加-->と書かれているコードを入れてください。

<div class="entry-info">
<div class="enclose"><!--追加-->
<ul>
<!--allow_comment--><li><a href="#community"><span class="fa fa-comment" aria-hidden="true"></span><%topentry_comment_num></a><!--/allow_comment-->
<!--allow_tb--><li><a href="#trackback"><span class="fa fa-refresh" aria-hidden="true"></span><%topentry_tb_num></a><!--/allow_tb-->
</ul>
<div class="entry-category">
<span class="fa fa-folder" aria-hidden="true"></span><a href="<%topentry_category_link>"><%topentry_category></a>
</div>
</div>
<div class="sns"><!--追加-->
<!--下から持ってきたコードをここから-->

<!--下から持ってきたコードをここまでの間へ-->
</div><!--追加-->
</div><!--追加-->
<div class="contents">

以下のようなコードがあるので、それを上のここから、ここまでの間へコピーしてください。
<ul class="permanent-inner-footer-sns">
<li><a href="http://www.facebook.com/sharer.php?u=<%topentry_ … target="_blank" title="Share on Facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a>
<li><a href="http://twitter.com/intent/tweet?url=<%topentry_l … target="_blank" title="Tweet on Twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a>
<li><a class="c-pinterest" href="//www.pinterest.com/pin/create/button/?url=<%topentry_link>&amp;media=<%topentry_image_url>&amp;description=<%topentry_enc_utftitle>" target="_blank" title="Pin it on Pinterest"><span class="fa fa-pinterest-p" aria-hidden="true"></span></a>
<li><a href="https://plus.google.com/share?url=<%topentry_lin … target="_blank" title="Share on Google&#043;"><span class="fa fa-google-plus" aria-hidden="true"></span></a>
<li><a href="http://admin.blog.fc2.com/control.php?mode=edito … target="_blank" title="Only for admin"><span class="fa fa-pencil" aria-hidden="true"></span></a>
</ul>

スタイルシート編集で、以下のようなコードがありますので、
追加、修正してください。

.contents {
clear: both; /*追加*/
padding: 20px 0;
}

.permanent-inner-footer-sns .fa {
fon-size: 80%; /*追加*/
width: 20px; /*修正*/
height: 20px; /*修正*/
line-height: 20px; /*修正*/
border-radius: 50%;
background-color: rgb(212,108,118); /* 個別記事下SNSシェアアイコン背景色 (approx)Froly */
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

.permanent-inner-footer-sns .fa:before {
line-height: 20px; /*修正*/
}

以下のコードは新たに追加してください。
.enclose {
float: left;
}
.sns {
float: left;
padding-top: 10px;
}

enclose、sns は、好きなクラス名に変更してください。
その場合は、HTMLとスタイルシートで合わせてください。

たぶんこれでいけるはずです。
参考まで。

この回答へのお礼

ご丁寧に本当に感謝します。
早速、試してみます。
ありがとうございます。

お礼日時：2017/08/15 11:49

No.2 回答者： de_viant 回答日時： 2017/08/15 09:46

【拍手・ツイート・いいね】についてコードがわかったのですが……。

<%topentry_body>

このコードで投稿の本文と一緒に書き出されているようです。
これは、FC2のブログの内部で処理されているので、
加工するのは難しいのではないでしょうか。