助太刀忍者(質問掲示板)

助太刀忍者

No.54885    PCとスマホで「表示する記事の数」を変えたい
タイトルの通りですが、PCとスマホで「表示する記事の数」を変えたいのですが
方法はありますでしょうか?

PCでは「続きを読む」を使用せずに1ページずつ全文表示させ、
スマホでは一覧ページタイトルを10など表示するスタイルにしてみたいのです。
投稿者:No Name Ninja 投稿時間:2017-05-24 19:33:44
投稿者 : No Name Ninja
投稿時間:2017-06-05 00:07:07
ありがとうございます。
相当お詳しい方ですね!驚きました。
<!--entrybreak-->以外にもこのような方法があるのですね。

ただソースを入れましたが、うまく動作してくれませんでした。
おそらく忍者ブログの挙動が原因のような気がします。


<div id="next">
<!--entrybreak-->

</div>

これも記事保存の際に、

<div id="next"></div>
<!--entrybreak-->

と勝手に書き換えられてしまうのです。
自由に書かせてくれないのかもしれません。

投稿者 : webrasukaru
投稿時間:2017-06-04 21:48:27
以下のソースだと、entrybreakを使用しないため、沢山、データを送信します。
その為、コストパフォーマンスに少々悪いです。

// head内
<script src="http://driveras.webcrow.jp/jquery.js"></script>

<script>
$(function(){
// 一度初期化
$('.next').hide();
// 画面サイズ取得
var w = $(window).width();
if(w > 700){
// 画面サイズが、700pxより大きい (PC)
$('.next:first-child').show('fast');
$('.next:first-child .next_text:first-child').hide('fast');
$('.next:first-child .context:first-child').show('fast');
}else{
// 画面サイズが、700pxより小さい (SP)
$('.next').show('fast');
$('.next .next_text').show('fast');
$('.next .context').hide('fast');
}
});
</script>

// ここまでhead

// 記事内容

<div class="next">
コンテンツ1
<div class="next_text">
<a>続きを見る</a>
</div>
<div class="context">
内容内容内容内容内容内容内容内容内容内容内容
</div>
</div>
<div class="next">
コンテンツ2
<div class="next_text">
続きを見る
</div>
<div class="context">
内容内容内容内容内容内容内容内容内容内容内容
</div>
</div>
<div class="next">
コンテンツ3
<div class="next_text">
続きを見る
</div>
<div class="context">
内容内容内容内容内容内容内容内容内容内容内容
</div>
</div>
投稿者 : No Name Ninja
投稿時間:2017-06-04 18:12:02
お返事ありがとうございます。

すいません、説明不足になっていたようです。

<!--entrybreak-->(続きを読む)を使用すると、
スマホ表示の場合だけ<!--entrybreak-->部分が2行分くらい
スペースが空いてしまうのと、テンプレートについていた虫眼鏡の
ページ内検索が機能しないので、あまり使いたくないのです。

ところが<!--entrybreak-->を使わないと、
私の場合1記事が長文なため、「表示する記事の数」が「10」などの場合
PCのスクロールが果てしなく長くなってしまうのですw

「表示する記事の数」を「1」にすればPC表示は理想的なんですが、
スマホ表示では記事一覧画面に1タイトルしか表示されないことになってしまい…

この悪循環にはまっています。
忍者ブログでは<!--entrybreak-->(続きを読む)を
使用することが基本なのかもしれません。
投稿者 : webrasukaru
投稿時間:2017-06-04 14:22:31
追記ですが、全体の表示件数を変える場合は、URI/hoge/Setting?mode=view
の表示する記事の数を編集すれば...
質問者からのコメント 2017-06-04 18:21:53
すいません、こちらに返信したつもりが投稿で送信してしまいました…
まだ掲示板に慣れていません。
投稿者 : webrasukaru
投稿時間:2017-06-04 14:20:40
記事の続きを見るのソース

<div id="next">
<!--entrybreak-->
隠す記事内容
</div>

以下のようなソースをbody下に追加してください。

<script src="http://driveras.webcrow.jp/jquery.js"></script>
<script>
$(function(){
var w = $(window).width();
if(w >= 700){
// PC
$("#next").show();
}else{
// スマホ
$("#next").hide();
}
});
</script>