ブログをページ階層下に表示しているとき、
ファイルのメニュー構成としては、どこにも属していない(あくまでブログを親としたものになる)
ので、(特にこのサイトでは)サブメニューが上部から消えてしまうんですよね。。。
でも、見ている人にとっては、ページ階層を下ってきたところなので、きっとすぐ見ていたところに戻りたいハズ。
前のページに戻るボタンを設置。
そこで、ひとつ前のページに戻るボタンを、ブログの時のみ、表示させるようにしてみました。
「ブラウザの履歴」をみて、前のページにもどす、古風なJavascriptを利用しています。
簡単にかくと、
<a href="javascript:window.history.back();">前のページに戻る</a>
というリンクを入れているだけ。
※独自レイアウトHTMLに挿入しました。試してはいませんがウィジェット・HTMLや、文章の外部リンク設置・html編集でも可能かも?(未検証)
ブログのところにだけ、表示させたい。
独自レイアウトに記入したので、このままだと全ページで表示されてしまいます。
ボタンの設置は、ブログ1件表示の時だけでいいので、ブログ表示と、それ以外とで切り分けます。
今回は、CSS(スタイルシート)を使いました。
ブログ表示のとき、ページのHTML、<body>部分に、"cc-page-blog"というクラスが自動で追加されています。
(ブログだよ~というシステム側の目印のようなもの)
そこで、リンクをpタグでくくり、任意のクラス名をつけ、
<p class="xxxxx"><a href="javascript:window.history.back();">前のページに戻る</a></p>
※xxxxは任意のクラス名前
スタイルシートでそのpタグを、bodyに"cc-page-blog"クラスが付与されているときのみ表示する、という設定をしました。
.xxxxx{display:none;}…普段は非表示。
.cc-page-blog .xxxxx{display:block;}…"cc-page-blog"配下のときのみ、表示
あとは表示させたいスタイルを設定するだけ。
HTMLソース上には常に出ているので、あまり使いたくないですが、今回はこれで解決。
これで、ブログの単一記事を読んだあとに、メニューからいたはずのページが消えていて、
戻るのに数アクション増える、、、ということがなくなりました。ちょっと便利。
このサイトの独自レイアウトでは、コンテンツ上部にサブメニューとして、今いる階層のメニューが表示され、今いるページはすこしだけデザインが変わるようにしています。ところが、ブログの1件表示のときは、どこの階層にも属していないので、サブメニューの表示がなくなります。
ユーザーのかたは、どこかしらの階層に入って詳細にたどりつくので、(トップ階層はメインメニューとして表示されていますが)2階層目以降がでてこないのでちょっと戻りにくかったり、しますよね。
※記事一覧ページから記事詳細に入った場合など
もしかして、ぱんくずリストを使えばこれって解消されるのかな・・・(未検証)