fc2blogにソーシャルボタンを追加した際の枠線を非表示にする

fc2blogにソーシャルボタンを追加した際の枠線を非表示にする方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. fc2blog管理画面の環境設定で、TwitterFacebookの項目を有効にするを選択し 更新 すると、それぞれのボタンが記事内に表示されます。

    valid-seo-111-social-button-border-1.png
  2. それらのボタンの周囲に枠線が表示されるのを非表示にする設定方法です。

    valid-seo-111-social-button-border-2.png

メリット

  1. 意図していない装飾を解消できます。

テンプレートのHTML編集は無し

  1. 特にありません。

テンプレートのCSSを編集

通常時は枠線を非表示、ホバー時は枠線を表示

  1. 次のコードをテンプレートのCSS内に追加します。CSS内のどこでもいいのですが、下図で示すように/*記事 > 「続きを読む」*/段落の下に追加することを推奨します。今後のメンテナンス時に分かりやすいです。

    
    /*ソーシャルボタン周囲の枠線非表示設定*/
    .fc2_socialbtn,.fc2_socialbtn td{border:0;outline:0;}
    
    valid-seo-111-social-button-border-3.png
  2. 下図のとおり追加しました。

    valid-seo-111-social-button-border-4.png

通常時・ホバー時共に枠線を非表示

  1. ソーシャルボタンをマウスオーバーした際に表示される枠線も非表示にする場合は、上記コードの代わりに次のコードを追加します。こちらの方を推奨します。

    
    /*ソーシャルボタン周囲の枠線非表示設定*/
    .fc2_socialbtn,.fc2_socialbtn td,.fc2_socialbtn tr:hover{border:0;outline:0;}
    
    valid-seo-111-social-button-border-5.png

その他

  1. 今後テンプレートを改訂する際はデフォルトで非表示になるようにする予定です(ver1.1.2以降)。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)