JimdoCafe 広島

広島市内でモットJimdo!JimdoCafe 広島

ブログ1件表示のときに、「前のページにもどる」ボタンを設置しました。

ブログをページ階層下に表示しているとき、

ファイルのメニュー構成としては、どこにも属していない(あくまでブログを親としたものになる)

ので、(特にこのサイトでは)サブメニューが上部から消えてしまうんですよね。。。

 

でも、見ている人にとっては、ページ階層を下ってきたところなので、きっとすぐ見ていたところに戻りたいハズ。

前のページに戻るボタンを設置。


そこで、ひとつ前のページに戻るボタンを、ブログの時のみ、表示させるようにしてみました。

「ブラウザの履歴」をみて、前のページにもどす、古風な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階層目以降がでてこないのでちょっと戻りにくかったり、しますよね。
※記事一覧ページから記事詳細に入った場合など


もしかして、ぱんくずリストを使えばこれって解消されるのかな・・・(未検証)