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

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

ただいまの
回答率

90.36%

  • PHP

    21243questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    7623questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 537

alesta

score 9

前提・実現したいこと

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

発生している問題

画像サイズを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;
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/01/29 17:57

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

    キャンセル

  • alesta

    2017/01/29 18:10

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

    キャンセル

  • kei344

    2017/01/30 18:11

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

    キャンセル

回答 3

+1

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

// 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";

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/29 16:57

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

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

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

    キャンセル

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/30 17:47

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

    キャンセル

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • PHP

    21243questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    7623questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。