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% 幅 |
| ということで、左右２カラムで、表示するようになっているようです。 |
| ---- |
| 上記の HTML と CSS で、タイトルを表示している `.entry-header` クラスは、左側に 本文を表示する `.entry-content` クラスは、右側に表示するように指示してレイアウトを決めていますので、CSS を好みに合わせて変更すれば、レイアウトは変更可能です。 |
| たとえば、デザイン的に良いかは別にして... |
| > float: left; |
| > width: 36%; |
| を |
| ``` |
| float: none; |
| width: 90%; |
| ``` |
| に |
| > float: right; |
| > width: 58%; |
| を |
| ``` |
| float: none; |
| width: 90%; |
| ``` |
| にするだけで、 フラットな１カラムになります。 |
|  |
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% 幅 |
| ということで、左右２カラムで、表示するようになっているようです。 |
| ---- |
| 上記の HTML と CSS で、タイトルを表示している `.entry-header` クラスは、左側に 本文を表示する `.entry-content` クラスは、右側に表示するように指示してレイアウトを決めていますので、CSS を好みに合わせて変更すれば、レイアウトは変更可能です。 |
| たとえば、デザイン的に良いかは別にして... |
| > float: left; |
| > width: 36%; |
| を |
| ``` |
| float: none; |
| width: 90%; |
| ``` |
| に |
| > float: right; |
| > width: 58%; |
| を |
| ``` |
| float: none; |
| width: 90%; |
| ``` |
| にするだけで、 フラットな１カラムになります。 |
| にするだけで、 フラットな１カラムになります。 |
|  |
