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

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

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

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

PHP

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

ページネーション

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

SNS

SNS(ソーシャル・ネットワーキング・サービス)は、 人と人とのつながりを促進したり、サポートしたりすることが可能なコミュニティ型のWebサービスです。

Q&A

0回答

392閲覧

ページネーションやSNSシェアボタンの表示位置を妥当な場所に変更したい

Karafuru

総合スコア0

WordPress

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

PHP

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

ページネーション

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

SNS

SNS(ソーシャル・ネットワーキング・サービス)は、 人と人とのつながりを促進したり、サポートしたりすることが可能なコミュニティ型のWebサービスです。

0グッド

0クリップ

投稿2020/06/18 12:21

編集2022/01/12 10:55

前提・実現したいこと

ページネーションとSNSシェアボタンの位置を変更したい。

発生している問題・エラーメッセージ

エラーは出ていないです。 PCで表示する時は画面サイズが大きいので違和感がないのですが、 スマホで表示すると表示され方が変わるので、 メインページ⇒サイドバー⇒ページネーション&SNSシェアボタンの順になってしまいます。 なお、該当のソースコードはページネーションについての方です。 ※SNSシェアボタンの方は別でコードがありますが、根本は同じなのでここには載せてないです。

該当のソースコード

<?php if($abc_theme_option['blog_sidebar_position']=='right'): ?> <?php if($abc_theme_option['layout_section_post_one_column']==false): ?> <div class="col-md-4 col-sm-4 col-xs-12 <?php echo esc_attr($abc_theme_sidebar); ?>" > <?php get_sidebar(); ?> </div> <?php endif; ?> <?php endif; ?> <?php $paged = (get_query_var('page')) ? get_query_var('page') : 1; $args = array( 'posts_per_page' => 10, 'paged' => $paged, 'post_type' => array( 'post', ), ); $the_query = new WP_Query($args);?> <?php if ($the_query->have_posts()) :while ($the_query->have_posts()): $the_query->the_post(); ?> <?php endwhile; endif; ?> </dl> <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(array('query'=>$the_query)); } ?> <?php wp_reset_postdata(); ?> /* Wp-Pagenavi */ .wp-pagenavi { clear: both; text-align:center; } .wp-pagenavi a, .wp-pagenavi span { color: #fff; background-color: #1C181A; border: 1px solid #1C181A; padding: 5px 12px; margin: 0 2px; white-space: nowrap; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; text-align: center; text-decoration: none; } .wp-pagenavi a:hover{ color: #FFF; background-color: #9400d3; border-color: #9400d3; } .wp-pagenavi span.current{ color: #777; background-color: #CFD5DA; border-color: #CFD5D; font-weight: bold; }

試したこと

「get_sidebar()」の前にページネーションのコードを移動させてみましたが、 そうするとスマホでは違和感なく表示されますが、PCで見たときにサイドバーが下の方に押しやられます。

補足情報(FW/ツールのバージョンなど)

ここで質問させていただく前にいろいろ調べてトライしましたが解決しないため、 質問させていただいております。よろしくお願い致します。

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

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

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

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

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

CHERRY

2020/06/18 21:34

CSS でもある程度の配置を変えることはできると思いますが、どのようなCSS をお使いでしょうか?
Karafuru

2020/06/18 23:47

CHERRYさん、ご連絡ありがとうございます! 質問を編集し、CSSを追記しました。主にページネーションのデザインしかしていないのですが、よろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問