匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

はじめまして、初めての質問です。

はてなブログで、PCで記事を見ると一番下に「前の記事」「次の記事」というページ送りがちゃんと表示されるのですが、スマホだと表示されません。Proを使っていないので、スマホだけ変な設定を入れている、ということもないと思うのですが、どうすればスマホでもページ送りが出せるようになりますでしょうか。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2018/11/27 23:55:31
  • 終了:2018/11/30 07:55:40

ベストアンサー

匿名回答2号 No.1

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2018/11/28 20:58:21

ブログのデザイン設定が「レスポンシブデザイン」(PCでもスマートフォンでもおなじデザインになるテーマ) に設定されているかいないかで対処方法がかわってきます。
上記については、PCではてなブログをひらき、デザイン設定の「スマートフォン」→「詳細設定」で現在の設定を確認・変更できます。

レスポンシブデザインに「なっていた」場合

デザイン設定の「カスタマイズ」→「デザインCSS」で、以下の行あたりがおかしな設定になっていないかをご確認ください。

  • div.pager
  • span.pager-prev
  • span.pager-next

デザインCSSがよくわからない場合、もしくはデザインCSS自体を (上記以外の行もふくめて) 変更したおぼえがない場合、公式テーマ (さいしょからテーマ一覧にあるテーマ) を利用している場合ははてなに、インストールしたテーマ (テーマ ストアから自分でテーマ一覧に追加したテーマ) を利用している場合はそのテーマの作者に適切な設定をご確認ください。

レスポンシブデザインに「なっていなかった」場合

記事一覧の画面では一覧のすぐ下に「次のページ」ボタンがあります。前のページにもどる機能はありません。(そのため最終ページではページ移動のボタンが表示されません)
1つの記事が表示される画面では、記事の下 (設定している場合はシェアボタンや関連記事などよりも下) に古い記事のタイトルと新しい記事のタイトル、そして「記事一覧」のボタンがそれぞれ表示されます。
レスポンシブデザインになっていないのに表示されないという場合は、おつかいのスマートフォン、もしくはブラウザーになんらかの異常が発生している場合があります。レスポンシブデザインではない場合に非表示にするような設定はないため、まずはほかのかたのはてなブログ (レスポンシブデザインになっていないもの) でも同様の現象が発生していないかを確認してみてください。

匿名質問者

回答ありがとうございます。確認したところ、レスポンシブデザインになっていましたので、デザインCSSを確認したところ、以下のようになっていました。

/* <system section="theme" selected="8599973812270629022"> */
@import url("https://blog.hatena.ne.jp/-/theme/8599973812270629022.css");
/* </system> */

.entry-content p {margin: 1.7em 0;}
.entry-content {font-size:16px;line-height:1.7em;}

#blog-title {
margin: 18px auto 18px auto;
padding: 0;
}

.entry-title {
font-size: 20pt;
}


おそらくは該当の記述はないように思います。また、このテンプレートの作成者はすでにコメントでの問い合わせを受け付けていないため、質問するところがなく、ここを頼りにさせて頂いた次第です。なにかヒントが頂けると助かります、よろしくお願いします。

2018/11/29 00:27:56
匿名回答2号

ありがとうございます。
これを修正するのは、デザインCSSの勉強にもなるとおもうので、CSSの各行の挙動も (一部) 解説します。修正方法だけ知りたい場合は、一番下までとばしていただければとおもいます。

/* <system section="theme" selected="8599973812270629022"> */
@import url("https://blog.hatena.ne.jp/-/theme/8599973812270629022.css");
/* </system> */

ということは、テーマ ストアからインストールしたテーマなので、https://blog.hatena.ne.jp/-/theme/8599973812270629022.css からデザインCSSをよみこむ、という動作になっていますね。
そのため、上記URLをひらいてページ内検索をしてみたところ、「div.pager」ではなかったものの、「pager」の文字がいくつかみつかりました。おそらくこれに原因があるので、しらべてみました。以下が該当の行ですね。

/* Pager */
.pager {
  margin: 1em 0;
  display: block;
  *zoom: 1;
}
.pager:after {
  display: block;
  visibility: hidden;
  font-size: 0;
  height: 0;
  clear: both;
  content: ".";
}
.pager .pager-prev {
  float: left;
  text-align: left;
  width: 45%;
}
.pager .pager-next {
  float: right;
  text-align: right;
  width: 45%;
}

このなかには問題はみつかりませんでした...。
...しかし、デザインCSSになんらかの原因があるのはまちがいないと、Webインスペクタ (Webサイトの開発者向けの特別な機能) を利用してしらべてみたところ、以下のような表示がみつかりました。
@media screen and (max-width:640px){  .pager-permalink{    display:none;  }}

@media screen and (max-width:640px)

これは、screen (画面) でみていて、画面の横の解像度が640ピクセル以下の場合のみ適用するCSSという意味です。(PCでみている場合などは画面そのものの解像度ではなくブラウザーの画面の大きさが基準になるので注意)
※ たとえば screen を print にすると、プリンターから出力してみている場合に適用されるCSSに変更されます。screen と print 以外もしりたい場合はこちらのサイトも参照。http://msugai.fc2web.com/web/CSS/media.html#mediatype

  .pager-permalink{
    display:none;
  }

これは pager-permalink とあるのでページおくりの部分ですね。

<div class="pager-permalink">

みたいに、HTML内に class="pager-permalink" という記述がある部分に適用されるCSSになります。(はてなブログのページ送り部分にはこの記述があります)
display:none となっています。意味はそのままで、「表示しない」ということですね。おそらくこのテーマの作者はスマートフォンの小さい画面でページ送りを表示させると見づらくなるので非表示に設定したんでしょうね。テーマ紹介ページに書いている「デザインを最小限まで削ぎ落し」という性質がよくあらわれているとおもいます。

...というわけで、上記の「表示しない」部分を「表示する」に設定すればいいわけです。
そのため、デザインCSSに、以下の行を追記して保存しましょう。

@media screen and (max-width:640px){
.pager-permalink{
display: block !important;
}
}

※ かっこのとじわすれに注意しましょう。(一番下の終わりかっこは2行にわたっています)
@media や .pager-permalink は上記で説明したので省略。
display: block とすることで、ブロック要素 (上下に改行がはいる要素 : <div> タグのデフォルト設定) に設定します。
また、 !important を記述することで、その行にかぎってCSSを適用する優先順位を無視して、この記述をおこなった行のCSSを最優先で適用します。(ただし !important の記述しすぎには注意が必要)

表示させたい場合はぜひおためしください。デザインCSSに以下の行を追記ですよ。

@media screen and (max-width:640px){
.pager-permalink{
display: block !important;
}
}
2018/11/29 18:49:32

その他の回答(0件)

匿名回答2号 No.1

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2018/11/28 20:58:21ここでベストアンサー

ブログのデザイン設定が「レスポンシブデザイン」(PCでもスマートフォンでもおなじデザインになるテーマ) に設定されているかいないかで対処方法がかわってきます。
上記については、PCではてなブログをひらき、デザイン設定の「スマートフォン」→「詳細設定」で現在の設定を確認・変更できます。

レスポンシブデザインに「なっていた」場合

デザイン設定の「カスタマイズ」→「デザインCSS」で、以下の行あたりがおかしな設定になっていないかをご確認ください。

  • div.pager
  • span.pager-prev
  • span.pager-next

デザインCSSがよくわからない場合、もしくはデザインCSS自体を (上記以外の行もふくめて) 変更したおぼえがない場合、公式テーマ (さいしょからテーマ一覧にあるテーマ) を利用している場合ははてなに、インストールしたテーマ (テーマ ストアから自分でテーマ一覧に追加したテーマ) を利用している場合はそのテーマの作者に適切な設定をご確認ください。

レスポンシブデザインに「なっていなかった」場合

記事一覧の画面では一覧のすぐ下に「次のページ」ボタンがあります。前のページにもどる機能はありません。(そのため最終ページではページ移動のボタンが表示されません)
1つの記事が表示される画面では、記事の下 (設定している場合はシェアボタンや関連記事などよりも下) に古い記事のタイトルと新しい記事のタイトル、そして「記事一覧」のボタンがそれぞれ表示されます。
レスポンシブデザインになっていないのに表示されないという場合は、おつかいのスマートフォン、もしくはブラウザーになんらかの異常が発生している場合があります。レスポンシブデザインではない場合に非表示にするような設定はないため、まずはほかのかたのはてなブログ (レスポンシブデザインになっていないもの) でも同様の現象が発生していないかを確認してみてください。

匿名質問者

回答ありがとうございます。確認したところ、レスポンシブデザインになっていましたので、デザインCSSを確認したところ、以下のようになっていました。

/* <system section="theme" selected="8599973812270629022"> */
@import url("https://blog.hatena.ne.jp/-/theme/8599973812270629022.css");
/* </system> */

.entry-content p {margin: 1.7em 0;}
.entry-content {font-size:16px;line-height:1.7em;}

#blog-title {
margin: 18px auto 18px auto;
padding: 0;
}

.entry-title {
font-size: 20pt;
}


おそらくは該当の記述はないように思います。また、このテンプレートの作成者はすでにコメントでの問い合わせを受け付けていないため、質問するところがなく、ここを頼りにさせて頂いた次第です。なにかヒントが頂けると助かります、よろしくお願いします。

2018/11/29 00:27:56
匿名回答2号

ありがとうございます。
これを修正するのは、デザインCSSの勉強にもなるとおもうので、CSSの各行の挙動も (一部) 解説します。修正方法だけ知りたい場合は、一番下までとばしていただければとおもいます。

/* <system section="theme" selected="8599973812270629022"> */
@import url("https://blog.hatena.ne.jp/-/theme/8599973812270629022.css");
/* </system> */

ということは、テーマ ストアからインストールしたテーマなので、https://blog.hatena.ne.jp/-/theme/8599973812270629022.css からデザインCSSをよみこむ、という動作になっていますね。
そのため、上記URLをひらいてページ内検索をしてみたところ、「div.pager」ではなかったものの、「pager」の文字がいくつかみつかりました。おそらくこれに原因があるので、しらべてみました。以下が該当の行ですね。

/* Pager */
.pager {
  margin: 1em 0;
  display: block;
  *zoom: 1;
}
.pager:after {
  display: block;
  visibility: hidden;
  font-size: 0;
  height: 0;
  clear: both;
  content: ".";
}
.pager .pager-prev {
  float: left;
  text-align: left;
  width: 45%;
}
.pager .pager-next {
  float: right;
  text-align: right;
  width: 45%;
}

このなかには問題はみつかりませんでした...。
...しかし、デザインCSSになんらかの原因があるのはまちがいないと、Webインスペクタ (Webサイトの開発者向けの特別な機能) を利用してしらべてみたところ、以下のような表示がみつかりました。
@media screen and (max-width:640px){  .pager-permalink{    display:none;  }}

@media screen and (max-width:640px)

これは、screen (画面) でみていて、画面の横の解像度が640ピクセル以下の場合のみ適用するCSSという意味です。(PCでみている場合などは画面そのものの解像度ではなくブラウザーの画面の大きさが基準になるので注意)
※ たとえば screen を print にすると、プリンターから出力してみている場合に適用されるCSSに変更されます。screen と print 以外もしりたい場合はこちらのサイトも参照。http://msugai.fc2web.com/web/CSS/media.html#mediatype

  .pager-permalink{
    display:none;
  }

これは pager-permalink とあるのでページおくりの部分ですね。

<div class="pager-permalink">

みたいに、HTML内に class="pager-permalink" という記述がある部分に適用されるCSSになります。(はてなブログのページ送り部分にはこの記述があります)
display:none となっています。意味はそのままで、「表示しない」ということですね。おそらくこのテーマの作者はスマートフォンの小さい画面でページ送りを表示させると見づらくなるので非表示に設定したんでしょうね。テーマ紹介ページに書いている「デザインを最小限まで削ぎ落し」という性質がよくあらわれているとおもいます。

...というわけで、上記の「表示しない」部分を「表示する」に設定すればいいわけです。
そのため、デザインCSSに、以下の行を追記して保存しましょう。

@media screen and (max-width:640px){
.pager-permalink{
display: block !important;
}
}

※ かっこのとじわすれに注意しましょう。(一番下の終わりかっこは2行にわたっています)
@media や .pager-permalink は上記で説明したので省略。
display: block とすることで、ブロック要素 (上下に改行がはいる要素 : <div> タグのデフォルト設定) に設定します。
また、 !important を記述することで、その行にかぎってCSSを適用する優先順位を無視して、この記述をおこなった行のCSSを最優先で適用します。(ただし !important の記述しすぎには注意が必要)

表示させたい場合はぜひおためしください。デザインCSSに以下の行を追記ですよ。

@media screen and (max-width:640px){
.pager-permalink{
display: block !important;
}
}
2018/11/29 18:49:32
匿名質問者

質問者から

匿名質問者2018/11/30 13:14:09

おおお…!
ものすごく丁寧でわかりやすい解説をして頂きありがとうございました!
大変勉強になりました。そして、無事にページャーを復活させることができました!
本当にありがとうございました!

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません