mybestみたいな固定ヘッダー追従目次もどきを作ったので解説する

2024年4月26日

SEOのためには離脱率を減らす事が大事

この間上の動画を見ていたんだ。SEO関連で業界最速でYouTube動画で報告してくれている人だ。その中で言及していたのが、読者の行動が検索順位に影響しているかもってこと。

まぁこれまでもページ滞在時間とかSEOに効くとか言われてきた。これは正直Google先生しか分からない話だ。もちろん今回解説された方もあくまでも推定で話をされている。

我々みたいなゲスいブロガーが大事にしているのは、じゃあ何すればいいかと、そのやり方だ。今回動画の中で言及されていた例がmybestのUX対策、固定追従ヘッダーで記事の特定の位置に飛べるようにしている。

たしかにmybestは色々考えて設定している気がする。長文だと前置き長くて知りたい情報がないってことはよくある。スマホだと視認できる範囲が狭いし探索性が乏しいので更に苦戦する。知りたい情報が記事中のどこにあるんだ(ブチギレ)は実生活でよくある話。

このようなときにスマホ画面でもわかりやすい固定追従ヘッダーを準備してくれるのはありがたい。流石mybestだね。

早速、パクって導入しようと思ったわけだ。一番手っ取り早いのは「unify ナビゲーション」という有料プラグイン(日本製)。他のプラグインも調べたけど個別に投稿ページに設定するとなると有料になるものがほとんど(自分が調べた限り全て有料で海外製)。

ということで自分でCSSとHTMLで実装することとした。導入例は以下。

https://haveafunwithenglish.com/grade1essay-350

このページは英検1級ライティングのテンプレートを知りたいと思って検索するユーザーがほとんどなんだけど、いかんせん記事が長い。そこで固定追従ヘッダーでテンプレート解説部分に飛べるようにした。

さらに人気がある自分が過去問で書いた英作文例部分に飛べるようにした。

こんな感じのことが出来る。一応なんも分からん人向けに「ある程度」丁寧に解説はする。これで分からん場合は他をあたってくれ。

ちなみに今回紹介するやり方はSwell限定。他のテーマは知らん。自分で他のブロガーを調べてくれ。

あと私自身はプログラマーではない(理系なので、ある程度CSS,HTMLは分かる)。プロから解説してもらいたいなら金払ってプロから習ってくれ。

固定追従ヘッダーの作り方

固定追従ヘッダーの作り方は以下になる。

今回は少々手順が入り組んでる、作業自体も多分15分位かかると思う。

申し訳ないけど多少の面倒は覚悟してほしい。作業が面倒なら上述した有料プラグインの購入が良いだろう。

ブログタイトルのヘッダー固定追従を解除する

Swellの場合ブログタイトルがヘッダー固定追従設定になっている。これが重なって邪魔なので設定を解除する。

ここは簡単すぎるのでスクショで説明しない。以下の手順で進めてほしい。

カスタマイズ→ヘッダー→ヘッダーの追従設定→PC・SP両方のチェックをはずす。

これで1つ目の作業クリア。

ブログパーツで横形式の簡略目次を作る

次はSwell固有機能の「ブログパーツ」で横形式の簡略目次を作る。

ダッシュボード→ブログパーツ→新規投稿を追加　と進んでほしい。

【捕捉】
導入しているプラグインによっては、ここで「wp-revisions-control プラグインでエラーが発生したためレンダリングできません。」と薄い赤で警告が出るけど問題ない。無視でOK。目障りなら警告文の横の☓をクリック。

タイトルを適当に追加して作業開始する。ここは自由にやってくれればいいけど私のやり方を紹介する。

やろうとしていることは「ダブルカラム＋ボタンで横形式の簡略目次を作る」ことだ。

この部分は少々詳し目の解説になる手順は以下。

カラムを設定する

上の画像の通りだけど、1️⃣〜3️⃣と操作してカラムを開いてくれ。

自分の場合は等サイズのダブルカラムにした。

モバイルでは縦に並べるはチェックしない

上の画像のように1️⃣〜2️⃣と設定してほしい。「モバイルでは縦に並べる」をアクティブしないでくれ。これでスマホで横並びになる。

ボタン設定をする

ここからはボタン設定になる。見栄えの問題なので好きにしていい。

自分の場合は1️⃣〜3️⃣のように通常のボタンを選択。

こんな感じのボタンを作った。ボタン背景色は濃い色を推奨する。次にボタン内のリンクを設定する。

記事内リンクのURLを作る

記事内のリンクを作る。まず設定する投稿ページに移動する。

自分の場合「固定追従ヘッダーの作り方」の部分にカーソルをあて、右側の「高度な設定」の「HTMLアンカー」の入力欄に1と記入する。

そうすると記事内の指定位置にジャンプするURLを設定できる。私が設定した場合は以下となる。

記事のURL/#1

別に1でなくてもいいし、わかり易けりゃなんでもいい。

おなじことを「まとめ」にも設定。2にした。

ブログパーツに戻りボタンのURLを設定する

ブログパーツに戻り先ほど設定した記事内のリンクをボタンに付与する。

上の画像の通りだ。ULRは先程解説した通り、「記事のURL/#自分が設定した文字」とする。

自分の場合は「記事のURL/#1」となる。

ブログパーツを公開する

ブログパーツを公開してくれ、上の画像みたいに「公開」ボタンをクリックするだけ。

ブログパーツの番号をコピー

ブログパーツの一覧画面にいき、先程作ったブログパーツの呼び出しコードを選択してコピーする。

上の画面は私の場合なので注意。

導入したい投稿ページに簡略目次を設定する

最後に設定したいページに戻り、HTMLとCSSの設定をする。やり方のみ解説でコードの詳しい解説はしない。

詳しく知りたい人はGoogleで検索して自分で勉強してほしい。

設定は投稿ページ内だけになる。ほかページに影響はしない点は強調しておく。

投稿ページタイトル直下にHTMLを設置

コピーしたブログパーツのコードをコピペ

</div>

投稿ページタイトルすぐ下の本文入力欄をカスタムHTMLにして以下のHTMLコードを入力する。

その時、黄色下線部分は先程コピーしたブログパーツの呼び出しコードをペーストする。

私の場合は上の画像の青枠の様になる。

投稿ページの下部分にあるカスタムCSSにコードをコピペ

投稿ページの下までスクロールするとカスタムCSSという設定項目がある。

Swellオリジナル機能で、このページのみに必要なCSSの設定をすることが出来る。ここに以下のコードをコピペする。

.mokuji {
position: sticky;
position: -webkit-sticky;/* Safari用 */
top: 0;
z-index: 2;
width:auto;
}

これで完了になる。今回の自分の解説ページのようにヘッダー追従型のメニューができるだろう。

パソコンとスマホページで確かめてほしい。

まとめ

今回はmybestみたいなヘッダー固定追従横向きの簡略的な目次の解説をした。

HTMLとかCSSの部分は多くのブロガーには難しいと思うのでコピペにしたほうが無難。

ブログパーツの中身部分のデザインは各々やりたいようにやってくれれば良い。タブブロックにすれば面白いかもしれない。あれは横スクロールも設定できるし。

一通り流れを把握したら、好きに調整してみると良いだろう。あくまでもブロガーレベルの対応がこのくらいになる。

もっと高みを目指すなら有料プラグインの購入が望ましいと思う。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

あらたんネット

mybestみたいな固定ヘッダー追従目次もどきを作ったので解説する

SEOのためには離脱率を減らす事が大事