回答編集履歴

2 修正

CHERRY

CHERRY score 17326

2019/02/06 19:18  投稿

自己解決されたよう(?)ですが...
テーマ名がわかったので、ちょっとだけ書いておきます。
この辺りは、基本的に HTML と CSS でのレイアウトの話なので、WordPress に限らず Web サイト制作の基本部分になります。
----
お使いのテーマは、twentyseventeen ということなので、固定ページを表示しているテンプレートの内容は、下記になっています。
Webブラウザで開発者ツールで HTML ソースをみると `<article id="xxxx">〜</article>` で、囲まれた部分なので、 twentyseventeen テーマの中で探してみると
お使いのテーマは、twentyseventeen ということなので、Webブラウザで開発者ツールで HTML ソースをみると `<article id="xxxx">〜</article>` で、囲まれた部分なので、 twentyseventeen テーマの中で探してみると、固定ページを表示しているテンプレートの内容は、下記になっています。
wp-content/themes/twentyseventeen/template-parts/page/content-page.php に
```PHP
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
       <header class="entry-header">
               <?php the_title( '<h1 class="/">', '</h1>' ); ?>
               <?php twentyseventeen_edit_link( get_the_ID() ); ?>
       </header><!-- .entry-header -->
       <div class="entry-content">
               <?php
                       the_content();
                       wp_link_pages(
                               array(
                                       'before' => '<div class="page-links">' . __( 'Pages:', 'twentysevent
een' ),
                                       'after' => '</div>',
                               )
                       );
                       ?>
       </div><!-- .entry-content -->
</article><!-- #post-## -->
```
が見つかります。
HTMLの構造としては、
`the_title()` を実行してタイトルを表示している `<header class="entry-header">〜</header>` 部分
`the_content()` を実行実行して本文を表示している `<div class="entry-content">〜</div>` 部分
の大きく2つに分かれています。
次に CSSファイル ( wp-content/themes/twentyseventeen/style.css )で、HTML のタグに設定されている class名を探してみると 3848 行目あたりに下記の定義があります。
```CSS
   body:not(.has-sidebar):not(.page-one-column) .page-header,
   body.has-sidebar.error404 #primary .page-header,
   body.page-two-column:not(.archive) #primary .entry-header,
   body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
       float: left;
       width: 36%;
   }
   .blog:not(.has-sidebar) #primary article,
   .archive:not(.page-one-column):not(.has-sidebar) #primary article,
   .search:not(.has-sidebar) #primary article,
   .error404:not(.has-sidebar) #primary .page-content,
   .error404.has-sidebar #primary .page-content,
   body.page-two-column:not(.archive) #primary .entry-content,
   body.page-two-column #comments {
       float: right;
       width: 58%;
   }
```
CSSの定義は、
.entry-header は、左寄せの 36% 幅
.entry-content は、右寄せの 58% 幅
ということで、左右2カラムで、表示するようになっているようです。
----
上記の HTML と CSS で、タイトルを表示している `.entry-header` クラスは、左側に 本文を表示する `.entry-content` クラスは、右側に表示するように指示してレイアウトを決めていますので、CSS を好みに合わせて変更すれば、レイアウトは変更可能です。
たとえば、デザイン的に良いかは別にして...
> float: left;
> width: 36%;
```
float: none;
width: 90%;
```
> float: right;
> width: 58%;
```
float: none;
width: 90%;
```
にするだけで、 フラットな1カラムになります。
![イメージ説明](dec91472e26bc1199605e16974379308.png)
1 画像を追加

CHERRY

CHERRY score 17326

2019/02/06 19:17  投稿

自己解決されたよう(?)ですが...
テーマ名がわかったので、ちょっとだけ書いておきます。
この辺りは、基本的に HTML と CSS でのレイアウトの話なので、WordPress に限らず Web サイト制作の基本部分になります。
----
お使いのテーマは、twentyseventeen ということなので、固定ページを表示しているテンプレートの内容は、下記になっています。
Webブラウザで開発者ツールで HTML ソースをみると `<article id="xxxx">〜</article>` で、囲まれた部分なので、 twentyseventeen テーマの中で探してみると
wp-content/themes/twentyseventeen/template-parts/page/content-page.php に
```PHP
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
       <header class="entry-header">
               <?php the_title( '<h1 class="/">', '</h1>' ); ?>
               <?php twentyseventeen_edit_link( get_the_ID() ); ?>
       </header><!-- .entry-header -->
       <div class="entry-content">
               <?php
                       the_content();
                       wp_link_pages(
                               array(
                                       'before' => '<div class="page-links">' . __( 'Pages:', 'twentysevent
een' ),
                                       'after' => '</div>',
                               )
                       );
                       ?>
       </div><!-- .entry-content -->
</article><!-- #post-## -->
```
が見つかります。
HTMLの構造としては、
`the_title()` を実行してタイトルを表示している `<header class="entry-header">〜</header>` 部分
`the_content()` を実行実行して本文を表示している `<div class="entry-content">〜</div>` 部分
の大きく2つに分かれています。
次に CSSファイル ( wp-content/themes/twentyseventeen/style.css )で、HTML のタグに設定されている class名を探してみると 3848 行目あたりに下記の定義があります。
```CSS
   body:not(.has-sidebar):not(.page-one-column) .page-header,
   body.has-sidebar.error404 #primary .page-header,
   body.page-two-column:not(.archive) #primary .entry-header,
   body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
       float: left;
       width: 36%;
   }
   .blog:not(.has-sidebar) #primary article,
   .archive:not(.page-one-column):not(.has-sidebar) #primary article,
   .search:not(.has-sidebar) #primary article,
   .error404:not(.has-sidebar) #primary .page-content,
   .error404.has-sidebar #primary .page-content,
   body.page-two-column:not(.archive) #primary .entry-content,
   body.page-two-column #comments {
       float: right;
       width: 58%;
   }
```
CSSの定義は、
.entry-header は、左寄せの 36% 幅
.entry-content は、右寄せの 58% 幅
ということで、左右2カラムで、表示するようになっているようです。
----
上記の HTML と CSS で、タイトルを表示している `.entry-header` クラスは、左側に 本文を表示する `.entry-content` クラスは、右側に表示するように指示してレイアウトを決めていますので、CSS を好みに合わせて変更すれば、レイアウトは変更可能です。
たとえば、デザイン的に良いかは別にして...
> float: left;
> width: 36%;
```
float: none;
width: 90%;
```
> float: right;
> width: 58%;
```
float: none;
width: 90%;
```
にするだけで、 フラットな1カラムになります。
にするだけで、 フラットな1カラムになります。
![イメージ説明](dec91472e26bc1199605e16974379308.png)

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る