質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

ページネーション

Webアプリケーションにおいて、1ページに収まらないコンテンツを、各ページへのリンクを並べてアクセスしやすくする手法をページネーションと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1218閲覧

ページネーションの「前へ」と「次へ」のliの幅だけを変えたい

kawausomaru

総合スコア29

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

ページネーション

Webアプリケーションにおいて、1ページに収まらないコンテンツを、各ページへのリンクを並べてアクセスしやすくする手法をページネーションと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/05 11:10

編集2020/11/05 12:27

wordpressのアーカイブページにページネーションを実装したいのですが
「前へ」と「次へ」の幅の大きさを変える方法が分からずに困っています

「function.php」

function the_pagination() { global $wp_query; $bignum = 999999999; if ( $wp_query->max_num_pages <= 1 ) return; echo '<nav class="pagination">'; echo paginate_links( array( 'base' => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ), 'format' => '', 'current' => max( 1, get_query_var('paged') ), 'total' => $wp_query->max_num_pages, 'prev_text' => '前へ', 'next_text' => '次へ', 'type' => 'list', 'end_size' => 3, 'mid_size' => 3 ) ); echo '</nav>'; }

「生成されるコード」

<nav class="pagination"> <ul class="page-numbers"> <li><a class="prev page-numbers" href="http://mutou3.local/news/page/1/">前へ</a> </li> <li><a class="page-numbers" href="http://mutou3.local/news/page/1/">1</a> </li> <li><span aria-current="page" class="page-numbers current">2</span> </li> <li><a class="page-numbers" href="http://mutou3.local/news/page/3/">3</a> </li> <li><a class="next page-numbers" href="http://mutou3.local/news/page/3/">次へ</a> </li> </ul>

試したこと

・first-of-type等を使用し区別しようとしたがページが偏移するとliが変更されるため、「前へ、次へ」が表示されていないページだと数字のwidthも変更されてしまい失敗

・function.phpのページネーションのコードに何かしらを追加してclass名を付与できないか調べたが該当するページが見当たらなかった

・class名「prev、next」を使用しaタグの幅にliを合わせるやり方を調べたが見当たらなかった

・'prev_text' => '← 前へ',
'next_text' => '次へ →',
と変更して文字数を変えたがliの幅に依存しているため折り返してしまった

・liの幅を指定しない状態を試したら見えなくなってしまい失敗

何を追加したら特定のliの幅を変化できるかわかる方ご回答よろしくおねがいします

SASS

margin-top:4rem; .page-numbers { text-align: center; li { margin: 0 2px; padding: 0; display: inline-block; background: $lightblue3; width: 50px; height: 50px; text-align: center; position: relative; border-radius: 10px; .current { background: $blue; border-radius: 10px; } a { vertical-align: middle; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; display: table; color: #fff; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; span { display: table-cell; vertical-align: middle; } &:hover, &:active { color: #000; background: #ccf; border-color: #00f; border-radius: 10px; } } span { display: table-cell; vertical-align: middle; vertical-align: middle; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; display: table; color: #fff; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .prev { } .next { } } } } コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatena19

2020/11/05 11:32

現状のCSSを提示てもらえますか。うまくいってないものでもいいので。
kawausomaru

2020/11/05 12:27

すみません コード追加しました ご確認のほどよろしくおねがいします
guest

回答1

0

ベストアンサー

現状のCSSが不明なので当てずっぽうで。

li には幅を設定しないで、li の子要素のa または span に幅を設定すればいいでしょう。

css

1ul.page-numbers > li { 2 display: inline-block; /* 横並び */ 3} 4 5ul.page-numbers > li > a.page-numbers, 6ul.page-numbers > li > span.page-numbers{ 7 display: inline-block; 8 width: 30px; 9 text-align: center; 10 background-color: aqua; 11} 12 13ul.page-numbers > li > a.prev, 14ul.page-numbers > li > a.next { 15 width: 50px; 16}

CSSが提示されたので、それを元に改修。

  • liには幅を設定しないで子要素の.page-numbersに幅を設定
  • 「前へ」.prev「次へ」.nextには上記と異なる幅を設定
  • liにdisplay: inline-block;を設定すれば横並びになるので、position: absolute;は不要。複雑になるだけ。
  • 冗長な設定が多かったので、それを排除してシンプルに修正。

scss

1$lightblue3: lightblue; 2$blue: blue; 3 4.page-numbers { 5 text-align: center; 6 7 >li { 8 margin: 0 2px; 9 padding: 0; 10 display: inline-block; 11 12 >.page-numbers { 13 width: 50px; 14 height: 50px; 15 display: table-cell; 16 vertical-align: middle; 17 color: #fff; 18 background: $lightblue3; 19 border-radius: 10px; 20 text-decoration: none; 21 -webkit-transition: all 0.3s ease; 22 -moz-transition: all 0.3s ease; 23 -o-transition: all 0.3s ease; 24 transition: all 0.3s ease; 25 &:hover, 26 &:active { 27 color: #000; 28 background: #ccf; 29 border-color: #00f; 30 } 31 &.current { 32 color: #fff; 33 background: $blue; 34 } 35 } 36 37 >.prev, 38 >.next { 39 width: 80px; 40 } 41 } 42}

CodePenサンプル

投稿2020/11/05 11:45

編集2020/11/05 14:45
hatena19

総合スコア34075

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kawausomaru

2020/11/06 02:46

丁寧なご回答と修正までしてくださり本当にありがとうございます! 無事こちら側でも実装することができました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問