AFFINGER6

AFFINGER6｜SNSボタンを縦並べで画面に固定するカスタマイズ

AFFINGER6 SNSボタンを縦並べで固定表示するカスタマイズCSS

投稿ページの左端にSNSボタンを縦並びに表示するのは、1カラムレイアウトでは定番のデザインです。

AFFINGER6 にはSNSボタンの固定表示機能がありませんが、簡単なCSSで実装可能なのでぜひ参考にしてください。

AFFINGER6のSNSボタンを縦並びに固定表示
サンプル
@media only screen and (min-width: 960px) {
	.post .sns{
		position: fixed; /* 画面固定 */
		left: 10px;
		top: 40%;
		width: initial;
	}
	.post .sns ul{
		flex-direction: column; /* 縦並び */
		align-items: center;
	}
}

CSSの解説

  1. mediaクエリで960px以上の画面（PC表示）のみに反映
  2. 大枠を position: fixed; で画面に固定表示
  3. 位置は上から40%、左から10pxの位置に
  4. SNSリストを flex-direction: column; で横並びから縦並びに変更

おすすめの使い方

  • 1カラム・LPのレイアウト