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

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

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

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

Q&A

解決済

2回答

2432閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

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

0グッド

0クリップ

投稿2019/11/13 10:16

編集2019/12/09 13:19

前提・実現したいこと

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

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

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

イメージ説明

該当のページです。

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

html

1<div class="headerlogo"> <div class="amp-logo"> <h1> <a href="https://sunutuku.work/?nonamphead=1" rel="nofollow">職場での人間関係・ストレス・悩みをすっきり完全解決</a></h1> </div> </div> 2 3```css 4.headerlogo { 5 margin: 0 auto; 6 width: 80%; 7 text-align: center; 8} 9user agent stylesheet 10div { 11 display: block; 12} 13#header { 14 background: #fff; 15 text-align: center; 16 height: 50px; 17 box-shadow: 0 0 32px rgba(0,0,0,.15); 18} 19Style Attribute { 20 opacity: 1; 21 visibility: visible; 22 animation: 0s ease 0s 1 normal none running none; 23} 24body { 25 font: 16px/1.4 Sans-serif; 26} 27body { 28 -webkit-text-size-adjust: 100%; 29 -moz-text-size-adjust: 100%; 30 -ms-text-size-adjust: 100%; 31 text-size-adjust: 100%; 32} 33 34user agent stylesheet 35html { 36 color: -internal-root-color; 37} 38 39@media screen and (max-width: 536px) 40.amp-logo { 41 display: flex; 42 padding-top: 4px; 43} 44@media screen and (max-width: 536px) 45.amp-logo { 46 display: flex; 47 padding-top: 4px; 48} 49user agent stylesheet 50div { 51 display: block; 52} 53.headerlogo { 54 margin: 0 auto; 55 width: 80%; 56 text-align: center; 57} 58#header { 59 background: #fff; 60 text-align: center; 61 height: 50px; 62 box-shadow: 0 0 32px rgba(0,0,0,.15); 63} 64Style Attribute { 65 opacity: 1; 66 visibility: visible; 67 animation: 0s ease 0s 1 normal none running none; 68} 69body { 70 font: 16px/1.4 Sans-serif; 71} 72body { 73 -webkit-text-size-adjust: 100%; 74 -moz-text-size-adjust: 100%; 75 -ms-text-size-adjust: 100%; 76 text-size-adjust: 100%; 77} 78user agent stylesheet 79html { 80 color: -internal-root-color; 81} 82 83#header h1 { 84 text-align: center; 85 font-size: 16px; 86 position: relative; 87 font-weight: bold; 88 line-height: 50px; 89 padding: 0; 90 margin: 0; 91 text-transform: uppercase; 92} 93user agent stylesheet 94h1 { 95 font-size: 2em; 96 font-weight: bold; 97} 98.headerlogo { 99 margin: 0 auto; 100 width: 80%; 101 text-align: center; 102} 103#header { 104 background: #fff; 105 text-align: center; 106 height: 50px; 107 box-shadow: 0 0 32px rgba(0,0,0,.15); 108} 109Style Attribute { 110 opacity: 1; 111 visibility: visible; 112 animation: 0s ease 0s 1 normal none running none; 113} 114body { 115 font: 16px/1.4 Sans-serif; 116} 117body { 118 -webkit-text-size-adjust: 100%; 119 -moz-text-size-adjust: 100%; 120 -ms-text-size-adjust: 100%; 121 text-size-adjust: 100%; 122} 123 124user agent stylesheet 125html { 126 color: -internal-root-color; 127} 128

css (ワードプレスでの追加cssに記載されているコードです。)

1 2h2 { 3padding: 0.5em;/*文字周りの余白*/ 4color: #494949;/*文字色*/ 5background: #fffaf4;/*背景色*/ 6border-left: solid 5px #ffaf58;/*左線(実線 太さ 色)*/ 7} 8 9 10.box17{ 11 margin:2em 0; 12 position: relative; 13 padding: 0.5em 1.5em; 14 border-top: solid 2px black; 15 border-bottom: solid 2px black; 16} 17.box17:before, .box17:after{ 18 content: ''; 19 position: absolute; 20 top: -10px; 21 width: 2px; 22 height: -webkit-calc(100% + 20px); 23 height: calc(100% + 20px); 24 background-color: black; 25} 26.box17:before {left: 10px;} 27.box17:after {right: 10px;} 28.box17 p { 29 margin: 0; 30 padding: 0; 31} 32 33 34 35.diagnosis-wrap .question{ 36 margin-bottom:1.5em; 37} 38.diagnosis-wrap .question .qcontents{ 39 margin-bottom:.5em; 40 font-weight:bold; 41} 42.diagnosis-wrap .question .qselect span{ 43 display:block; 44} 45.diagnosis-wrap .question .qselect span input{ 46 margin:0 5px; 47} 48.diagnosis-wrap .submit input{ 49 padding:1em; 50 width:300px; 51 max-width:80%; 52 margin-bottom:1em; 53} 54 55 56@media 57 58 screen and (max-width: 536px){ 59 .amp-logo { 60 display: flex; 61 padding-top: 4px; 62 } 63 #blog-title-text{ 64 line-height: initial; 65 } 66 67 header .descr { 68padding:0; 69} 70 71} 72 73

試したこと

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

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

ありません。

追記です。ワードプレスのcss追加の処全てのスクリーンショットです。
イメージ説明
イメージ説明
イメージ説明
イメージ説明
どうぞよろしくお願いいたします。

イメージ説明
入れ込んでみましたが、変化がありませんでした。

FKM様へイメージ説明

AMP解除すると直ります。
イメージ説明

mkt38様へ
イメージ説明
イメージ説明

mkt38様へ
イメージ説明

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

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

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

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

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

guest

回答2

0

ベストアンサー

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

追記:
でしたら

css

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

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

追記:

イメージ説明

投稿2019/11/15 07:23

編集2019/11/20 02:58
mkt38

総合スコア50

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

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

退会済みユーザー

退会済みユーザー

2019/11/17 13:44

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

退会済みユーザー

2019/11/18 10:23

回答ありがとうございます。とても感謝しています。教えて頂いたcssを追加しましたが、変化がありませんでした。 ちなみに、現状のcssの最後に @media screen and (max-width: 536px){ .amp-logo { display: flex; padding-top: 4px; } となっています。この後に教えて頂いたcssを追加しても変化なしでした。 大変申し訳ありませんが、引き続きご支援お願いいたします。
mkt38

2019/11/18 10:47

そうですか... ちょっと自信ないですが最後の部分を @media screen and (max-width: 536px){ .amp-logo { display: flex; padding-top: 4px; } header h1 { line-height: ◯◯px; } } としたらどうなるでしょうか? あと念のためですが、「◯◯px」の部分はいい感じの値を入れてください。
退会済みユーザー

退会済みユーザー

2019/11/18 11:28

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

2019/11/19 01:43

@media screen and (max-width: 536px) {} 内の line-height を line-height: ◯◯px !important; としてもだめでしょうか? そうなると @media 内のスタイル自体が適応されてない可能性も... それか line-height で余白を調整せずに padding で調整されてはどうでしょうか?
退会済みユーザー

退会済みユーザー

2019/11/19 10:00

こんばんは。しごおわです。連絡ありがとうございます。心強いです。 早速、教えて頂いた、上記の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

2019/11/19 10:43

お仕事お疲れ様です。 当該ページを閲覧できれば良いのですがそういうわけにも行きませんよね... ちなみにですが<header>全体のHTML構造はどのようになっているのでしょうか?
退会済みユーザー

退会済みユーザー

2019/11/19 12:27

返信ありがとうございます。感謝です。 当該ページって、ワードプレスのダッシュボードの事ですか? ・クロームの検証から確認してみました。 ・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

2019/11/20 03:16

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

退会済みユーザー

2019/11/20 09:55

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

2019/11/20 10:05

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

退会済みユーザー

2019/11/20 10:32

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

2019/11/20 10:47

スクショ拝見しました。 header h1 を #header h1 としてみたらどうでしょうか?
退会済みユーザー

退会済みユーザー

2019/11/20 11:24

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

2019/11/20 11:56

そうですか、謎だ... こうなったらスマホ時に line-height を調整する作戦はやめましょう。 #header { display: flex; align-items: center; } #header h1 { line-height: normal; } としたらどうでしょうか? @media の直前に追加してみてください。
退会済みユーザー

退会済みユーザー

2019/11/20 12:33

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

2019/11/21 04:52 編集

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

退会済みユーザー

2019/11/21 10:20

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

2019/11/21 11:09

style.cssの中身ってどーなってます?
退会済みユーザー

退会済みユーザー

2019/11/21 11:34

返信ありがとーございます。 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

2019/11/22 05:12

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

退会済みユーザー

2019/11/22 13:31

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

2019/11/22 14:18

お疲れ様です。試しにそのプラグインを無効化したらどうなるでしょうか?
退会済みユーザー

退会済みユーザー

2019/11/22 14:42

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

2019/11/22 15:39

外観→テーマの編集のテーマファイルの欄にampというディレクトリはありますか?
退会済みユーザー

退会済みユーザー

2019/11/23 02:58

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

2019/11/23 06:00

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

退会済みユーザー

2019/11/23 12:03

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

2019/11/24 07:04

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

退会済みユーザー

2019/11/25 12:02

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

2019/11/26 05:42

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

退会済みユーザー

2019/11/26 08:06

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

2019/11/26 09:24

AMP導入以前はどこでCSSの編集してました?
退会済みユーザー

退会済みユーザー

2019/11/27 11:53

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

2019/11/29 02:05

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

退会済みユーザー

2019/11/30 10:18

返信が遅れて誠に申し訳ありません。 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

2019/11/30 14:18

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

退会済みユーザー

2019/12/01 05:00

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%;}
退会済みユーザー

退会済みユーザー

2019/12/01 05:02

editor-style.cssの中身は以下でした。 .mceContentBody{ width:100%; }
退会済みユーザー

退会済みユーザー

2019/12/01 05:03

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' ); ?>
退会済みユーザー

退会済みユーザー

2019/12/01 05:04

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

2019/12/01 12:06

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

退会済みユーザー

2019/12/01 13:02

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

退会済みユーザー

2019/12/03 00:24

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

退会済みユーザー

2019/12/07 10:37

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

退会済みユーザー

2019/12/09 13:16

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

2019/12/10 01:53 編集

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

退会済みユーザー

2019/12/10 13:56

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

2019/12/11 06:58

コピーしたcssの内容を教えていただけますか?
退会済みユーザー

退会済みユーザー

2019/12/11 10:00

こんばんは。しごおわです。 返信ありがとうございます。 突っ込んだ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

2019/12/11 10:26

お疲れ様です。 最後の @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; } とすればいい感じになると思います。
退会済みユーザー

退会済みユーザー

2019/12/12 12:46

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

2019/12/12 13:49

おお!おめでとうございます!! 思いの外時間がかかってしまって申し訳ないです... 私も勉強になりました!
退会済みユーザー

退会済みユーザー

2019/12/15 12:58

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

2019/12/16 02:02

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

0

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

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

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

css

1.box17{ 2margin:2em 0; 3position: relative; 4padding: 0.5em 1.5em; 5border-top: solid 2px black; 6border-bottom: solid 2px black; 7} 8.box17:before, .box17:after{ 9content: ''; 10position: absolute; 11top: -10px; 12width: 2px; 13height: -webkit-calc(100% + 20px); 14height: calc(100% + 20px); 15background-color: black; 16}

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

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

投稿2019/11/22 02:16

FKM

総合スコア3608

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

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

退会済みユーザー

退会済みユーザー

2019/11/22 13:29

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

2019/11/23 00:58

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

退会済みユーザー

2019/11/23 03:11

返信ありがとうございます。本当に素人で申し訳ありません。 教えて頂いた「.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

2019/11/23 03:30 編集

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

退会済みユーザー

2019/11/23 04:08

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問