突然ですが、記事を読んでいて「今なんの話だっけ？」って思うことありませんか？
今回は有料のWordPressテーマ「STORK（ストーク）」
の「記事内の見出しをスクロールに合わせて固定する」カスタマイズ方法をご紹介します！
- 記事が長すぎると、何の話か忘れちゃう
- より分かりやすいブログにしたい
そんなあなたへ向けた記事です！
[aside type="normal"]この記事に協力していただいた方
[voice icon="https://palulog.com/wp-content/uploads/2017/09/IMG_4675-min.jpg" name="" type="l thanks"]
サンダーガール（@thundergirl6063）さん
「自分が悩んだことを人に同じ時間悩ませない」がテーマのママパパ向けブログを運営。
家族との時間・子どもの成長を大切にされています。またWEBにも詳しく、『エックスサーバー「HTTP/2とnginx対応」とは。分かりやすく例えで解説！』はエックスサーバーユーザー必見の内容となっています。
ブログ つくるブログ
プロフィール プロフィール │ つくるブログ
[/voice][/aside]
見出しをスクロールに合わせて固定、とは？
言葉では分かりにくいと思うので、既に実装されているこちらのブログを見てください！
ブログ発信をするとお金を稼げる理由 │ つくるブログ
[aside type="warning"]現在リンク先の記事では見出しの固定が解除されています（テーマが変わったため）。
なので今この記事を参考にしてください♪↑見出しが固定されていませんか？[/aside]
見出しがブラウザやスマホの画面上部までくると、消えずに固定されたままになると思います。
本文が長くなると読者は「今、何の話を読んでいたんだっけ？」ってなることも・・。
そうすると、離脱の原因にもなりかねません。
でも、こんな風に見出しが固定されていたら、「今、何の話をしているか」がより伝わりやすいですよね！
カスタマイズ方法
これから紹介するコードをコピペするだけでOKです。
コピペ先は「親テーマ/子テーマのスタイルシート(外観→テーマの編集)」か「追加CSS(外観→カスタマイズ)」からお好みでお選びください♪
子テーマについては「STORK（ストーク）で子テーマを導入する方法」で詳しく説明してあります。
WordPressでCSSを追加する3つの方法と各メリット・デメリット
[box class="blue_box"]/* --- 見出しを固定する --- */
.entry-content {
overflow: initial;
position: relative;
}
.entry-content h2{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100000;
}
@media only screen and (max-width: 767px){
#inner-content {
overflow: initial;
}
}
@media only screen and (min-width: 768px){
#container {
overflow: initial;
}
}[/box]
注意点
見出しの行が２行だと、それ以降の見出しが1行だった場合、1つめに重なって表示されてしまいます。
その場合は、
.entry-content h2 に min-height:48px;を追加すればOKです！
min-heightの数値はデザインに合わせて高さを調節して見てくださいね。
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]この記事では min-height:4em; にしてみたよ！[/voice]
表示されないブラウザ
IE,Edgeは対応していないので、スクロールに合わせて固定されません。
また、古いOSのiPhone,Androidでも表示されないかもしれません。
特定の記事だけに反映させたい
こちらの記事を参考にすると、記事ごとにデザインが変更できます。
「長くなった記事だけに反映させたい！」
そんな人は参考にしてみてください。
おわりに：コピペで簡単に見出しに工夫を！
「今なんの話を読んでるっけ……」と感じたことは1度はあるはず。
どうしても1つの見出しに対しての内容が長くなってしまうときは、見出しを固定して離脱率を防ぐ工夫も必要だと思います。
コピペで簡単に実装できるので、是非参考にしてみてください！
[aside type="normal"]この記事に協力していただいた方
[voice icon="https://palulog.com/wp-content/uploads/2017/09/IMG_4675-min.jpg" name="" type="l thanks"]
サンダーガール（@thundergirl6063）さん
「自分が悩んだことを人に同じ時間悩ませない」がテーマのママパパ向けブログを運営。
家族との時間・子どもの成長を大切にされています。またWEBにも詳しく、『エックスサーバー「HTTP/2とnginx対応」とは。分かりやすく例えで解説！』はエックスサーバーユーザー必見の内容となっています。
[/voice][/aside]
あなたが素敵なブログをつくれますように。ぱるでした！