FC2ブログのテンプレートSoutherly(http://fc2information.blog.fc2.com/?share=45312& …)を使用しています。
現在は、各記事ページで【拍手・ツイート・いいね】が記事の一番下に表示されています。
【facebook・ツイッター・Googleなど】は、コメントの右上に表示されます。
それらを記事タイトルの下(コメント数・カテゴリーの同じ行上右)に表示させたいです。
できれば、大きさも変えたいです。
宜しくお願いします。
No.1ベストアンサー
- 回答日時:
【拍手・ツイート・いいね】については、どのコードかわかりませんでした。
【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>&media=<%topentry_image_url>&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+"><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とスタイルシートで合わせてください。
たぶんこれでいけるはずです。
参考まで。
No.2
- 回答日時:
【拍手・ツイート・いいね】についてコードがわかったのですが……。
<%topentry_body>
このコードで投稿の本文と一緒に書き出されているようです。
これは、FC2のブログの内部で処理されているので、
加工するのは難しいのではないでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
中央寄せの解除
-
アメブロ。日記から本文がはみ...
-
fc2ブログのブログ説明文の文...
-
Word Press内に、HP制作を作成...
-
Becky!ver.2で、返信・転送用テ...
-
【FC2ブログ】複数カテゴリを作...
-
ブログにカウンターを付ける方法
-
fc2掲示板 「メッセージ表示...
-
wordpressの投稿ページの格納場所
-
画面いっぱいに広がるブログに...
-
テンプレート編集にモジュール...
-
Wordの「キーボードのユーザー...
-
三つ折りのリーフレットを作りたい
-
改ざんは修正や訂正という意味...
-
goo blogの映像外の説明用文字...
-
FC2でブログでプロフィールに家...
-
Seesaaブログで記事内に表を載...
-
ひな形とテンプレートの違い?
-
EXCEL2007のヘッダー・フ...
-
FC2ブログ 去の日付に変更
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
中央寄せの解除
-
ライブドアブログのサイドバー...
-
FC2のテンプレで質問です。
-
ブログ記事内に文章を左右2列に...
-
ブログのデザインがずれる原因
-
FC2ブログの右サイドバーが落ちた
-
Jugem カスタマイズ(背景)
-
アンドロイドで文字が左に偏る。
-
fc2ブログ タイトルを枠で囲み...
-
FC2ブログのテンプレートを...
-
ブログに背景壁紙画像を設定し...
-
FC2のテンプレ
-
ライブドアブログにおいて記事...
-
アメブロcss 3カラムを2カラム...
-
FC2ブログのサイドメニューの調整
-
fc2ブログ背景色変更
-
FC2ブログのテンプレ編集/幅調...
-
HEAD・HTMLの行間改行が上手く...
-
HTML、テーブルが下に落ちます。
-
FC2ブログ ブラウザの違い
おすすめ情報