残業は悪と心に決めてる社畜SEが、定時で帰れた時の暇つぶしに読める記事を綴っています。ブログ-ブログカスタマイズスポンサードリンクこんばんわ。気づいたらもう年末で驚いている佐伯(@saeki_teizidash)です。1年早すぎ...さてさて、今日は久々のはてなブログカスタマイズ記事でございます。本ブログ「明日こそ、定時」に実装しているのですが、自分が行ったカスタマイズのまとめとして記事に残しておきたいと思います。今回のはてなブログカスタマイズの内容は「スマホの画面下の広告の上にSNSシェアボタンを配置する方法」です!ちなみに、今回のカスタマイズはスマホ向けなのではてなブログProにしていないとカスタマイズできないのでご了承くださいまし...それでは紹介したいと思います!参考サイト今回は上記のサイト様を参考にさせていただきました。ありがとうございます。基本的には、上記のサイトに書いてあるhtmlとCSSをコピーして定められた場所にペーストをします。これでSNSシェアボタンがスマホブログ記事内の下に追従する形で表示されたと思います。コンサルNAEの整理ノート上記で紹介したサイトに表記してあるコードをコピペするだけでSNSシェアボタンは表示されるのですが、当ブログのようにスマホの画面下に広告を表示しているブログなどは上記画像のようにSNSシェアボタンが隠れて表示されてしまいます。広告を先に実装されているブログが、後にSNSシェアボタンの実装を行うと「あれ?SNSシェアボタンが表示されていないけどコピぺミスったのかな?」と思ってしまうかもしれません。表示はされているのですが見えないだけですよ!修正したコードを以下に紹介したいと思います。タイトル下」にコピペをするCSSコードを改変します。下に記述してあるCSSのコードをコピペするだけで広告にかぶらないようになりますよ。*/}先ほどのコピペCSSコードの一番上のタグ「fixed-share-buttons」内に記述してある「bottom」の値を「10px」から「55px」へ変更しただけです。」と書いてあるので修正箇所わかりやすいですね。「55px」で大抵の広告にかぶらないで表示ができると思いますが、もし表示されない場合はこの部分を広告の大きさに合わせて適切なピクセル値に修正し変更してみてください。最後に久しぶりのはてなブログカスタマイズの記事でした。このブログもカスタマイズしているので記事がたまってきたら「明日こそ、定時」用のカスタマイズまとめ記事でも書こうかしら。参考にしてもらえたら幸いです。注目記事プロフィールid:sasagin自社製品の開発をしたかったのに、SIer系に回されてしまった底辺PG&SEです。好きなことなんでも書いてます。最近は、一眼レフと漫画にハマっています。独断と偏見にまみれたコラムはnoteに書いてますので、物好きな方はこちらもどうぞ。(1)月別アーカイブtwitter@saeki_teizidashさんのツイートスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。