サポート » テーマ » 【Twenty Seventeen】記事幅一杯に画像を表示させたい

  • 解決済 yoshiyuki_h

    (@yoshiyuki_h)


    元々 twenty seventeen はページ幅が 1000px ですが、max-width: 1200px; としてページ全体の幅を 1200px に拡大しています。
    これに伴い、ブログポストの幅も 525px から最大幅 640px に広がっています。
    この幅一杯に画像も表示させたいのですが、525px にしかなりません。。。
    画像アップロード時の「大」サイズが 525px でしか出てきません。

    アップロード時の「フルサイズ」の選択や、アップロード後に「カスタムサイズ」で 640px 幅にしても効果がありません。

    本件の解決方法をご教示いただけますでしょうか。
    よろしくお願い致します。

    ヘルプの必要なページ: [リンクを見るにはログイン]

14件の返信を表示中 - 1 - 14件目 (全14件中)
  • wp-admin/options-media.php

    などで、アップロードされる画像のサイズを変更可能です。

    ただし、既にアップロードされた画像には適用されないので、Regenerate Thumbnails などのプラグインで再生成し、記事の画像を変更する必要があるかと思います。

    こんにちは

    「コンテンツ幅」の設定ではないでしょうか?
    https://wpdocs.osdn.jp/コンテンツ幅

    この場合、グローバル変数の $content_width を変更する必要があります。
    変更方法は、手前味噌ですが下記ページが参考になると思います。
    https://xakuro.com/blog/wordpress/886/

    既にアップロードされた画像については、@toro_unit さんが書かれているように再生成する必要があります。

    トピック投稿者 yoshiyuki_h

    (@yoshiyuki_h)

    toro_unit 様、ishitaka 様

    ご返信・ご教示ありがとうございます。

    >ishitaka 様
    ご案内いただいた WordPress Codex のコンテンツ幅解説と ishitaka 様の「WordPress Twenty Seventeen テーマのページ幅を変更」を拝読しました。

    しかし、Twenty Seventeen テーマではこの方法で親テーマの設定を更新できません。
    子テーマで $content_width を変更するには、下記のように記述しないと更新できないようです。

    とのことですが、私の場合子テーマを使っておらず、外観>カスタマイズ>CSS の追加 に

    /* Layout サイト全体の幅を拡大する*/
    .wrap {
    max-width: 1200px;
    padding-left: 3em;
    padding-right: 3em;
    }

    的な記載をしております。
    可能でしたらこのような場合の対応についてご教示いただけますでしょうか。
    よろしくお願い致します。

    とりあえず、子テーマを使用することをおすすめします。とりあえずね・・・。

    子テーマを使用しない場合は、functions.php の下記の記述(59 行目あたり)の 525 を変更するのが手っ取り早いでしょうか。

    // Set the default content width.
    $GLOBALS['content_width'] = 525;

    試してみたところ、幅640ピクセルの画像が表示されました。

    1. 新規にインストールした WordPress 4.9.5 でテーマ Twenty Seventeen を選択。
    2. 外観 > カスタマイズ> 追加CSS に @yoshiyuki_h さんのコードを記述。
    3. 新規投稿を作成し、メディアを追加 をクリック。
    4. 幅1920のjpegファイルをアップロード。
    5. フルサイズを指定して投稿へ貼り付け。
    6. 投稿を 公開 で保存してから、個別投稿ページで投稿を表示(管理画面ではなく).

    さらに、追加CSS を消してから、上記で作成した投稿をもう一度表示すると、幅525ピクセルになりました(フルサイズなので当然だと思いますが)。

    @gblsm さん、こんにちは。

    画像アップロード時の「大」サイズが 525px でしか出てきません。

    大サイズのようです。

    @ishitaka さん

    アップロード時の「フルサイズ」の選択や、アップロード後に「カスタムサイズ」で 640px 幅にしても効果がありません。

    効果がありません、という点を検証してみたのですけれど、関係なかったんですね。失礼しました。

    効果がありません、という点を検証してみたのですけれど、

    おっと、@gblsm さん、失礼しました。

    こんにちは、

    カスタマイザ / 追加CSS

    
    img{
     width:100%;
     height:auto;
    }
    

    では、だめなんですか?

    • この返信は5年、 11ヶ月前にnobitaが編集しました。
    トピック投稿者 yoshiyuki_h

    (@yoshiyuki_h)

    皆様

    ご返信、アドバイスありがとうございます。
    確認させていただき、また報告致します。

    引き続き、どうぞよろしくお願い致します。

    引き続き、

    子テーマで $content_width を変更するには、下記のように記述しないと更新できないようです。

    これについては、Twentyseventeen テーマが、twentyseventeen_setup()内で、変数を定義しているため、フィルターなどで変数を上書きする場合は、多分 global $content_width;をフィルタ関数に記述すると、動作すると思います。

    
    add_action( 'after_setup_theme', 'my_twentyseventeen_setup',11);
    
    function my_twentyseventeen_setup(){
    	global $content_width;
    	
    	$GLOBALS['content_width'] = 640;		
    }
    

    しかし、この変更は、サーバサイドで、投稿に画像を挿入する場合の画像サイズとしてwidth属性に適用されるため、既に挿入済みの画像に対して、サイズを変更するといった事は出来ません。

    なので、クライアントサイドのCSSで処理するのが簡単ではないかと思い、CSSでサイズを指定するといいのではないかと思い、書き込みました。

    小さな画像サイズのものが、大きなサイズで表示されるといった懸念があるのかもしれませんが、投稿から、挿入される画像は、レスポンシブ画像なので、ベースサイズは768px位です。なので、たぶん行けると考えています。

    @yoshiyuki_h さんのサイトの場合、aligncenterクラスを使っているようなので、より細かく書くと

    
    img.aligncenter{
    width:希望の幅、
    height:auto;
    max-width:100%;
    }
    

    と指定する事で、コンテンツ幅いっぱいに表示することが出来るだろうという趣旨でしたが、

    テストしてみましたでしょうか?

    $GLOBALS なので、global $content_width は不要ですね。
    すみません、細かいことで誤記かとは思いますが気になったので・・・。

    @ishitaka さん

    ご指摘ありがとうございます。間違いでした。

    global $content_width は不要ですね

    • この返信は5年、 11ヶ月前にnobitaが編集しました。
    トピック投稿者 yoshiyuki_h

    (@yoshiyuki_h)

    皆様

    改めまして色々アドバイスありがとうございました _(..)_
    お陰様で無事に画像アップロード時にも「大」サイズとして「640*400」が出てくるようになりましたし、記事ページを PC(大きな画面) で見た際に画像もコンテンツ幅一杯(640px)で表示されるようになりました。

    ありがとうございました!

14件の返信を表示中 - 1 - 14件目 (全14件中)
  • トピック「【Twenty Seventeen】記事幅一杯に画像を表示させたい」には新たに返信することはできません。