モバイルで「スライドインメニュー」選択時にも関連記事下にサイドバーを表示させたい

PR 2015/7/18

このトピックには4件の返信、2人の参加者があり、最後にわいひらにより11年、 2ヶ月前に更新されました。

4件の返信スレッドを表示中

投稿者

投稿
- 2015年7月17日 4:11 PM #29455
  
  七瀬
  ゲスト
  
  わいひらさん、いつも大変お世話になっております。
  
  モバイル表示時のスタイルについての個人的希望なのですが、現在、「スライドインメニュー」を選択すると、関連記事下にサイドバーが表示されなくなります。
  
  これはおそらく、「スライドインメニュー」の中に「サイドバー」があるため、サイドバーの中身が見たい場合はそれを押せば良いとのお考えなのだろうと思います。
  
  ただ、私個人的には、「スライドインメニュー」のときでも、記事をざーっと下まで読んで、そのままサイドバーが表示された方が、余分なクリック（タップ）なく新着記事や人気記事が見られるので便利だなと感じています。
  
  そこで、「スライドインメニュー」のとき、関連記事下にサイドバーを表示するかしないか選べる仕様になったらありがたいなと思い、書き込ませていただきました。
  
  ご検討いただけると大変幸いです。
  よろしくお願いいたします。
- 2015年7月17日 4:44 PM #29457
  Hidekichi
  ゲスト
  jqueryでなら、
```
(function($){
  $(function(){
    $(移動させたいセレクタ).clone().appendTo(移動させたいセレクタを入れるセレクタ);
  });
})(jQuery);
```
  でしょうか。
  
  appendTo()は、何かしらのセレクタの一番下に入ります。….appendTo(“#body”);とすると#bodyの一番下に挿入されます。.clone()することで複製することになります。サイドパネルを消してしまいたいと思われることもあるでしょうが、消してしまうと操作するボタン(上下どちらかに入りついているバーのサイドバーを開くリンク)等がややこしいことになる可能性があるためです。
  消してしまう場合は、それなりのカスタマイズを施す必要が出てくるかも知れません。消す場合は.remove(消したいセレクタ)で消えますが、オススメしません。
  
  あくまでも複製を移動させる(目的の場所に挿入する)と言うのが目的になってます。サイドパネルを使用したい人はそちらを、スクロールで済ませたいという人はそちらでと言う感じになります。
  
  他にも、insertBefore()、insertAfter()、prependTo()など移動させる方法は色々とあります。
  
  移動させたサイドパネルの中身は、そのままのhtmlの状態で挿入箇所に入れられます。なので、例えば.testというブロック(セレクタ)の最後に挿入したい場合は、
  
  #(サイドパネルの移動させたいセレクタ).clone().appendTo(“.test”); となります。
  
  上記を実行すると構造的には、
```
<body>
  <div class="サイドパネル">目的の部分</div>
  <div id="container">
    <div class="main">
      <div class="test">
         <a href="#">test</a>
         <p class="p-test">testtest</p>
         //
         //他にも何かしらの表示があったとして
         //
         目的の部分の複製はここに入ります
      </div>
    </div>
  </div>
  <footer>2015 test</footer>
</body>
```
  PHPおよび、Simplicityのおすすめ設定はまたわいひらさんが何かしらレスくれるだろうと思います。あるいは自力で頑張れと言うことになるかも知れませんが、だいたいのヒントぐらいは…わかりませんけどね（笑）
  
  ちなみに、移動させた箇所に対するcssは書かねばなりません。例えば上記であれば、
```
.test 移動させたセレクタ .related-entry img {
  width: 100%;
}
```
  など。その場所で複製したセレクタをどのようにスタイルするかを設定する必要があるわけです。
  
  これらはjQueryとcssなので、子テーマのjavascript.jsとstyle.cssで行うことができます。つまりは親テーマがアップデートされても仕様が大きく変わらない限り制限を受けません。
- 2015年7月17日 5:32 PM #29467
  
  わいひら
  キーマスター
  
  こちらは、スライドインメニュー機能との兼ね合いがあるので、そういう仕様になってしまいます。
  そのような実装にするには、結構な手間がかかるうえに、あまり利用者もおられないと思うので、機能追加はしないと思います。
  どうしても表示する場合は、スタイルシートで細かく設定するか、PHPでテンプレートをカスタマイズして各自で実装していただくしかないかもしれません。
- 2015年7月17日 7:06 PM #29471
  
  七瀬
  ゲスト
  
  Hidekichiさん
  先日は別トピックにてお世話になりました！
  とても専門的で詳しいご回答をまことにありがとうございます。
  知識量が豊富ですごいです。
  Hidekichiさんが書いてくださったことを参考に、じっくり試行錯誤してみようと思います。
  私一人の力では見当もつかないことだったので大変ありがたかったです。
  ご親切に、本当にありがとうございました！
  
  わいひらさん
  ご検討いただいてまことにありがとうございました。
  結構な手間がかかることとは知らず簡単に希望を申し上げてしまい大変失礼いたしました。
  Hidekichiさんのコードをヒントに頑張ってみて、無理そうであればスライドインメニューは使わない方向で考えようと思います。
  サイト運営において、Simplicityには本当に助けられています。
  またフォーラムにてお世話になるときもあるかもしれませんがそのときはよろしくお願いいたします！
- 2015年7月18日 1:22 PM #29538
  
  わいひら
  キーマスター
  
  僕も、サイドバーを表示する前は、簡単だと思ったんですが、表示させてみると、Sidr（スライドに利用しているjQueryプラグイン）が、サイドバーの表示をことごとく変更しており、それをすべて元に戻すのは大変だったので、ちょっと無理そうだと感じました。
  ただ、そういった需要もあることは、今後の開発の参考にしたいと思います。
投稿者

投稿