Wordpress Twenty Seventeenのカスタムロゴ画像のサイズアップ

Question

Wordpress Twenty Seventyを使用した子テーマのカスタムＣＳＳを追加編集しています。

以下のようにstyle.cssに.custom-logo-linkクラスのカスタムロゴの画像を拡大しているのですが、
元々の読み込み画像が画質を落とされた画像になってしまってぼやけてしまいます。

.custom-logo-link img {
    top: -30px;
    right: 8%;
    width: auto;
    max-height: 38vh !important;
}

吐き出されたHTMLの記述一部（個人のものではないので一部公示できません）は以下のようになっています。
このなかのsizesの要素をいじれればいいとは思うのですが方法を知りません。

<img width="288" height="250" src="wordpressのURL/wp-content/uploads/cropped-titleimage-4.png" class="custom-logo" itemprop="logo" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px">

そこでこの画像をもともとの画像オリジナルサイズで読み込ませる方法があれば知りたいです。

Comments

[miyabi_pudding]

ご自分でどこまで調べられたでしょうか？
WordPress付属のテーマとお見受けしますので、
WordPress Wordpress Twenty Seventy CSS 修正
などで検索すれば、いろいろと出てきますよ。
また、環境依存で、質問者さんでしか再現できないような状況の可能性もあるため、
（付属のテーマなので入れれるっちゃいれれるが、作業依頼レベルで時間かかる）
質問をするなら、CSSの中身と、該当のHTMLの記載は必須かと思います。

[owowowsam]

失礼いたしました。ＣＳＳの中身とＨＴＭＬの記載を追記いたしました。もし方法をご存知でしたらご教示いただければ嬉しいです。

[miyabi_pudding]

質問修正、大変にありがとうございます。
WordPressと該当テーマの導入しての検証までは難しいので、
もしかしたら、的を射られないかもしれませんが、回答させていただきます。

Answer 1

子テーマのfunctions.phpに以下のように記述しカスタムロゴのクロップサイズの最大サイズを変更したら解決しました。もともと250 x 250 pxだったものを600 x 600に変更しました。

//画像サイズをオーバーライド
function change_custom() {
	
// Add theme support for Custom Logo.
	add_theme_support( 'custom-logo', array('default-image'=> 'wordpressのURL/wp-content/uploads/titleimage.png','width'=> 600,'height'=> 600,) );

	// Add theme support for selective refresh for widgets.
	add_theme_support( 'customize-selective-refresh-widgets' );
}
// 親テーマの後に実行
add_action( 'after_setup_theme', 'change_custom', 11);

Comments

[miyabi_pudding]

解決できてよかったですね！
function.phpは、テーマによってはいろいろな処理をしているので、追っていくと、解決の糸口が見つかりやすいかもしれませんね。

Answer 2

sizes属性によって、レスポンシブな画像の配置を行なっているようですね。
(max-width: 767px) 89vwの記述は、横幅767px以下のディスプレイに対しては、
画面横幅の89%のサイズにするという設定です。
同様にみるならば、最初二つに関しては、レスポンシブ対応のためそのままの方がよろしいかと思いますので、
一番右の、PC用と思われるものの数値を設定しましょう。
width、height属性に入っている数値をそのまま入れると、原寸表示になるはずです。
よって、下記でいかがでしょうか。

<img width="288" height="250" src="wordpressのURL/wp-content/uploads/cropped-titleimage-4.png" class="custom-logo" itemprop="logo" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 288px, 250px, (max-width: 1920px) 288px, 250px"

最後の1920pxの設定は一応です。
（横幅1071pxだと、超えるパターンがけっこうありそうなので）

Comments

[owowowsam]

ご回答ありがとうございます。もともとのテンプレートのHTMLの変更はできるだけしたくなく、style.cssをメインに編集する形で対応しています。このHTMLを定義している箇所がテーマファイルのどの箇所なのかまだご存知でしょうか。もしくはfunctions.phpなどからコントロールできるのであればいいと思うのですが。

[owowowsam]

追記すみません。詳しく言いますと
読み込み元のファイルがオリジナルの画像でなく、自動でリサイズされたcropped-titleimage-4.pngというものになってしまうのをオリジナルに変更したいのです。

[miyabi_pudding]

なるほど・・・・。
回答修正させていただきます。
どうか、その旨（HTMLテンプレートは変えたくない）と、
であれば、元のテンプレート構文（PHP）を質問本文に記載ください。
src=""に書かれている画像パス出力の構文は変更しても大丈夫でしょうか？
（オリジナルの画像を取得するという方法ならすぐ解決できそう）

[miyabi_pudding]

おそらく、サムネイルを取得するような構文になっているはずなので・・・、
オリジナルを取得するようにすれば大丈夫なはず・・・。
どうか、該当箇所のphpをご記載お願いします。

[owowowsam]

functions.phpに以下のような記述を見つけました。おそらくこれをいじれば変えられると思うのですがどう思われますでしょうか。

/**
* Add custom image sizes attribute to enhance responsive image functionality
* for content images.
*
* @since Twenty Seventeen 1.0
*
* @param string $sizes A source size value for use in a 'sizes' attribute.
* @param array $size Image size. Accepts an array of width and height
* values in pixels (in that order).
* @return string A source size value for use in a content image 'sizes' attribute.
*/
function twentyseventeen_content_image_sizes_attr( $sizes, $size ) {
$width = $size[0];

if ( 740 <= $width ) {
$sizes = '(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px';
}

if ( is_active_sidebar( 'sidebar-1' ) || is_archive() || is_search() || is_home() || is_page() ) {
if ( ! ( is_page() && 'one-column' === get_theme_mod( 'page_options' ) ) && 767 <= $width ) {
$sizes = '(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px';
}
}

return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'twentyseventeen_content_image_sizes_attr', 10, 2 );

[miyabi_pudding]

これは・・・。
https://laboradian.com/change-srcset-sizes-img-on-wp/
この記事によると、srcset属性が定義され、それぞれのサイズに合った画像が使用されるように出力されるはずなんですが・・・。
add_filterメソッドの第二引数が、テーマの関数名が入っているようなので、
URLの記事にある通りに、まずやってみていただけないでしょうか？

[owowowsam]

色々ありがとうございます。参考サイトも試してみましたが、改善されなかったのでいろいろ観察したところ読み込まれてた画像がカスタマイズ設定で最大250ｘ250にクロップされたものでした。
そのクロップ最大サイズがfunctions.php内に定義されていましたので、それを元に
以下のように子テーマのfunctions.phpで最大600pxまでに設定できるようオーバーライドするようにしたところ解決しました！
ヒントいただきありがとうございました！
```php
//画像サイズをオーバーライド
function change_custom() {

// Add theme support for Custom Logo.
add_theme_support( 'custom-logo', array('width'=> 600,'height'=> 600,'flex-width' => true,) );

// Add theme support for selective refresh for widgets.
add_theme_support( 'customize-selective-refresh-widgets' );
}
// 親テーマの後に実行
add_action( 'after_setup_theme', 'change_custom', 11);
```