一部コンテンツがずっと同じ場所に表示されているwebページを見たことないでしょうか？
スクロールしてもずっと同じ個所に表示されているのでとても目を引きますよね。
ちょっとした動きがあるだけでサイトの印象も良くなります。
今回はSNSのボタンが右端中央に固定されるコードを、WordPressに組み込んでみたので紹介したいと思います。
WordPress コンテンツを固定表示
これが今回作ったコードです。
HTMLはコンテンツを表示したいPHPファイルに、cssはcssファイルに記述することで適用されます。
urlや画像のパスは自分に合わせて変えてください。
画像はこのサイトで使っているのもを使ってもらって構いません。
HTML
<div id="side_fix">
<a class="side_sns" href="https://twitter.com/ryo_cnn"><img src="http://coonelnel.net/wp-content/uploads/2017/03/twitter.png"></a>
<a class="side_sns" href="https://www.instagram.com/ryo_cnn/"><img src="http://coonelnel.net/wp-content/uploads/2017/03/instagram.png"></a>
</div>CSS
#side_fix{
position:fixed;
top:50%;
right:3px;
}
.side_sns{
display:block;
width:35px;
height:35px;
margin:7px;
}
大枠の<div>タグに対して固定表示のcssを記述しています。
固定表示の一番のポイントは「position:fixed;」です。
まずは、positionプロパティを解説します。
css positionプロパティ
positionプロパティはオブジェクトの配置方法を指定するものです。
下記の3種類がよく使われます。
position:relative;
相対位置によるレイアウト。
（今ある位置を基準にしてレイアウトする方法）
position:absolute;
絶対位置によるレイアウト。
（ブラウザの左上を基準にしてレイアウトする方法）
position:fixed;
絶対位置によるレイアウトで、スクロールしても固定される。
このように配置方法を「fixed」にするだけで固定コンテンツを作ることが出来るんです。
しかも絶対位置によるレイアウトなので、配置がとても簡単です。
さらに今回は、
「top:50%;」によって上端から50％の箇所
「right:3px;」によって右端から3pxの箇所
と指定したことで右端中央に配置しています。値は各自調整してみてください。
最後に
コンテンツの固定はcssのみで簡単に出来るのでぜひ試してみてください。
今後もWordPressサイトの簡単カスタマイズをやっていきたいと思います。
