Word Press twenty seventeen のサイトタイトルを画像に変更したのですが。。。

Question

Word Press twenty seventeen のサイトタイトルを画像に変更する際https://nendeb.com/53のサイトを参考に
Myplugin.phpに下記の記述をして有効化させた所、画像にはなったのですが２点の問題が起きました。

1.画像サイズ1000pxのものを表示させたいのですが、320px程度に画像が縮小される。
2.キャッチフレーズの文字数が全角12文字程度で改行され一行で表示できない。

1000pxの画像を表示させる方法とキャッチフレーズを50文字一行で表示させるにはどうすれば良いか
お教え願います。- リスト

/*

• ヘッダー埋め込みCSS タイトルを画像に変更
• Twenty Seventeen ver2.2
• License: GPLv2 or later

*/
function nendebcom_add_header_css() {
?>

<style type="text/css"> .site-branding{ max-width: 1000px; width: 1000px; } h1.site-title a { background-image: url("http://*******.png"); background-position: left top; background-repeat: no-repeat; background-size: contain; display: block; height: 0; overflow: hidden; padding-top: 89px; width: 100%; } </style> <?php } add_action( 'wp_head', 'nendebcom_add_header_css' , 99 );

Comments

[Lhankor_Mhy]

「キャッチフレーズ」とはなんですか？

Answer 1

1000pxの画像を表示させる方法

祖先要素の.site-branding-textについて

body:not(.title-tagline-hidden) .site-branding-text {
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
}

というスタイルがあったのが原因だと思います。

解決方法は、inline-blockをblockにすればいいかと思います。

キャッチフレーズを50文字一行で表示させるにはどうすれば良いか

「キャッチフレーズ」が何なのかわかりませんが、white-space: pre;などで改行を抑制すればいいのではないでしょうか。

Comments

[yuusuke001]

早々の回答ありがとうございました。ご回答頂きました通りinline-blockをblockに変更したことで解決できました。キャッチフレーズは画像の幅で折り返すようで、blockでこちらも解決致しました。
感謝致します。