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

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

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

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

HTML

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

Q&A

解決済

2回答

1320閲覧

[ワードプレス]固定ページのhtmlについたmarginを消したい。

ishizaka

総合スコア18

WordPress

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

HTML

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

0グッド

0クリップ

投稿2019/07/24 23:32

編集2019/07/25 12:22

前提・実現したいこと

ワードプレスの固定ページでお問合せのサンクスページを作成しています。

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

サンクスページのhtmlに画像のようなmargin-topが発生しています。

試したこと

固定ページのthanks.cssファイルを作成し編集しております。
そちらに

html{margin:0;}

を記入しても消されてしまいます。
どのようにして、該当箇所を編集すれば良いのでしょうか。
ご教授よろしくお願いします。

<?php /** * The header for our theme * * This is the template that displays all of the <head> section and everything up until <div id="content"> * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.0 */ ?> <!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> --> <link name="viewport" rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen and (max-width:900px)"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/thanks.css" type="text/css" /> <!-- font awesome --> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <title>EDEN | 北海道・帯広市のフリーランスエンジニアによるプログラミングスクール</title> <?php wp_head(); ?> </head>

追加

ソースコードです。

<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> --> <link name="viewport" rel="stylesheet" href="http://localhost:8888/wp-content/themes/eden/style.css" media="screen and (max-width:900px)"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="http://localhost:8888/wp-content/themes/eden/style.css"> <link rel="stylesheet" href="http://localhost:8888/wp-content/themes/eden/thanks.css" type="text/css" /> <!-- font awesome --> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <title>EDEN | 北海道・帯広市のフリーランスエンジニアによるプログラミングスクール</title> <script> ( function() { var query = document.location.search; if ( query && query.indexOf( 'preview=true' ) !== -1 ) { window.name = 'wp-preview-76'; } if ( window.addEventListener ) { window.addEventListener( 'unload', function() { window.name = ''; }, false ); } }()); </script> <link rel='dns-prefetch' href='//s.w.org' /> <script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"https://s.w.org/images/core/emoji/12.0.0-1/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/12.0.0-1/svg/","svgExt":".svg","source":{"concatemoji":"http://localhost:8888/wp-includes/js/wp-emoji-release.min.js?ver=5.2.2"}}; !function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55357,56424,55356,57342,8205,55358,56605,8205,55357,56424,55356,57340],[55357,56424,55356,57342,8203,55358,56605,8203,55357,56424,55356,57340]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings); </script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='dashicons-css' href='http://localhost:8888/wp-includes/css/dashicons.min.css?ver=5.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='admin-bar-css' href='http://localhost:8888/wp-includes/css/admin-bar.min.css?ver=5.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='wp-block-library-css' href='http://localhost:8888/wp-includes/css/dist/block-library/style.min.css?ver=5.2.2' type='text/css' media='all' /> <script type='text/javascript' src='http://localhost:8888/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script> <script type='text/javascript' src='http://localhost:8888/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script> <link rel='https://api.w.org/' href='http://localhost:8888/wp-json/' /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8888/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8888/wp-includes/wlwmanifest.xml" /> <meta name="generator" content="WordPress 5.2.2" /> <link rel="canonical" href="http://localhost:8888/testok/" /> <link rel='shortlink' href='http://localhost:8888/?p=76' /> <link rel="alternate" type="application/json+oembed" href="http://localhost:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%3A8888%2Ftestok%2F" /> <link rel="alternate" type="text/xml+oembed" href="http://localhost:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%3A8888%2Ftestok%2F&#038;format=xml" /> <style type="text/css" media="print">#wpadminbar { display:none; }</style> <style type="text/css" media="screen"> html { margin-top: 32px !important; } * html body { margin-top: 32px !important; } @media screen and ( max-width: 782px ) { html { margin-top: 46px !important; } * html body { margin-top: 46px !important; } } </style> </head> <div class="thanks"> <div class="container"> <h1 class="text-center">お問合せありがとうございます。</h1> <p>ご記入して頂いた情報は無事に送信されました。</p> <p>確認次第、ご連絡させて頂きますのでしばらくお待ちください。</p> <p><a href="http://localhost:8888/" title="">トップページに戻る</a></p> </div> </div>

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

![```ここに言語を入力
イメージ説明

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

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

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

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

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

guest

回答2

0

ベストアンサー

多分管理バー表示のための余白のCSS

functions.phpに

php

1add_action('wp_head',function(){remove_action('wp_head','_admin_bar_bump_cb');},1,1);

と書いとけば当該のcssの出力は無くなるけど
管理バーがページの内容に乗っかる形になってしまう

このCSSが出力されてて何で管理バーが表示されてないのかが不明
出力途中で止まったりしてませんか?

投稿2019/07/25 01:44

KazuhiroHatano

総合スコア7804

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

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

ishizaka

2019/07/25 11:35

ありがとうございます! そのスペースなんですね! 途中で止まってるかはどこを見れば良いのでしょうか?m(__)m 知識が浅くすみません!
KazuhiroHatano

2019/07/25 11:46

エラーログ見てFatal Errorが出てないか見るのが一番ですが ブラウザでソースコードを見ても出力が途中で止まってたら 中途半端なところでコードが切れてるのでわかります
ishizaka

2019/07/25 12:23

検証のコンソールのところでよろしかったでしょうか? エラーは見つかりませんでした。 ソースコードも切れているのかよくわかりませんでした。 すみません。。 いかがでしょうか?
KazuhiroHatano

2019/07/26 05:23

PHPのエラーログです、ブラウザのコンソールではではサーバーサイドのエラーは見れません 自作テーマであればテンプレートにwp_footer()が書かれてない、という線もありますね
ishizaka

2019/07/26 11:08

おっしゃる通りでした!管理バーが出ました! 少ない情報で本当に尊敬します...! ありがとうございました!!
guest

0

画像の右側の CSS 部分をみると一番上のファイル 「〜?preview_id...iew=true:66」の CSS が適用されていますね。

画像ではファイル名が不明ですが、?preview_id...iew=true がついていることと CSS の優先順位等から推測して、 HTML の中で、インラインスタイルか <style>タグが指定されているように思われますが、質問には、HTML や CSS の提示がなく内容が不明なので、HTML の中で、 <style> タグが指定されていないか確認してみてください。

投稿2019/07/24 23:54

編集2019/07/25 00:00
CHERRY

総合スコア25171

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

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

ishizaka

2019/07/25 11:37

ご回答ありがとうございます! header.phpを追加してみました。 このように記述しているのですがいかがでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問