レ点腫瘍学ノート

2020-10-19

ボタン位置固定

Top > pukiwikiカスタマイズ箇所 > 2020 > AMP-social-shareの実装 > ボタン位置固定

pukiwikiカスタマイズ箇所/2020/AMP-social-shareの実装をさらに、ボタン位置固定にする改装についてのメモです。

スタイルシートで

.sns{
position: fixed; right: 15px; bottom: 30px;
z-index: 10;
opacity: 0.7;
}

を加えています。

rightとbottomは画面の右辺と底辺からの距離を指定しています。当然画面の左ならleft、天辺ならtopに変えることで対応できます。

z-indexは他の要素でz-indexを使っていないサイトの場合は省略可能です。
opacityはアイコンの透明度の指定ですが、0が完全に透明で1が不透明です。0.7であればうっすら透けています。

AMP-social-shareの実装
このサイトは個人のメモ書きという要素が強かったのでSNSでのシェアのしやすさはそれほど意識していなかったのと、ウェブサイトが重くならないように極力シンプルな構成を目指していましたが、AMP用スクリプトはいずれもウェブサイトの重さに極力影響を与えずに様々な機能が実装できることがわかってきたので、SNSでのシェアを容易にするためのAMP-so…

このページに関連するページ

pukiwikiカスタマイズ箇所/2020/AMP-social-shareの実装