お家で「好き」を仕事にしたい!ぱるのブログ

ぱるろぐ

ブログカスタマイズ

ストークで記事内の見出しをスクロールに合わせて固定する方法

投稿日:2017年9月17日 更新日:



突然ですが、記事を読んでいて「今なんの話だっけ?」って思うことありませんか?

今回は有料の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]

注意点

見出しの行が2行だと、それ以降の見出しが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でも表示されないかもしれません。

特定の記事だけに反映させたい

こちらの記事を参考にすると、記事ごとにデザインが変更できます。

「長くなった記事だけに反映させたい!」

そんな人は参考にしてみてください。

特定の記事のみCSSを反映

おわりに:コピペで簡単に見出しに工夫を!

「今なんの話を読んでるっけ……」と感じたことは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]

あなたが素敵なブログをつくれますように。ぱるでした!

おすすめ関連記事

-ブログカスタマイズ

Copyright© ぱるろぐ , 2021 All Rights Reserved.