【はてなブログ】スマホの画面下の広告の上にSNSシェアボタンを配置する方法

こんばんわ。気づいたらもう年末で驚いている佐伯(@saeki_teizidash)です。
１年早すぎ…

さてさて、今日は久々のはてなブログカスタマイズ記事でございます。
もうすでに本ブログ「明日こそ、定時」に実装しているのですが、自分が行ったカスタマイズのまとめとして記事に残しておきたいと思います。

今回のはてなブログカスタマイズの内容は「スマホの画面下の広告の上にSNSシェアボタンを配置する方法」です！
ちなみに、今回のカスタマイズはスマホ向けなのではてなブログProにしていないとカスタマイズできないのでご了承くださいまし…

それでは紹介したいと思います！

参考サイト

今回は上記のサイト様を参考にさせていただきました。
ありがとうございます。

基本的には、上記のサイトに書いてあるhtmlとCSSをコピーして定められた場所にペーストをします。
これでSNSシェアボタンがスマホブログ記事内の下に追従する形で表示されたと思います。

画面下に広告があるブログ向けのコード修正

スマホ画面に追従しても邪魔くさくないSNSシェアボタンの設置方法（はてなブログのカスタマイズ） | コンサルNAEの整理ノート

上記で紹介したサイトに表記してあるコードをコピペするだけでSNSシェアボタンは表示されるのですが、当ブログのようにスマホの画面下に広告を表示しているブログなどは上記画像のようにSNSシェアボタンが隠れて表示されてしまいます。

広告を先に実装されているブログが、後にSNSシェアボタンの実装を行うと「あれ？SNSシェアボタンが表示されていないけどコピぺミスったのかな？」と思ってしまうかもしれません。
安心してください。表示はされているのですが見えないだけですよ！
修正したコードを以下に紹介したいと思います。

広告にかぶらないコード（修正版）

「スマホ版（Pro向け）：デザイン　→　スマートフォン　→　タイトル下」にコピペをするCSSコードを改変します。
下に記述してあるCSSのコードをコピペするだけで広告にかぶらないようになりますよ。

/* 全体の位置決め */
.fixed-share-buttons{ 
    text-align: left; 
    position:fixed; /* 表示位置を固定 */
    left:10px; /* 画面左端からの距離 */
    bottom:55px; /* 画面下からの距離 */
    z-index: 100; /* 他の要素より前面に表示 */
}

/* ボタン共通のデザイン */
.fixed-share-buttons a {
    position: relative;
    display: inline-block; /* 横並び */
    width: 36px; /* 横幅 */
    height: 36px; /* 縦幅 */
    text-align: center; /* ロゴの中央寄せ（縦） */
    line-height: 36px; /* ロゴの中央寄せ（横） */
    border-radius:50%; /* 丸ボタン化 */
    font-size: 18px; /* ロゴの大きさ */
    color: #ffffff; /* ロゴの色 */
    text-decoration: none; /* ロゴに表示されてしまう下線を消す */
    padding: 0;
    margin:5px; /* ボタン間のスペース */
    opacity:0.8; /* ボタンの半透明化 */
}

/* はてなブックマークボタンの色指定 */
.fixed-share-buttons .hatena-bookmark{
    background: #008fde;
}

/* Facebookボタンの色指定 */
.fixed-share-buttons .facebook{
    background: #305097;
}

/* Twitterボタンの色指定 */
.fixed-share-buttons .twitter{
    background: #55acee;
}

/* Pocketボタンの色指定 */
.fixed-share-buttons .pocket{
    background: #EE4256;
}

/* LINEボタンの色指定 */
.fixed-share-buttons .line{
    background: #5ae628;
}

修正箇所の説明

/* 全体の位置決め */
.fixed-share-buttons{ 
    text-align: left; 
    position:fixed; /* 表示位置を固定 */
    left:10px; /* 画面左端からの距離 */
    bottom:55px; /* 画面下からの距離 */
    z-index: 100; /* 他の要素より前面に表示 */
}

先ほどのコピペCSSコードの一番上のタグ「fixed-share-buttons」内に記述してある「bottom」の値を「10px」から「55px」へ変更しただけです。
コメントアウトで丁寧に「画面下からの距離」と書いてあるので修正箇所わかりやすいですね。

「55px」で大抵の広告にかぶらないで表示ができると思いますが、もし表示されない場合はこの部分を広告の大きさに合わせて適切なピクセル値に修正し変更してみてください。