Word Press Twenty Seventeen サイトタイトル画像をクリックするとタイトル文字が出てきてしまいます。。

※ご指摘部分修正しました。

以前 Word Press Twenty Seventeen サイトタイトルを画像に変更し、その時は特に問題はなかったのですが、

昨日サイトタイトル画像をクリックしサイトトップに戻ろうとした所、サイトタイトル画像にサイト基本情報で入力したサイトのタイトルが表示され、その文字をクリックすることでサイトトップに飛ぶようになってしまっていました。

その文字も常時表示されるわけではなくサイトに飛んだ直後は出ず、サイトタイトル画像をクリックすると現れます。
原因がわからず困っています、解決方法お分かりの方いらっしゃいましたら回答下さい。

■タイトル画像への変更はプラグインを作り下記の記述をして行いました。

<?php /* Plugin Name: my-plugin Plugin URI: Description: My Plugin For WordPress. Version:1.0 Author:my name Author URI: License: GPLv2 or later */ /* * ヘッダー埋め込みCSS タイトルを画像に変更 * Twenty Seventeen ver2.2 * * License: GPLv2 or later */ function nendebcom_add_header_css() { ?> <style type="text/css"> .site-branding{ max-width: 450px; width: 450px; } .site-title, h1.site-title { background-image: url("http://xxxxxxx.png"); background-position: left top; background-repeat: no-repeat; background-size: contain; display: block; height: 0; overflow: hidden; padding-top: 123px; width: 100%; </style> <?php } add_action( 'wp_head', 'nendebcom_add_header_css' , 99 ); ![イメージ説明](125ccf4b67c34e1f69c6706842eef0dd.png)

Takumiboo

2020/03/06 02:20

この質問で解決方法が分かる人はエスパーの持ち主です。 > サイトタイトルを画像に変更し →どのように変更したのか？ > Twenty Seventeen上で入力した文字 →どこに入力した、なんの文字が表示されるのか？カスタマイズした部分とその方法、ソースコード、現象を表しているスクリーンショットなどがあるといいでしょう。

yoorwm

2020/03/06 02:53

> Twenty Seventeen上で入力した文字が画像が表示され文字なの？画像なの？など、日本語が怪しい箇所もあるので、よく確かめてみる癖をつけると良いかと思います。（設定ファイル等の確認をお願いしても、質問文自体がおかしいと、そもそも間違いに気づくのか？という所から疑問が出てきます。）

Lhankor_Mhy

2020/03/07 01:11

nendebcom ってどこかで見たなあ……、と思ったら、不動産プラグイン作ってるとこですね。私も使ったことあります。同業者かな？ところで、ご提示の部分には原因がないと思います。クリックしたら表示されるのであれば、十中八九 JavaScript が原因でしょう。そのページのソースコードをご提示いただくことは可能ですか？もちろん、そのページのURLでも構いません。

yuusuke001

2020/03/08 23:38

Lhankor_Mhy様　ご連絡が遅くなりすみません。　HPにアクセス制限がされており解除に手間取っています。　ソースコードを載せる場合文字数オーバーとなってしまうようですので制限解除後改めてURLを記載させて頂きます。

yuusuke001

2020/03/09 00:10 編集

<!DOCTYPE html> <html lang="ja" class="no-js no-svg"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script> <title>テストサイト – このHPはテスト用です</title> <link rel='dns-prefetch' href='//s.w.org' /> <link rel="alternate" type="application/rss+xml" title="テストサイト » フィード" href="http://wptest.airpro-net.com/feed/" /> <link rel="alternate" type="application/rss+xml" title="テストサイト » コメントフィード" href="http://wptest.airpro-net.com/comments/feed/" /> <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:\/\/wptest.airpro-net.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.3.2"}}; !function(e,a,t){var r,n,o,i,p=a.createElement("canvas"),s=p.getContext&&p.getContext("2d");function c(e,t){var a=String.fromCharCode;s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,e),0,0);var r=p.toDataURL();return s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,t),0,0),r===p.toDataURL()}function l(e){if(!s||!s.fillText)return!1;switch(s.textBaseline="top",s.font="600 32px Arial",e){case"flag":return!c([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])&&(!c([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!c([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]));case"emoji":return!c([55357,56424,55356,57342,8205,55358,56605,8205,55357,56424,55356,57340],[55357,56424,55356,57342,8203,55358,56605,8203,55357,56424,55356,57340])}return!1}function d(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(i=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},o=0;o<i.length;o++)t.supports[i[o]]=l(i[o]),t.supports.everything=t.supports.everything&&t.supports[i[o]],"flag"!==i[o]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[i[o]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(r=t.source||{}).concatemoji?d(r.concatemoji):r.wpemoji&&r.twemoji&&(d(r.twemoji),d(r.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>

yuusuke001

2020/03/09 00:11 編集

yuusuke001

2020/03/09 00:12 編集

yuusuke001

2020/03/09 00:14 編集

<div class="wrap"> <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="トップメニュー"> <button class="menu-toggle" aria-controls="top-menu" aria-expanded="false"> <svg class="icon icon-bars" aria-hidden="true" role="img"> <use href="#icon-bars" xlink:href="#icon-bars"></use> </svg><svg class="icon icon-close" aria-hidden="true" role="img"> <use href="#icon-close" xlink:href="#icon-close"></use> </svg>メニュー </button> <div class="menu-%e3%83%88%e3%83%83%e3%83%97%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc-container"><ul id="top-menu" class="menu"><li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-19"><a href="http://wptest.airpro-net.com/" aria-current="page">ホームページ</a></li> <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://wptest.airpro-net.com/%e4%bc%9a%e7%a4%be%e6%a6%82%e8%a6%81/">会社概要</a></li> <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-21"><a href="http://wptest.airpro-net.com/%e3%83%96%e3%83%ad%e3%82%b0/">ブログ</a></li> <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://wptest.airpro-net.com/%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b/">お問い合わせ</a></li> </ul></div> <a href="#content" class="menu-scroll-down"><svg class="icon icon-arrow-right" aria-hidden="true" role="img"> <use href="#icon-arrow-right" xlink:href="#icon-arrow-right"></use> </svg><span class="screen-reader-text">本文までスクロール</span></a> </nav> </div> </div> </header> <div class="site-content-contain"> <div id="content" class="site-content"> <div class="wrap"> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <article id="post-1" class="post-1 post type-post status-publish format-standard hentry category-1"> <header class="entry-header"> <div class="entry-meta"><span class="screen-reader-text">投稿日:</span> <a href="http://wptest.airpro-net.com/2019/12/20/hello-world/" rel="bookmark"><time class="entry-date published updated" datetime="2019-12-20T14:22:51+09:00"></time></a></div><h3 class="entry-title"><a href="http://wptest.airpro-net.com/2019/12/20/hello-world/" rel="bookmark">Hello world!</a></h3> </header> <div class="entry-content"> <p>WordPress へようこそ。こちらは最初の投稿です。編集または削除し、コンテンツ作成を始めてください。</p> </div> </article> </main> </div> <aside id="secondary" class="widget-area" role="complementary" aria-label="ブログサイドバー"> <section id="text-2" class="widget widget_text"><h2 class="widget-title">アクセス</h2> <div class="textwidget"><p><strong>住所</strong><br /> 123 Main Street<br /> New York, NY 10001</p> <p><strong>営業時間</strong><br /> 月〜金: 9:00 AM – 5:00 PM<br /> 土日: 11:00 AM – 3:00 PM</p> </div> </section><section id="search-3" class="widget widget_search"><h2 class="widget-title">検索</h2> <form role="search" method="get" class="search-form" action="http://wptest.airpro-net.com/"> <label for="search-form-1"> <span class="screen-reader-text">検索:</span> </label> <input type="search" id="search-form-1" class="search-field" placeholder="検索 …" value="" name="s" /> <button type="submit" class="search-submit"><svg class="icon icon-search" aria-hidden="true" role="img"> <use href="#icon-search" xlink:href="#icon-search"></use> </svg><span class="screen-reader-text">検索</span></button> </form> </section><section id="text-3" class="widget widget_text"><h2 class="widget-title">このサイトについて</h2> <div class="textwidget"><p>ここには、自己紹介やサイトの紹介、あるいはクレジットの類を書くと良いでしょう。</p> </div> </section></aside> </div> </div>

yuusuke001

2020/03/09 00:19 編集

<footer id="colophon" class="site-footer" role="contentinfo"> <div class="wrap"> <aside class="widget-area" role="complementary" aria-label="フッター"> <div class="widget-column footer-widget-1"> <section id="text-4" class="widget widget_text"><h2 class="widget-title">アクセス</h2> <div class="textwidget"><p><strong>住所</strong><br /> 123 Main Street<br /> New York, NY 10001</p> <p><strong>営業時間</strong><br /> 月〜金: 9:00 AM – 5:00 PM<br /> 土日: 11:00 AM – 3:00 PM</p> </div> </section> </div> <div class="widget-column footer-widget-2"> <section id="text-5" class="widget widget_text"><h2 class="widget-title">このサイトについて</h2> <div class="textwidget"><p>ここには、自己紹介やサイトの紹介、あるいはクレジットの類を書くと良いでしょう。</p> </div> </section><section id="search-4" class="widget widget_search"><h2 class="widget-title">検索</h2> <form role="search" method="get" class="search-form" action="http://wptest.airpro-net.com/"> <label for="search-form-2"> <span class="screen-reader-text">検索:</span> </label> <input type="search" id="search-form-2" class="search-field" placeholder="検索 …" value="" name="s" /> <button type="submit" class="search-submit"><svg class="icon icon-search" aria-hidden="true" role="img"> <use href="#icon-search" xlink:href="#icon-search"></use> </svg><span class="screen-reader-text">検索</span></button> </form> </section> </div> </aside> <nav class="social-navigation" role="navigation" aria-label="フッターソーシャルリンクメニュー"> <div class="menu-%ef%bb%bf%e3%82%bd%e3%83%bc%e3%82%b7%e3%83%a3%e3%83%ab%e3%83%aa%e3%83%b3%e3%82%af%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc-container"><ul id="menu-%ef%bb%bf%e3%82%bd%e3%83%bc%e3%82%b7%e3%83%a3%e3%83%ab%e3%83%aa%e3%83%b3%e3%82%af%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc" class="social-links-menu"><li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23"><a href="https://www.yelp.com"><span class="screen-reader-text">Yelp</span><svg class="icon icon-yelp" aria-hidden="true" role="img"> <use href="#icon-yelp" xlink:href="#icon-yelp"></use> </svg></a></li> <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24"><a href="https://www.facebook.com/wordpress"><span class="screen-reader-text">Facebook</span><svg class="icon icon-facebook" aria-hidden="true" role="img"> <use href="#icon-facebook" xlink:href="#icon-facebook"></use> </svg></a></li> <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="https://twitter.com/wordpress"><span class="screen-reader-text">Twitter</span><svg class="icon icon-twitter" aria-hidden="true" role="img"> <use href="#icon-twitter" xlink:href="#icon-twitter"></use> </svg></a></li> <li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26"><a href="https://www.instagram.com/explore/tags/wordcamp/"><span class="screen-reader-text">Instagram</span><svg class="icon icon-instagram" aria-hidden="true" role="img"> <use href="#icon-instagram" xlink:href="#icon-instagram"></use> </svg></a></li> <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27"><a href="mailto:wordpress@example.com"><span class="screen-reader-text">メール</span><svg class="icon icon-envelope-o" aria-hidden="true" role="img"> <use href="#icon-envelope-o" xlink:href="#icon-envelope-o"></use> </svg></a></li> </ul></div> </nav> <div class="site-info"> <small>© 2020 テストサイト, All rights reserved.</small> </div> </div> </footer> </div> </div> <script type='text/javascript'> /* <![CDATA[ */ var twentyseventeenScreenReaderText = {"quote":"<svg class=\"icon icon-quote-right\" aria-hidden=\"true\" role=\"img\"> <use href=\"#icon-quote-right\" xlink:href=\"#icon-quote-right\"><\/use> <\/svg>","expand":"\u30b5\u30d6\u30e1\u30cb\u30e5\u30fc\u3092\u5c55\u958b","collapse":"\u30b5\u30d6\u30e1\u30cb\u30e5\u30fc\u3092\u9589\u3058\u308b","icon":"<svg class=\"icon icon-angle-down\" aria-hidden=\"true\" role=\"img\"> <use href=\"#icon-angle-down\" xlink:href=\"#icon-angle-down\"><\/use> <span class=\"svg-fallback icon-angle-down\"><\/span><\/svg>"}; /* ]]> */ </script> <script type='text/javascript' src='http://wptest.airpro-net.com/wp-content/themes/twentyseventeen/assets/js/skip-link-focus-fix.js?ver=1.0'></script> <script type='text/javascript' src='http://wptest.airpro-net.com/wp-content/themes/twentyseventeen/assets/js/navigation.js?ver=1.0'></script> <script type='text/javascript' src='http://wptest.airpro-net.com/wp-content/themes/twentyseventeen/assets/js/global.js?ver=1.0'></script> <script type='text/javascript' src='http://wptest.airpro-net.com/wp-content/themes/twentyseventeen/assets/js/jquery.scrollTo.js?ver=2.1.2'></script> <script type='text/javascript' src='http://wptest.airpro-net.com/wp-includes/js/wp-embed.min.js?ver=5.3.2'></script> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

yuusuke001

2020/03/09 00:23 編集

yuusuke001

2020/03/08 23:53

ソースコードをここまで分割で貼らせていただきました。

Lhankor_Mhy

2020/03/09 00:49

コメント欄に投稿すると、クォートが変換されてしまって、そのままでは使えないですね……

Lhankor_Mhy

2020/03/09 00:53

アンパサンドが&#038となっているのは、実際のコードのままですか？

yuusuke001

2020/03/09 04:49

アクセス制限解除ができました。http://wptest.airpro-net.com/　がURLとなります。ご質問のアンパサンド&#038は確認できませんでした。

Lhankor_Mhy

2020/03/09 08:25 編集

拝見しました。当方の環境で閲覧すると、常に表示されていました。（IE11、Chrome、Firefox、Edge）つまり、「サイトに飛んだ直後は出ず、サイトタイトル画像をクリックすると現れます」という問題が再現しません。問題が再現するであろう環境をご提示いただけますか？

Lhankor_Mhy

2020/03/09 08:30

ああ、失礼しました。表示させたくないのは「テストサイト」という文字の方でしたか。では、常に表示されていませんでしたし、クリックしても反応しませんでした。やはり、「サイトに飛んだ直後は出ず、サイトタイトル画像をクリックすると現れます」という問題が再現しません。問題が再現するであろう環境をご提示いただけますか？

Lhankor_Mhy

2020/03/09 08:37

また、「サイトタイトル画像」とは具体的にはどの画像のことなのかもご提示ください。

yuusuke001

2020/03/09 10:31 編集

ご確認ありがとうございました。本件症状はデスクトップPC（win10 64bit egdgブラウザ）で確認したものですが、ご指摘からノートPC（win7 64bit IEブラウザ）で試した所、追加しました最下部写真のようにタイトル文字はでず、リンクも反応しませんでしたが、赤丸の箇所にマウスを合わせると、そこにリンク箇所があるようでカーソルが矢印から指に変わりクリックすることで、トップ画面に戻ってきました。サイトタイトル画像は２番めの写真の赤丸内のグレーの部分です。サイトタイトル文字の代わりに画像に変更しました。

Lhankor_Mhy

2020/03/09 10:32

文字が表示されなくなったということで、ご解決、と理解してよろしいですか？

yuusuke001

2020/03/09 22:42

スレタイトルからするとそういう事になりますね。。サイトタイトル文字問題が解消されれば自然と解決となると思ったのですが。。すみません。現在サイトタイトル画像に対してリンクの位置もズレているようですので、サイトタイトル画像をクリックするとトップ画面に戻るようにさせるのが最終的目的です。

Lhankor_Mhy

2020/03/10 00:56

なるほど、問題が特定できましたね。これで解答できそうですが、他の方の回答もお望みでしたら、質問文も編集しておいた方がいいかもしれません。

行動規範の内容に同意します

回答1件

ベストアンサー

サイトタイトル画像をクリックするとトップ画面に戻るようにさせるのが最終的目的

↓このように変更するとどうなりますか？

css
1.site-title a, h1.site-title a {
2background-image: url("http://xxxxxxx.png");
3background-position: left top;
4background-repeat: no-repeat;
5background-size: contain;
6display: block;    
7height: 0;
8overflow: hidden;
9padding-top: 123px;
10width: 100%;