レ点腫瘍学ノート

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であればうっすら透けています。

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

この記事に対するコメント

このページには、まだコメントはありません。

お名前:

更新日:2020-10-19 閲覧数:867 views.