Buy Me a Coffeeのwidgetを追加した話; widgetをコンテンツの最大幅に合わせる

#blog開発記
2025/01/10
ArticleImage:01JH6WW79W2EETG451N2W80ZPD

はじめに

このブログにBuy Me a Coffeeのwidgetを追加してみました

Gatsby.jsでBuy Me a Coffeeのwidgetを利用する方法についてはこちらのブログを参考にさせていただきました

困ったこと

このwidgetはposition: fixedで表示位置が固定されています
そのためコンテンツの最大幅以上の画面サイズで表示したときにwidgetだけ離れた位置に表示されてしまいました

最大幅以上の画面で表示した場合

やったこと

メディアクエリを使用して画面がコンテンツの最大幅を超えている場合は最大幅の最端にwidgetが表示されるようrightプロパティを変更するようにしました

Copy
@media(min-width: 1400px) {
    #bmc-wbtn {
        right: calc((100% - 1400px) / 2) !important;
    }
    #bmc-iframe {
        right: calc((100% - 1400px) / 2) !important;
    }
}

最大幅に収まっているwidgetボタン

最大幅に収まっているwidget


Recommend Articles

Gatsby.jsとgqlgenでブログを作った

はじめに 最初は単にGraphQL、gRPC、ECS、New Relic etc 自分が興味のある技術トピックでHello World Enterprise Editionをやるだけのつもりだったものの GraphQL -> ヘッドレスCMS -> ブログ という連想ゲームの結…

2024/12/23

ArticleImage:01JFT54WPPZ0ET3XTKZ0JTCMRE

algolia+instantsearchで全文検索に対応した

はじめに gatsby-plugin-algolia と react-instantsearch を利用して当ブログに記事を全文検索できる機能を追加しました この記事含めまだ3件しか書いていないので全文検索を活用するべく2025年はブログの1年にしていきたい所存 ページのInd…

2025/01/05

ArticleImage:01JGT8DR23JG0SZ4AH5AVAMZBM

Copyright © miyamo2 All rights reserved.