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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

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

CSS

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

Q&A

1回答

2905閲覧

WPテーマ【twentyseventee】のカスタムについて

meeee

総合スコア12

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

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

CSS

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

0グッド

0クリップ

投稿2019/01/07 03:14

編集2022/01/12 10:55

ワードプレスのテーマtwentyseventeeを使用しております。
(テーマtwentyseventee:https://ja.wordpress.org/themes/twentyseventeen/)
以下の3点がわからず苦戦しているため、どなたかお分かりになる方がおりましたらご教授いただけると幸いです。
質問の仕方で至らない点がございましたら、ご指摘いただければと思います。
よろしくお願いいたします。

現在、以下の画像の①〜③の内容をクリアにしたいと考えております。

イメージ説明

① ナビと画像の幅を無くして、ナビ下すぐに画像を配置するようにしたい
② 下層ページのページ毎に、表示する画像を変更したい
③ ページ毎にこ固定ページのタイトル後に「について」というテキストをつけて表示したい

上記の②については、以下の画像のような状態にしたいと考えています。

イメージ説明

現在のコードは、以下になります。

html

1 2----------------------------------------------------- 3nav コード 4----------------------------------------------------- 5<?php 6/** 7 * Displays top navigation 8 * 9 * @package WordPress 10 * @subpackage Twenty_Seventeen 11 * @since 1.0 12 * @version 1.2 13 */ 14 15?> 16<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Top Menu', 'twentyseventeen' ); ?>"> 17 <button class="menu-toggle" aria-controls="top-menu" aria-expanded="false"> 18 <?php 19 echo twentyseventeen_get_svg( array( 'icon' => 'bars' ) ); 20 echo twentyseventeen_get_svg( array( 'icon' => 'close' ) ); 21 _e( 'Menu', 'twentyseventeen' ); 22 ?> 23 </button> 24 25 <?php wp_nav_menu( array( 26 'theme_location' => 'top', 27 'menu_id' => 'top-menu', 28 ) ); ?> 29 30 <?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && has_custom_header() ) : ?> 31 <a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a> 32 <?php endif; ?> 33</nav><!-- #site-navigation --> 34

html

1<?php 2/** 3 * The template for displaying all pages 4 * 5 * This is the template that displays all pages by default. 6 * Please note that this is the WordPress construct of pages 7 * and that other 'pages' on your WordPress site may use a 8 * different template. 9 * 10 * @link https://codex.wordpress.org/Template_Hierarchy 11 * 12 * @package WordPress 13 * @subpackage Twenty_Seventeen 14 * @since 1.0 15 * @version 1.0 16 */ 17 18get_header(); ?> 19<img src="http://test.jp/wp-content/uploads/2018/12/shinki1-min.jpg" width="100%" height="40%"> 20 21<div class="wrap"> 22 <div id="primary" class="content-area"> 23 <main id="main" class="site-main" role="main"> 24 25 <?php 26 while ( have_posts() ) : the_post(); 27 28 get_template_part( 'template-parts/page/content', 'page' ); 29 30 // If comments are open or we have at least one comment, load up the comment template. 31 if ( comments_open() || get_comments_number() ) : 32 comments_template(); 33 endif; 34 35 endwhile; // End of the loop. 36 ?> 37 38 </main><!-- #main --> 39 </div><!-- #primary --> 40</div><!-- .wrap --> 41 42<?php get_footer(); 43

CSS

1html { 2 font-family: sans-serif; 3 line-height: 1.15; 4 -ms-text-size-adjust: 100%; 5 -webkit-text-size-adjust: 100%; 6} 7 8body { 9 margin: 0; 10} 11 12article, 13aside, 14footer, 15header, 16nav, 17section { 18 display: block; 19} 20 21h1 { 22 font-size: 2em; 23 margin: 0.67em 0; 24} 25 26figcaption, 27figure, 28main { 29 display: block; 30} 31 32figure { 33 margin: 1em 0; 34} 35 36hr { 37 -webkit-box-sizing: content-box; 38 -moz-box-sizing: content-box; 39 box-sizing: content-box; 40 height: 0; 41 overflow: visible; 42} 43 44pre { 45 font-family: monospace, monospace; 46 font-size: 1em; 47} 48 49a { 50 background-color: transparent; 51 -webkit-text-decoration-skip: objects; 52} 53 54a:active, 55a:hover { 56 outline-width: 0; 57} 58 59abbr[title] { 60 border-bottom: 1px #767676 dotted; 61 text-decoration: none; 62} 63 64b, 65strong { 66 font-weight: inherit; 67} 68 69b, 70strong { 71 font-weight: 700; 72} 73 74code, 75kbd, 76samp { 77 font-family: monospace, monospace; 78 font-size: 1em; 79} 80 81dfn { 82 font-style: italic; 83} 84 85mark { 86 background-color: #eee; 87 color: #222; 88} 89 90small { 91 font-size: 80%; 92} 93 94sub, 95sup { 96 font-size: 75%; 97 line-height: 0; 98 position: relative; 99 vertical-align: baseline; 100} 101 102sub { 103 bottom: -0.25em; 104} 105 106sup { 107 top: -0.5em; 108} 109 110audio, 111video { 112 display: inline-block; 113} 114 115audio:not([controls]) { 116 display: none; 117 height: 0; 118} 119 120img { 121 border-style: none; 122} 123 124svg:not(:root) { 125 overflow: hidden; 126} 127 128button, 129input, 130optgroup, 131select, 132textarea { 133 font-family: sans-serif; 134 font-size: 100%; 135 line-height: 1.15; 136 margin: 0; 137} 138 139button, 140input { 141 overflow: visible; 142} 143 144button, 145select { 146 text-transform: none; 147} 148 149button, 150html [type="button"], 151[type="reset"], 152[type="submit"] { 153 -webkit-appearance: button; 154} 155 156button::-moz-focus-inner, 157[type="button"]::-moz-focus-inner, 158[type="reset"]::-moz-focus-inner, 159[type="submit"]::-moz-focus-inner { 160 border-style: none; 161 padding: 0; 162} 163 164button:-moz-focusring, 165[type="button"]:-moz-focusring, 166[type="reset"]:-moz-focusring, 167[type="submit"]:-moz-focusring { 168 outline: 1px dotted ButtonText; 169} 170 171fieldset { 172 border: 1px solid #bbb; 173 margin: 0 2px; 174 padding: 0.35em 0.625em 0.75em; 175} 176 177legend { 178 -webkit-box-sizing: border-box; 179 -moz-box-sizing: border-box; 180 box-sizing: border-box; 181 color: inherit; 182 display: table; 183 max-width: 100%; 184 padding: 0; 185 white-space: normal; 186} 187 188progress { 189 display: inline-block; 190 vertical-align: baseline; 191} 192 193textarea { 194 overflow: auto; 195} 196 197[type="checkbox"], 198[type="radio"] { 199 -webkit-box-sizing: border-box; 200 -moz-box-sizing: border-box; 201 box-sizing: border-box; 202 padding: 0; 203} 204 205[type="number"]::-webkit-inner-spin-button, 206[type="number"]::-webkit-outer-spin-button { 207 height: auto; 208} 209 210[type="search"] { 211 -webkit-appearance: textfield; 212 outline-offset: -2px; 213} 214 215[type="search"]::-webkit-search-cancel-button, 216[type="search"]::-webkit-search-decoration { 217 -webkit-appearance: none; 218} 219 220::-webkit-file-upload-button { 221 -webkit-appearance: button; 222 font: inherit; 223} 224 225details, 226menu { 227 display: block; 228} 229 230summary { 231 display: list-item; 232} 233 234canvas { 235 display: inline-block; 236} 237 238template { 239 display: none; 240} 241 242[hidden] { 243 display: none; 244} 245/*-------------------------------------------------------------- 24612.0 Navigation 247--------------------------------------------------------------*/ 248 249.navigation-top { 250 background: #fff; 251 border-bottom: 1px solid #eee; 252 border-top: 1px solid #eee; 253 font-size: 16px; 254 font-size: 1rem; 255 position: relative; 256} 257 258.navigation-top .wrap { 259 max-width: 1000px; 260 padding: 0; 261} 262 263.navigation-top a { 264 color: #222; 265 font-weight: 600; 266 -webkit-transition: color 0.2s; 267 transition: color 0.2s; 268} 269 270.navigation-top .current-menu-item > a, 271.navigation-top .current_page_item > a { 272 color: #767676; 273} 274 275.main-navigation { 276 clear: both; 277 display: block; 278} 279 280.main-navigation ul { 281 background: #fff; 282 list-style: none; 283 margin: 0; 284 padding: 0 1.5em; 285 text-align: right; 286} 287 288/* Hide the menu on small screens when JavaScript is available. 289 * It only works with JavaScript. 290 */ 291 292.js .main-navigation ul, 293.main-navigation .menu-item-has-children > a > .icon, 294.main-navigation .page_item_has_children > a > .icon, 295.main-navigation ul a > .icon { 296 display: none; 297} 298 299.main-navigation > div > ul { 300 border-top: 1px solid #eee; 301 padding: 0.75em 1.695em; 302} 303 304.js .main-navigation.toggled-on > div > ul { 305 display: block; 306} 307 308.main-navigation ul ul { 309 padding: 0 0 0 1.5em; 310} 311 312.main-navigation ul ul.toggled-on { 313 display: block; 314} 315 316.main-navigation ul ul a { 317 letter-spacing: 0; 318 padding: 0.4em 0; 319 position: relative; 320 text-transform: none; 321} 322 323.main-navigation li { 324 border-bottom: 1px solid #eee; 325 position: relative; 326} 327 328.main-navigation li li, 329.main-navigation li:last-child { 330 border: 0; 331} 332 333.main-navigation a { 334 display: block; 335 padding: 0.5em 0; 336 text-decoration: none; 337} 338 339.main-navigation a:hover { 340 color: #767676; 341} 342 343/* Menu toggle */ 344 345.menu-toggle { 346 background-color: transparent; 347 border: 0; 348 -webkit-box-shadow: none; 349 box-shadow: none; 350 color: #222; 351 display: none; 352 font-size: 14px; 353 font-size: 0.875rem; 354 font-weight: 800; 355 line-height: 1.5; 356 margin: 1px auto 2px; 357 padding: 1em; 358 text-shadow: none; 359} 360 361/* Display the menu toggle when JavaScript is available. */ 362 363.js .menu-toggle { 364 display: block; 365} 366 367.main-navigation.toggled-on ul.nav-menu { 368 display: block; 369} 370 371.menu-toggle:hover, 372.menu-toggle:focus { 373 background-color: transparent; 374 -webkit-box-shadow: none; 375 box-shadow: none; 376} 377 378.menu-toggle:focus { 379 outline: thin solid; 380} 381 382.menu-toggle .icon { 383 margin-right: 0.5em; 384 top: -2px; 385} 386 387.toggled-on .menu-toggle .icon-bars, 388.menu-toggle .icon-close { 389 display: none; 390} 391 392.toggled-on .menu-toggle .icon-close { 393 display: inline-block; 394} 395 396/* Dropdown Toggle */ 397 398.dropdown-toggle { 399 background-color: transparent; 400 border: 0; 401 -webkit-box-shadow: none; 402 box-shadow: none; 403 color: #222; 404 display: block; 405 font-size: 16px; 406 right: -0.5em; 407 line-height: 1.5; 408 margin: 0 auto; 409 padding: 0.5em; 410 position: absolute; 411 text-shadow: none; 412 top: 0; 413} 414 415.dropdown-toggle:hover, 416.dropdown-toggle:focus { 417 background: transparent; 418} 419 420.dropdown-toggle:focus { 421 outline: thin dotted; 422} 423 424.dropdown-toggle.toggled-on .icon { 425 -ms-transform: rotate(-180deg); /* IE 9 */ 426 -webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */ 427 transform: rotate(-180deg); 428} 429 430/* Scroll down arrow */ 431 432.site-header .menu-scroll-down { 433 display: none; 434}

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

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

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

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

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

CHERRY

2019/01/07 04:13 編集

ナビ部分のソースコードを提示していただけないでしょうか?
meeee

2019/01/07 04:18

ご指摘くださり、ありがとうございます。 コードを質問の一番上に追記いたしました。(navコードというものです。) コードを追加したのですが、こちらであっていますでしょうか。 初心者でよくわからず・・間違っていましたら申し訳ありません。 よろしくお願いいたします。
dit.

2019/01/07 04:30

子テーマの作成はしてありますか?
CHERRY

2019/01/07 04:47 編集

CSS の中身を追いかけないで回答したけど、 twentyseventeen の style.css と質問に記載されている CSS が違いますね。 この CSS のファイル名は、何でしょうか? (もしかして、途中で切れているのかな?)
meeee

2019/01/07 07:56

dit.さま ご連絡くださり、ありがとうございます。 子ページは作成してあります!
meeee

2019/01/07 07:57

CHERRYさま ご返答くださり、ありがとうございます。 CSSの全体を載せるとかなりの長さになってしまうため、途中部分を削除して必要そうな部分だけを記載いたしました。
guest

回答1

0

  1. 管理画面(ダッシュボード)の「外観」→「カスタマイズ」で、「メニュー」を設定したのであれば、

style.css の .site-content の 「padding: 5.5em 0 0;」が、コンテンツ上部の余白なので、ここを調整。

例: padding: 0 0 0;

5.5em -> 0 にすると コンテンツ下側の余白も無くなるので、下は残したいであれば、 padding: 0 0 0 5.5em; 等にする。

  1. 詳細が不明なので、具体的に記載してください。

たとえば、WordPress のテンプレートファイル内で行うのであれば、

<img src="http://viasto-test.ciao.jp/wp-content/uploads/2018/12/shinki1-min.jpg" width="100%" height="40%">

の部分を ページ毎に if で条件判断して切り替えるようにする等

例:
画像は、テンプレートの images にあると仮定。

<?php if( is_page( 'page1' ) ) { echo '<img src="'.get_stylesheet_directory_uri().'/images/page1.jpg" />'; } elseif( is_page( 'page2' ) ) { echo '<img src="'.get_stylesheet_directory_uri().'/images/page2.jpg" />'; } elseif( is_page( 'page3' ) ) { echo '<img src="'.get_stylesheet_directory_uri().'/images/page3.jpg" />'; } else { echo '<img src="'.get_stylesheet_directory_uri().'/images/shinki1-min.jpg" />'; } ?>

関数リファレンス/is page

  1. template-parts/page/content-page.php の中で表示しているので、

title の部分

<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

を変更する。

たとえば、

<?php the_title( '<h1 class="entry-title">', 'について </h1>' ); ?>

に変更。

テンプレートタグ/the title


どの CSS が適用されているか調べる方法については、下記等を参照してください。

投稿2019/01/07 04:38

編集2019/01/07 04:53
CHERRY

総合スコア25171

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

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

meeee

2019/01/07 08:49

CHERRYさま ご回答くださり、ありがとうございます。 上記、①、②については問題をクリアにすることができました。 初心者の私でも、とてもわかりやすい文章で理解しやすく大変ありがたいです。 ③についてなのですが、もしかしたら最初の段階でテンプレートにショートコード(?)が記載されていたのかもしれないですが、削除してしまった可能性がありお教えいただいたコードを記入しても表示されませんでした。 説明が苦手なためつたわならなかったらごめんないさい。 以下、CERRYさんの回答をみた私の解釈なのですが content-page.phpに記載した内容が、page.phpに表示されるという認識なのですが間違いないでしょうか。 さらに、page.php内に記載がある以下のコードで表示されるはずだと思うのですが違いますでしょうか。 <?php while ( have_posts() ) : the_post(); get_template_part( 'template-parts/page/content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; とても初歩的な事を質問してしまい、申し訳ありません。
CHERRY

2019/01/08 00:38 編集

まず、子テーマを使われている場合、子テーマに存在しないファイルは、親テーマのファイルが参照される仕組みになっています。 子テーマにファイルを追加したい場合(親テーマのファイルの内容を修正する場合)は、親テーマの同じ階層にある該当ファイルを子テーマにコピーしてから、編集してください。 ---- コメントに記載された PHP コードの意味を書かれている内容を説明すると > while ( have_posts() ) : the_post(); WordPress のループの始まり、$post をセットする。 > get_template_part( 'template-parts/page/content', 'page' ); template-parts/page/content-page.php ファイルをこの位置に読み込むという関数です。 > if ( comments_open() || get_comments_number() ) : > comments_template(); > endif; コメントが有効ならコメント欄のテンプレートをこの位置に表示する。 となります。 ---- ` get_template_part( 'template-parts/page/content', 'page' ); ` があるので、 template-parts/page/content-page.php の中を見てみると、以下ののようなコードです。(コメント覗く。 https://themes.svn.wordpress.org/twentyseventeen/1.9/template-parts/page/content-page.php より) ``` <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</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:', 'twentyseventeen' ), 'after' => '</div>', ) ); ?> </div><!-- .entry-content --> </article><!-- #post-## --> ``` このファイルの中で、 the_title() という 投稿のタイトルを表示する関数 ( https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_title ) が仕様されているので、ここで投稿のタイトルを表示していると判断しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問