宮崎のWEB制作アドエス

カスタム投稿タイプを使った固定ページでページ内遷移のアンカーを使用してハマったこと

2014.10.06

前回サイドバーの高さをメインに合わせる記事を書きましたが、それの続きというかその時にハマったことです。

 

やりたかったのは、「ページ内の該当アンカーポイントにサイドバーのリンクからスルスルーっとページ内遷移したかった」というだけなんですが、思わぬ落とし穴がありました。

 

普通の固定ページだと遷移したい箇所にアンカーを作成してjsでスルスルーっと動かすだけですよね。いわゆるスムーススクロール的なjsを使用したページ内遷移です。
ただ、今回は記事内容を毎年更新できるようにしたかったんです。具体的には年中行事の案内ページなんですが、行事の実施日程が毎年少しずつ変動があるので更新できるようにしたいというものでした。

 

そこで、案内記事を投稿で作成して固定ページに並べる方法をとりました。

 

・Custom Post Type UI
・Custom Field Template

 

上の2つのプラグインを使って投稿内容をテンプレート化し、記事入力時にアンカーポイントのIDも設定するようにしてしまうという手段をとりました。

文章で説明すると難しいですが、レイアウト的にはこういうことです。▶DEMOicon_link

 

これの各リンク内容が投稿記事内容だと思ってください。落とし穴というのはこのレイアウトにありました。ページ内で操作する分には全く問題ないですが、ページ外から直接アンカーポイントへ飛ぶとレイアウトが崩れる(mainの中のアンカーポイント以前の部分がヘッダーの下へ潜り込んでしまう)ということが判明したのです。

 

こんな感じになります。▶DEMOicon_link

 

初めて見るタイプの現象で、いろいろ検索したりして調べてみたところ、どうやら親要素にoverflow:hiddenを使うと起こる現象だということがわかりました。
なので対策としては親要素にoverflow:hiddenを使わなければ良いのです。
ですが、今回は投稿記事を並べるレイアウトです。
つまり、投稿記事を並べる=記事の内容次第でheightが変動する(サイトの高さが変動する)=サイドバーの高さをメインに合わせる必要がある

 

ということで、前回書きましたoverflow:hiddenを使った高さ調整を行う必要がありました。
サイドバーの高さをメインと合わせる方法の備忘録icon_link

 

対策としては他ページからのリンクはjsを使用してページ遷移をしてから該当アンカーポイントまでスクロールするという方法をとりました。
ただ、根本的な解決策ではないので今後の制作には気をつけようと思いました。
以上、カスタム投稿タイプを使った固定ページでページ内遷移のアンカーを使用してハマったことでした。