ブログ記事ページ（スマホ表示）でロゴ部文字が2行になり、記事タイトルとカブってしまいます。

Question

前提・実現したいこと

<前提>
ワードプレスでブログを作成しています。
ロゴ部の文字がPCでは一行で表示される為問題ありませんが、
スマホ表示だと、ロゴ部の文字が2行になり、行間が広く記事タイトルに被ってしまいます。

<実現したい事>
スマホ表示に於いてロゴ部の2行になった文字行間を狭めて記事タイトルに被らなくしたいです。

ワードプレスcss追加部にどの様なコードを追加したら良いかご教授お願いします。

該当のページです。

該当のソースコード（Chromeデベロッパーツール（検証モード）で確認したコードです。）

<div class="headerlogo"> <div class="amp-logo"> <h1> <a href="https://sunutuku.work/?nonamphead=1" rel="nofollow">職場での人間関係・ストレス・悩みをすっきり完全解決</a></h1> </div> </div>

```css
.headerlogo {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}
user agent stylesheet
div {
    display: block;
}
#header {
    background: #fff;
    text-align: center;
    height: 50px;
    box-shadow: 0 0 32px rgba(0,0,0,.15);
}
Style Attribute {
    opacity: 1;
    visibility: visible;
    animation: 0s ease 0s 1 normal none running none;
}
body {
    font: 16px/1.4 Sans-serif;
}
body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

user agent stylesheet
html {
    color: -internal-root-color;
}

@media screen and (max-width: 536px)
.amp-logo {
    display: flex;
    padding-top: 4px;
}
@media screen and (max-width: 536px)
.amp-logo {
    display: flex;
    padding-top: 4px;
}
user agent stylesheet
div {
    display: block;
}
.headerlogo {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}
#header {
    background: #fff;
    text-align: center;
    height: 50px;
    box-shadow: 0 0 32px rgba(0,0,0,.15);
}
Style Attribute {
    opacity: 1;
    visibility: visible;
    animation: 0s ease 0s 1 normal none running none;
}
body {
    font: 16px/1.4 Sans-serif;
}
body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
user agent stylesheet
html {
    color: -internal-root-color;
}

#header h1 {
    text-align: center;
    font-size: 16px;
    position: relative;
    font-weight: bold;
    line-height: 50px;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
}
user agent stylesheet
h1 {
    font-size: 2em;
    font-weight: bold;
}
.headerlogo {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}
#header {
    background: #fff;
    text-align: center;
    height: 50px;
    box-shadow: 0 0 32px rgba(0,0,0,.15);
}
Style Attribute {
    opacity: 1;
    visibility: visible;
    animation: 0s ease 0s 1 normal none running none;
}
body {
    font: 16px/1.4 Sans-serif;
}
body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

user agent stylesheet
html {
    color: -internal-root-color;
}

h2 {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}


.box17{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}



.diagnosis-wrap .question{
	margin-bottom:1.5em;
}
.diagnosis-wrap .question .qcontents{
	margin-bottom:.5em;
	font-weight:bold;
}
.diagnosis-wrap .question .qselect span{
	display:block;
}
.diagnosis-wrap .question .qselect span input{
	margin:0 5px;
}
.diagnosis-wrap .submit input{
	padding:1em;
	width:300px;
	max-width:80%;
	margin-bottom:1em;
}


@media

 screen and (max-width: 536px){
  .amp-logo {
    display: flex;
    padding-top: 4px;
  }
  #blog-title-text{
    line-height: initial;
  }
	 
	 header .descr {
padding:0;
}
	 
}

試したこと

CSSの本を読んでみましたが分からない状況です。

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

ありません。

追記です。ワードプレスのcss追加の処全てのスクリーンショットです。




どうぞよろしくお願いいたします。

入れ込んでみましたが、変化がありませんでした。

FKM様へ

ＡＭＰ解除すると直ります。

mkt38様へ

mkt38様へ

Answer 1

2日前のご質問ですでに解決されていたら申し訳ないですが、
header h1 {}のline-heightの値を調整すれば良いんじゃないでしょうか？

追記：
でしたら

@media screen and (max-width: 536px){
  header h1{
    line-height: ◯◯px;
  }
}

とすればスマホ時(ウインドサイズが536px以下)のみスタイルが適用されるので解決できるかと思います。

追記：

Comments

[退会済みユーザー]

回答ありがとうございました。（返信が遅くなり申し訳ありません。）
試してみたのですが、スマホサイトでは上記のheader h1 {}のline-heightの値を調整を調整して対応できそうでしたが、PCサイトでは逆効果になってしまう事が判明しました。

[退会済みユーザー]

回答ありがとうございます。とても感謝しています。教えて頂いたcssを追加しましたが、変化がありませんでした。
ちなみに、現状のcssの最後に
@media

screen and (max-width: 536px){
.amp-logo {
display: flex;
padding-top: 4px;
}
となっています。この後に教えて頂いたcssを追加しても変化なしでした。

大変申し訳ありませんが、引き続きご支援お願いいたします。

[mkt38]

そうですか...
ちょっと自信ないですが最後の部分を

@media

screen and (max-width: 536px){
.amp-logo {
display: flex;
padding-top: 4px;
}
header h1 {
line-height: ◯◯px;
}
}

としたらどうなるでしょうか？
あと念のためですが、「◯◯px」の部分はいい感じの値を入れてください。

[退会済みユーザー]

早速の対応ありがとうございます。試しましたが、変化がありませんでした。困りました。

[mkt38]

@media screen and (max-width: 536px) {} 内の line-height を
line-height: ◯◯px !important; としてもだめでしょうか？
そうなると @media 内のスタイル自体が適応されてない可能性も...

それか line-height で余白を調整せずに padding で調整されてはどうでしょうか？

[退会済みユーザー]

こんばんは。しごおわです。連絡ありがとうございます。心強いです。
早速、教えて頂いた、上記のCSSにしても変化がありませんでした。

もともと、↓のcssを入れてもダメだったので、どうしたら良いか…
@media

screen and (max-width: 536px){
.amp-logo {
display: flex;
padding-top: 4px;
}
#blog-title-text{
line-height: initial;
}

header .descr {
padding:0;
}

}

[mkt38]

お仕事お疲れ様です。
当該ページを閲覧できれば良いのですがそういうわけにも行きませんよね...

ちなみにですが<header>全体のHTML構造はどのようになっているのでしょうか？

[退会済みユーザー]

返信ありがとうございます。感謝です。
当該ページって、ワードプレスのダッシュボードの事ですか?

・クロームの検証から確認してみました。
・html構造↓

<header class="container design3-header"> <div id="headerwrap" i-amphtml-fixedid="F1" style="top: calc(46px);"> <div id="header"> <div class="hamburgermenu"> <button class="toast pull-left" on="tap:sidebar.toggle" aria-label="Navigation"><span></span></button> </div> <div class="headerlogo"> <div class="amp-logo"> <h1> <a href="https://sunutuku.work/?nonamphead=1&amp;customize_changeset_uuid=c7b53fa7-3367-4477-835e-31e01f009e15&amp;customize_messenger_channel=preview-1" rel="nofollow">職場での人間関係・ストレス・悩みをすっきり完全解決</a></h1> </div> </div> </div> </div> </header>

それに対するcss↓

element.style {
}
@media (max-width: 782px)
.amp-wp-header, .design2-header, .design3-header, .header {
margin-top: 46px;
}
.amp-wp-header, .design2-header, .design3-header, .header {
margin-top: 32px;
}
header {
padding-bottom: 50px;
}
user agent stylesheet
header {
display: block;
}
Style Attribute {
opacity: 1;
visibility: visible;
animation: 0s ease 0s 1 normal none running none;
}
body {
font: 16px/1.4 Sans-serif;
}
body {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}

user agent stylesheet
html {
color: -internal-root-color;
}

どうぞよろしくお願いいたします。_(._.)_

[mkt38]

ページ見れました。
やはり、スマホ時にだけ line-height の値を変更できれば解決しそうですね。
見たところ .amp-logo には @media 内のスタイルがちゃんと反映されているようですが、 #header h1 には効かないんですよね？
お手数ですが、どのように記述しているかスクショで見せていただけませんか？

[退会済みユーザー]

お世話になっております。しごおわです。
この件、付き合ってくれて本当に感謝です。
えっと、スクショはスタイルシートの処ですか？
すみません、教えてください。

[mkt38]

お疲れ様です。
そうですね。以前私が追記したCSSコードを追加されたところです。

[退会済みユーザー]

スクリーンショットを追記しました。確認して頂きたく、宜しくお願い致します。

[mkt38]

スクショ拝見しました。
header h1 を #header h1 としてみたらどうでしょうか？

[退会済みユーザー]

返信ありがとうございます。変化ありませんでした。

[mkt38]

そうですか、謎だ...
こうなったらスマホ時に line-height を調整する作戦はやめましょう。

#header {
display: flex;
align-items: center;
}
#header h1 {
line-height: normal;
}

としたらどうでしょうか？
@media の直前に追加してみてください。

[退会済みユーザー]

すみません、変化なしです。入れ込んだスクリーンショットを追記しました。

[mkt38]

追加CSSに書いたスタイルが丸ごと反映されていないみたいですね。おそらくAMPプラグインを使っているのが原因だと思います。
wordpressの左メニューの外観→テーマの編集から使用されているファイル群が右側に表示されると思いますが、どんなファイルがあるか教えていただけませんか？

[退会済みユーザー]

お疲れ様です。しごおわです。返信ありがとうございます。
早速確認しました。
style.cssとfunctions.phpです。その他ご確認が必要な事があれば教えてください。
宜しくお願い致します。

[mkt38]

style.cssの中身ってどーなってます？

[退会済みユーザー]

返信ありがとーございます。
style.cssの中身をコピーしました。↓の通りです

@charset "utf-8";
/* CSS Document */

/*
Template: giraffe
Theme Name:giraffe-child
Theme URI:https://junichi-manga.com/giraffe/
Description:WordPressテーマ『Giraffe』の子テーマです
Author:JUNICHI
Version:1.0.0
*/

/*コードを追加する場合はこの下からお願いします↓*/

@font-face{
font-family:migmix;
src:url('migmix-1p-regular.woff')format('woff');
}

body {
font-family:migmix;
}

.box27 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
.box27 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box27 p {
margin: 0;
padding: 0;
}

[mkt38]

昨日はあまりお返事できず申し訳ないです。
style.cssにCSSを書き込んでも反映されなさそうですね...一応ダメ元で試してみてください。
それで、おそらく問題の原因であろうプラグインですが、何という名前のプラグインが読み込まれているでしょうか？多分amp〜〜ってやつだと思うのですが...

[退会済みユーザー]

こんばんは、しごおわです。
返信ありがとうございます。
ＡＭＰで使っているプラグインは
AMP for WP - Accelerated Mobile Pages for WordPress
って名前でした。

[mkt38]

お疲れ様です。試しにそのプラグインを無効化したらどうなるでしょうか？

[退会済みユーザー]

返信ありがとうございます。
ＡＭＰ解除するとなおりました。
質問の追記の処にスクリーンショットをはりました。
でも、ＡＭＰ設定で直したいです。
どうぞよろしくお願いいたします。

[mkt38]

外観→テーマの編集のテーマファイルの欄にampというディレクトリはありますか？

[退会済みユーザー]

おはようございます。
見当たりませんでした。外観の処のスクリーンショットを質問の処に追記します。m(__)m

[mkt38]

テーマをGiraffe ChildからGiraffeに変更したらどうでしょうか？
ampディレクトリ内のstyle.phpにCSSを書き込めば反映されると思うのですが...
もしstyle.phpに書き込めたらテーマをGiraffe Childに戻して下さい。

[退会済みユーザー]

Giraffeにして確認しました。Giraffe Childでスマホで表示される困った現象は全く同じに再現しました。ampディレクトリ内のstyle.phpってのが、どこにあるのかがよく分からなくて困っています。

[mkt38]

私がAMPを導入した経験がないため、だいぶ当てずっぽうな回答になってしまっていて申し訳ないです...
あとはどこにCSSを書き込んだら反映されるかだけなのですが、AMPを導入された方に聞くことは可能でしょうか？

[退会済みユーザー]

返信ありがとうございます。昨日から具合が悪くて返信が遅れました。すみませんです。
知り合いにＡＭＰ導入どころかワードプレスでブログやっている方が居なくて困っております。

[mkt38]

こんにちは。お身体大丈夫でしょうか？
当該ブログを開設された際はどなたがAMP導入されたんですか？

[退会済みユーザー]

こんにちは、返信ありがとうございます。
ＡＭＰ導入私です。
プラグイン入れて、設定しただけです...

[mkt38]

AMP導入以前はどこでCSSの編集してました？

[退会済みユーザー]

こんばんは、インフルエンザになっていました。
返信ありがとうございます。
ＡＭＰ導入以前も現在もダッシュボードのCSS編集で実施していました。
今起きている原因は、ＡＭＰを入れると追加CSSが反映されないって事ですよね。

[mkt38]

インフルエンザでしたか...お大事になさってください。
そうですね。ですので今現在サイトに反映されているCSSがどこに記述されているかわかれば良いのですが。
テーマをGiraffeに変更した際も、外観→テーマの編集のテーマファイルの欄はstyle.cssとfunctions.phpの二つだけでしょうか？

[退会済みユーザー]

返信が遅れて誠に申し訳ありません。

Giraffeに戻したところ、編集可能なファイルが出てきました。
以下です。

style.css
functions.php
cssフォルダー
editor-style.css
jsフォルダー
404.php
ad.php
archive.php
comments.php
footer.php
head.php
header.php
home.php
iine.php
index.php
itiran.php
kanren-articles.php
kanren.php
left-menu.php
libraryフォルダー
modal-search-button.php
modal-search-button2.php
newpost.php
ogp.php
ランディングページ 固定ページテンプレート
(one-column.php)
1カラム 固定ページテンプレート
(page-one-column.php)
page.php
profile1.php
profile2.php
scroll-ad.php
search.php
searchform.php
sidebar.php
single.php
sns.php
theme-update-checker.php
toppage-upper-parts.php

[mkt38]

こんばんは。
怪しいのは
style.css
editor-style.css
head.php
header.php
あたりですね。
いずれかのファイルに#headerに関するCSSが記述されていないでしょうか？そのファイルに追加CSS内のスタイルをコピペしたら反映されないでしょうか？

[退会済みユーザー]

style.cssの480行目に以下のCSSがありました。ここのどの部分に、いろいろ教えて頂きましたが、どのCSSを入れてみましょうか？
すみません、素人で。宜しくお願い致します。

#header-upper-area{max-width:100%;padding:0;background:#FFFFFF;margin:0 auto;box-shadow:0px 3px 8px 0 rgba(0,0,0,.3);position:absolute;z-index:2;width:100%;}

[退会済みユーザー]

editor-style.cssの中身は以下でした。

.mceContentBody{
width:100%;
}

[退会済みユーザー]

head.phpの中身は以下でした。

<?php if ( get_option( 'other_options_ga' ) ) : ?>
<!-- GAタグ -->
<script type="text/javascript">window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;ga('create','<?php echo get_option( 'other_options_ga' ); ?>','auto');ga('set','anonymizeIp',true);ga('send','pageview');</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<?php endif; ?>

<!-- その他 -->
<?php echo get_option( 'other_options_headcode' ); ?>

[退会済みユーザー]

header.phpの中身は以下でした。

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]> <html class="i7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]> <html class="ie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<!--[if lt IE 9]>
<script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/html5shiv.js"></script>
<![endif]-->
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<?php if(is_category()): ?>
<?php elseif(is_archive()): ?>
<meta name="robots" content="noindex,follow">
<?php elseif(is_search()): ?>
<meta name="robots" content="noindex,follow">
<?php elseif(is_tag()): ?>
<meta name="robots" content="noindex,follow">
<?php elseif(is_paged()): ?>
<meta name="robots" content="noindex,follow">
<?php endif; ?>
<title>
<?php
global $page, $paged;
if(is_front_page()):
elseif(is_single()):
wp_title('|',true,'right');
elseif(is_page()):
wp_title('|',true,'right');
elseif(is_archive()):
wp_title('|',true,'right');
elseif(is_search()):
wp_title('|',true,'right');
elseif(is_404()):
echo'404 |';
endif;
bloginfo('name');
if($paged >= 2 || $page >= 2):
echo'-'.sprintf('%sページ',
max($paged,$page));
endif;
?>
</title>
<?php wp_head(); ?>
<?php get_template_part('ogp');?>
<?php get_template_part( 'head' ); ?>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<?php } else { ?>
<?php } ?>
</head>

<body <?php body_class(); ?>>
<?php echo get_option( 'other_options_bodycode' ); ?>
<div id="totalcover">
<!-- Facebookのこの記事気に入ったらいいね用 -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.9&appId=1791998471112354";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- /Facebookのこの記事気に入ったらいいね用 -->

<!-- ヘッダーエリアカバー -->
<div id="header-upper-area">
<header>
<!-- キャプション -->
<?php if(is_front_page() && !is_paged()): ?>
<h1 class="descr <?php echo get_option( 'fanfare_logo_position' ); ?>">
<?php bloginfo('description'); ?>
</h1>
<?php else : ?>
<p class="descr <?php echo get_option( 'fanfare_logo_position' ); ?>">
<?php bloginfo('description'); ?>
</p>
<?php endif; ?>
<!-- キャッチコピー -->

<!-- ロゴ・タイトルエリア -->
<div id="logo-area">
<?php get_template_part('left-menu'); //左ハンバーガーメニュー読み込み ?>
<!-- ロゴ又はブログ名 -->
<div id="logo" class="<?php echo get_option( 'fanfare_logo_position' ); ?>">
<p class="sitename"><a class="gf" href="<?php echo home_url(); ?>/">
<?php if (get_option('fanfare_logo_image')): //ロゴ画像がある時 ?>
<img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url(get_option('fanfare_logo_image')); ?>" />
<?php else: //ロゴ画像が無い時 ?>
<?php bloginfo( 'name' ); ?>
<?php endif; ?>
</a></p>
</div>

<?php get_template_part('modal-search-button'); //検索ボタン読み込み ?>
<!--ナビメニューエリア-->
<div id="navi-large-area" class="smanone">
<!-- ナビメニュー -->
<div id="navi-area" class="smanone">
<nav id="main-navigation" class="smanone clearfix">
<?php $defaults = array('theme_location' => 'navbar',);wp_nav_menu( $defaults );?>
</nav>

</div>
<!-- ナビメニュー -->
</div>
<!--/ナビメニューエリア-->

</div>
<!-- /ロゴ・タイトル・ナビエリア -->
<!-- ここで一旦フロートクリア -->
<div class="clear">
</div>
<!-- /ここで一旦フロートクリア -->
</header>
</div>
<!-- /header-upper-area -->
<div class="header-fixed-area-desc"></div>
<div class="header-fixed-area-main"></div>
<!--ヘッダー画像-->
<?php if(is_front_page() && !is_paged()): ?>
<div id="header-gazou-area" class="animated fadeIn <?php echo get_option( 'fanfare_header_imgsize' ); ?>">
<div id="gazou">
<!-- PCでのヘッダー画像 -->
<div id="header-gazou-pc" class="smanone">
<?php if(get_header_image()): ?>
<p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
<?php endif; ?>
<div class="header-gazou-inner">
<?php if (is_front_page() && !is_paged()){dynamic_sidebar(7);}?>
</div>
</div>
<!-- /PCでのヘッダー画像 -->
<!-- スマホ&タブでのヘッダー画像 -->
<?php if ( get_the_headersp_image_url() ) : ?>
<div id="header-sp-wrap" class="pcnone">
<div id='header-sp' class="pcnone">
<img src='<?php echo get_the_headersp_image_url(); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'>
<div id="header-sp-innner-center">
　 <?php if (is_front_page() && !is_paged()){dynamic_sidebar(8);}?>
</div>
</div>
</div>
<?php else : ?>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<!-- /ヘッダー画像 -->
<?php if(is_front_page() && !is_paged()): ?>
<?php else : ?>
<div id="under-navi"></div>
<?php endif; ?>
<div id="wrapper">

[mkt38]

style.cssの一番最後に追加CSSのソースを丸ごとコピペしたらどうでしょうか？それでも変化がなければheader.phpの</head>の直前に
<style>
追加CSSのソース
</style>
を追加してみてください。

[退会済みユーザー]

こんばんは、取り急ぎ、テーマをGiraffeに変更して、style.cssの一番最後に追加CSSのソースを丸ごとコピペしてみましたが、変化ありませんでした。今日はもう寝るしかないので、header.phpの</head>の直前に
<style>
追加CSSのソース
</style>
は明後日にトライしてみます。ありがとうございます。

[退会済みユーザー]

急遽、出張になりました。明後日帰宅します。そして、トライしてみます。よろしくお願いします。

[退会済みユーザー]

こんばんは、出張から戻りました。連絡が遅くなってすみませんでした。
テーマをGiraffeに変更してheader.phpの</head>の直前に
<style>
追加CSSのソース
</style>
を試しましたが、効果がありませんでした。

[mkt38]

お返事遅れて申し訳ありません。出張お疲れ様でした。
マジすか...私的には割と最後の手段だったのですが...
あとはfanctions.phpに記述する方法とかがあるみたいです。
参考記事
https://ureshi-design.com/2018/07/02/amp-for-wordpress/
https://satohmsys.info/wordpress-amp-customize/
https://blogenist.jp/2018/12/18/7317/

[退会済みユーザー]

こんばんは、今ＡＭＰのセッティングの処を見ていましたが、カスタムCSSなる処をはっけんしました。
スクリーンショットを貼ります。ここに、追記すれば何とかなりそうですかね。
追記する内容をお教え下されば、トライしたいと思います。
宜しくお願い致します。

[mkt38]

おお！めっちゃ怪しいですね。
/ *******このcssにカスタムcssを貼り付けてください*******/
の下に追加CSS内のcssを丸ごとコピペしてみてください。
あと、念のため翻訳は解除しておいた方がいいかもしれません。

[退会済みユーザー]

丸ごとコピーしましたが、肝心の処は変化なしですが、ｈ２の大きさやフォントが変わりました。恐らくここのＣＳＳをいじれば良さそうですが、もう少しアドバイスが欲しいです。

[mkt38]

コピーしたcssの内容を教えていただけますか？

[退会済みユーザー]

こんばんは。しごおわです。
返信ありがとうございます。

突っ込んだcssは以下です。宜しくお願い致します。

h2 {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}

.box17{
margin:2em 0;
position: relative;
padding: 0.5em 1.5em;
border-top: solid 2px black;
border-bottom: solid 2px black;
}
.box17:before, .box17:after{
content: '';
position: absolute;
top: -10px;
width: 2px;
height: -webkit-calc(100% + 20px);
height: calc(100% + 20px);
background-color: black;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
margin: 0;
padding: 0;
}

.diagnosis-wrap .question{
margin-bottom:1.5em;
}
.diagnosis-wrap .question .qcontents{
margin-bottom:.5em;
font-weight:bold;
}
.diagnosis-wrap .question .qselect span{
display:block;
}
.diagnosis-wrap .question .qselect span input{
margin:0 5px;
}
.diagnosis-wrap .submit input{
padding:1em;
width:300px;
max-width:80%;
margin-bottom:1em;
}

@media

screen and (max-width: 536px){
.amp-logo {
display: flex;
padding-top: 4px;
}
#blog-title-text{
line-height: initial;
}

header .descr {
padding:0;
}

}

@media screen and (max-width: 536px){
header h1{
line-height:1px;
}
}

[mkt38]

お疲れ様です。
最後の
@media screen and (max-width: 536px){
header h1{
line-height:1px;
}
}
を消して、

#header {
display: flex;
align-items: center;
}
.headerlogo {
width: 100%;
}
#header .amp-logo {
padding: 0;
}
#header h1 {
padding: 0 20px 0 10px;
line-height: normal;
}

とすればいい感じになると思います。

[退会済みユーザー]

つ、ついにやりました！！！！
目的を達成出来ました。ありがとうございます！！！

[mkt38]

おお！おめでとうございます！！
思いの外時間がかかってしまって申し訳ないです...
私も勉強になりました！

[退会済みユーザー]

じ、実は、改善出来た処のタイトルがページを下にスクロールするとついてきてしまってスゴクうざいのです...ど、どうしたら良いでしょうか。近く新しい質問をたてますので、その時は宜しくお願いします。

[mkt38]

ヘッダー部分がスクロールしても画面上部に固定されているという事でしょうか？
それでしたら
#headerwrap {
position: static;
}
で解消できると思いますよ。

Answer 2

普通にcssを記述しているうちは、要素は被ることありませんが、要素が被る場合は2パターンにわけられます。

1. 疑似要素を用いた場合
2. z-indexで階層化を行った場合

今回はz-indexは使用していなさそうなので、疑似要素を使っている部分が怪しいです。

.box17{
margin:2em 0;
position: relative;
padding: 0.5em 1.5em;
border-top: solid 2px black;
border-bottom: solid 2px black;
}
.box17:before, .box17:after{
content: '';
position: absolute;
top: -10px;
width: 2px;
height: -webkit-calc(100% + 20px);
height: calc(100% + 20px);
background-color: black;
}

ここで、疑似要素を使って、一定数のheight指定しているので、その要素が被っている可能性がありますね。

そして、positionを使用しているのに、次の要素に対してpositionやclear属性を使っていないので、被っていると考えられます。.box17要素の次の要素にposition: absolute;、あるいは.box17要素にclear:both;としても駄目でしょうか？

Comments

[退会済みユーザー]

FKM様
はじめまして、回答ありがとうございます。
box17要素の次の要素にposition: absolute;、あるいは.box17要素にclear:both;を入れ込んでみましたが
変化がありませんでした。入れ込んだ場所が間違っているかもしれませんので、質問の追記の処にいれたスクリーンショットを載せました。ご面倒でも確認して頂けると幸いです。

[FKM]

clear: bothはfloat制御してないので、意味ないですね、失礼しました。だとすると、疑似要素が100%＋20pxになっているので、.box17要素に疑似要素が出っ張っている分のheightを指定してあげればいけるのではないでしょうか。

[退会済みユーザー]

返信ありがとうございます。本当に素人で申し訳ありません。
教えて頂いた「.box17要素に疑似要素が出っ張っている分のheightを指定」
は以下の何処をどうしたら良いか、ご面倒でもお教え頂けると幸いです。

.box17{
margin:2em 0;
position: relative;
padding: 0.5em 1.5em;
border-top: solid 2px black;
border-bottom: solid 2px black;

}
.box17:before, .box17:after{
content: '';
position: absolute;
top: -10px;
width: 2px;
height: -webkit-calc(100% + 20px);
height: calc(100% + 20px);
background-color: black;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
margin: 0;
padding: 0;
}

[FKM]

まずはheight: 100%と.box17に入れてみてください。それでだめなら、.box17要素の次に来ているボックス要素に対して、margin-top: 20px;と足せば制御できるかも知れません。

[退会済みユーザー]

FKM様　返信ありがとうございます。
教えて頂いた2通りの追記をしましたが、変化ありませんでした。
大変申し訳ありません。