インラインスタイルを省いて、サムネイルの画像サイズを変更したい

Question

###前提・実現したいこと
新着情報などに使用するサムネイル画像のサイズを変更したいです。
変更するためにインラインスタイルを除去したいのですが、どこまで修正してよいのかわかりませんでした。

###発生している問題
画像サイズをcssで指定しても、インラインスタイルの影響で反映されません。そして、ページコード内にstyle部分が見つからないのです。

###該当のソースコード

echo '<div class="attachment-image">'."\n";
echo '<img src="'.esc_url( $att_image[0] ).'" width="'.intval( $att_image[1] ).'" height="'.intval( $att_image[2] ).'" class="attachment-full-size" alt="'.esc_attr( $att_excerpt ).'" />'."\n";
if ( ! empty( $att_excerpt ) ) {
echo '<p class="attachment-text">'.esc_attr( $att_excerpt ).'</p>'."\n";
				} 
echo '</div>'."\n";
	} else {
			the_content();
	} ?>

こちらはsingle.phpです。
###試したこと
cssでclass名を付けてサイズを指定したがインラインスタイルの方が強いために反映されない。ページコードをいじってみたが画像まで消えてしまう。

echo '<img src="'.esc_url( $att_image[0] ).'" width="'.intval( $att_image[1] ).'" height="'.intval( $att_image[2] ).'" class="attachment-full-size" alt="'.esc_attr( $att_excerpt ).'" />'."\n";

single.phpのこのあたりにwidthやheightが記載されているので、intvalについても調べてみたのですがイマイチわかりませんでした。

※上記のsingle.phpのコードを変更しても反映されないのでfunction.phpにもサムネイルの情報がありましたのでそちらの可能性かと思いコードを追記しました。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
wordpress 4.7.1
theme：chocolate
php

以下にfunction.phpのコードを追加します。

// 2.1.1 - post-thumbnails
	add_theme_support( 'post-thumbnails' );

        // 2.1.1.0 - thumbnail image
        $thumbnail_crop_x = ( ! empty( $options['thumbnail_crop_x'] ) ) ? esc_attr( $options['thumbnail_crop_x'] ) : 'center';
	$thumbnail_crop_y = ( ! empty( $options['thumbnail_crop_y'] ) ) ? esc_attr( $options['thumbnail_crop_y'] ) : 'center';
	set_post_thumbnail_size( 300, 300, array( $thumbnail_crop_x, $thumbnail_crop_y ) );

	// 2.1.1.1 - Registers a new image size (post_thumbnails, single-post-thumbnail)
	$featured_size_w = ( ! empty( $options['featured_size_w'] ) ) ? absint( $options['featured_size_w'] ) : 700;
	$featured_size_h = ( ! empty( $options['featured_size_h'] ) ) ? absint( $options['featured_size_h'] ) : 350;
	$featured_crop = false;

	if ( ! empty( $options['featured_crop'] ) ) {
		if ( $options['featured_crop'] == 'crop' ) {
			$featured_crop_x = ( ! empty( $options['featured_crop_x'] ) ) ? esc_attr( $options['featured_crop_x'] ) : 'center';
			$featured_crop_y = ( ! empty( $options['featured_crop_y'] ) ) ? esc_attr( $options['featured_crop_y'] ) : 'center';
			$featured_crop = array( $featured_crop_x, $featured_crop_y );
		} else {
			$featured_crop = false;
		}
	}

	// 2.1.1.2 - Changed the name to "single-post-thumbnail" from "post_thumbnail"
	add_image_size( 'post_thumbnail', $featured_size_w, $featured_size_h, $featured_crop );
	add_image_size( 'single-post-thumbnail', $featured_size_w, $featured_size_h, $featured_crop );

	// 2.1.1.3 - Registers a new image size of home page (home-post-thumbnail)
	if ( ! empty( $options['show_featured_home'] ) ) {
		$featured_home_size_w = ( ! empty( $options['featured_home_size_w'] ) ) ? absint( $options['featured_home_size_w'] ) : 700;
		$featured_home_size_h = ( ! empty( $options['featured_home_size_h'] ) ) ? absint( $options['featured_home_size_h'] ) : 350;
		$featured_home_crop = true;

		if ( ! empty( $options['featured_home_crop'] ) ) {
			if ( $options['featured_home_crop'] == 'crop' ) {
				$featured_home_crop_x = ( ! empty( $options['featured_home_crop_x'] ) ) ? esc_attr( $options['featured_home_crop_x'] ) : 'center';
				$featured_home_crop_y = ( ! empty( $options['featured_home_crop_y'] ) ) ? esc_attr( $options['featured_home_crop_y'] ) : 'center';
				$featured_home_crop = array( $featured_home_crop_x, $featured_home_crop_y );
			} else {
				$featured_home_crop = false;
			}
		}

/* ----------------------------------------------
 * 2.1.1 - post-thumbnails
 * Image size square
 * --------------------------------------------*/

if ( ! function_exists( 'chocolat_post_thumbnail' ) ) :
function chocolat_post_thumbnail() {
	$img_size = 300;
	if ( has_post_thumbnail() ) {
		the_post_thumbnail( 'thumbnail', array( 'alt' => the_title_attribute( 'echo=0' ) ) );
	} else {
		global $post;
		$str = $post->post_content;
		$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
		$noimage_url = get_template_directory_uri() .'/img/common/thumbnail.png';
		$img_class = '';

		if ( preg_match( $searchPattern, $str, $imgurl ) ) {
			$noimage_url = $imgurl[2];
			$img_class = ' no-thumbnail-image';
		} else {
			$options = chocolat_get_option();
			if ( ! empty( $options['no_image_url'] ) ) {
				$noimage_url = $options['no_image_url'];
			}
		}
		echo '<img src="'.esc_url( $noimage_url ).'" class="attachment-thumbnail wp-post-image'.esc_attr( $img_class ).'" alt="'.the_title_attribute( 'echo=0' ).'" width="'.absint( $img_size ).'" height="'.absint( $img_size ).'" />';
	}
}
endif;

Comments

[kei344]

「インラインスタイルの方が強いため」はどのように判断されたのでしょうか。

[alesta]

開発者ツールで確認したところ、指定したcss（id,class）に横線が入りインラインスタイルが適用されていたからです。

[kei344]

「element.style」が設定されているということでしょうか？

[alesta]

すみません。調べましたが「element.style」とはなんでしょうか？

[kei344]

Chromeなどで閲覧した場合はそうかかれます。IEをお使いですか？その場合提示されている「インラインスタイル」ですね、すみません。

[alesta]

ブラウザはMicrosoft Edgeです。確認用でFFも使用しています。

[kei344]

まだ質問が「受付中」になっていますが、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。

Answer 1

出力されたHTML（ブラウザで「ページのソースを表示」）を確認して、<img style="width:50%;"> などスタイル（style=""）指定があるか確認してみてください。

指定がある場合はどこか別の箇所で指定されている（書かれているコード以外で出力されたものを確認している）可能性があります。

無い場合はページ表示後に JavaScript で追加されているので、WordPressプラグインなどが影響している可能性があります。

Comments

[alesta]

回答ありがとうございます。
確認したところ指定はあったのですが、書かれているファイルが見つかりませんでした。
なので、cssでサイズ指定に!impotantを付加して無理やり変更させました。

Answer 2

こういうこととは違うのでしょうか？

// echo '<img src="'.esc_url( $att_image[0] ).'" width="'.intval( $att_image[1] ).'" height="'.intval( $att_image[2] ).'" class="attachment-full-size" alt="'.esc_attr( $att_excerpt ).'" />'."\n";
echo '<img src="'.esc_url( $att_image[0] ).'" class="attachment-full-size" alt="'.esc_attr( $att_excerpt ).'" />'."\n";

Comments

[alesta]

コメントありがとうございます。

提示されたようにコードを修正してみたのですが、画像サイズは変わらず開発者ツールでも見たのですがインラインスタイルはまだかかっていました。

function.phpにサムネイルの記述があったのですが、あやふやで触るのは危険なので最悪CSSで！importantを付加するしかないのかなと考えてます。

Answer 3

cssのサイズ指定で!impotantコードを付加しインラインスタイルよりも強い指定を行った。