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

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

新規登録して質問してみよう
ただいま回答率
85.51%
WordPress

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

Q&A

解決済

3回答

3430閲覧

ワードプレステーマを新しくすると、アイキャッチ画像(記事のサムネイル)が勝手に切り取られてしまうので、元画像(の縦横比)に直したい

mifomifo

総合スコア14

WordPress

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

1グッド

0クリップ

投稿2019/09/23 22:46

編集2019/09/23 22:54

前提・起きている現象

現在、サイトをリニューアル実行中です。
新しいテーマに切り替えたところ、縦横比が勝手に切り取られ、
横長のアイキャッチ画像(投稿記事のサムネイル)になってしまいました。
具体的には
従来750×500px ⇒ 新テーマ670×300
※横比はただの縮小のようですが、タテが勝手に300pxに切り取られているようです

イメージ説明

自分なりに調べたこと

新しく使用したテーマはこちらです https://jin-demo.jp/demo-1/ が、デモサイトはタテが300pxに切り取られたような形跡はありません。 おそらく自分のサイトのどこかに、何かしら設定ミスがあるのかと想像します。 が、今まで(旧テーマ)は750×500pxで、ちゃんと元画像の縦横比そのままの縮小が表示されていました。

考えられる原因

上記から、テーマ以外の部分、いわゆる「ワードプレス」としての自分のサイト設定が 何かしら原因を起こしているのでは?、というところまで行きつきました。 が、ワードプレスのどの部分がアイキャッチ(サムネイル)を司るのかがよくわかっていないので そのあたりのアドバイスをいただけると助かります。

補足情報(FW/ツールのバージョンなど)

バージョン 5.2.3

kyoya0819👍を押しています

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

既存のテーマの仕様に基づく画像サイズを変えるのはいいやり方ではないですが
ソースを追っかけていけばwp_get_attachment_image_src
the_post_thumbnailに類するものに行き当たるはずなので
そこの$sizeの引数をlargeなりに書き換えれば元の縦横比の画像が表示されるでしょう

既存テーマをカスタマイズする時は後々
レイアウト崩れとかの修正に追われる可能性を覚悟した方がいいです

やる時は子テーマで

投稿2019/09/24 06:31

KazuhiroHatano

総合スコア7802

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

テーマのドキュメントを確認したところ、仕様のようです。

https://jin-theme.com/manual/eyecatch-img/

JINではアップロードしてもらった画像を、16:9の比率になるよう自動トリミングするようになっています。そのため横幅が760px以上の画像をいれてもらえると綺麗に入ります(縦は自動で切り取られます。)

横幅を760px以上とするか、テーマ内を編集することで回避する方法もあるかもしれませんが、まずは、ご質問への回答としてはテーマの仕様によって切り取られていますということになります。

投稿2019/09/23 23:08

nullpot

総合スコア153

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mifomifo

2019/09/23 23:50

ありがとうございます。なるほど、テーマ仕様なんですね。これでひとまず、根本的な問題は解決しました! しかし >横幅を760px以上 1)自分の画像は、横4400×タテ3000で、その基準はクリアしている 2)デモサイトは、切り取られずに、ちゃんと縦も300px以上が表示されている ということを考えると、テーマ内のどこかをイジれば、切り取られずに表示できる、という理解でいいのでしょうか? ※初めてのテーマで慣れてないだけかもしれませんが、結構、くまなくチェックしたつもりなのですが・・・。 それともCSSで自分でカスタマイズしなければいけない、ということなのでしょうか? とにかく写真メインなので「勝手に切り取られる」のはなんとか避けたいです。涙
nullpot

2019/09/24 00:07

テーマのどこをいじれば、、、というのはテーマのソースを見なければ判断がつかなく、また、こちら有償テーマのようでちょっとダウンロードして検証も難しそうで、適切に回答できなくて申し訳ないです。
mifomifo

2019/09/24 05:42

ありがとうございます。 販売元のデモサイトが、高さ300px以上になっているので テーマ自体「切られない方法があるのでは?」と、淡い期待を寄せながら、 今一度、調べなおしてみます。
guest

0

ベストアンサー

上の方が仕様であることを説明していただいているので私からは対処方法をお教えいたします。
まずテーマフォルダの中にindex.phpというファイルがあると思います。そこにループがあると思いますのでその中のimgタグのwidth属性を編集していただけると解決するはずです。
もしなければコメントをいただければ他の解決方法をお考えいたします。

投稿2019/09/23 23:45

kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mifomifo

2019/09/24 05:40

助言ありがとうございます。まさかテーマを変えてアイキャッチでこんなに悩むとは思わず申し訳ありません。index.phpを確認してみたのですが下記が全文です。これはこれで思ったのと違う感じで恐縮です。 <?php get_header(); ?> <div id="contents"> <!--メインコンテンツ--> <main id="main-contents" itemscope itemtype="https://schema.org/Blog"> <?php get_template_part('include/liststyle/post-list'); ?> </main> <?php get_sidebar(); ?> </div> <?php get_footer(); ?> --------------------------------- ちなみにsingle.phpも念のため見てみましたが、はやりimgやwidthという記述はありませんでした。 cssで一元管理されているのでは?と思うのですが如何でしょうか。。。 よろしくお願いいたします。m(__)m
kyoya0819

2019/09/24 07:39

すみません 忘れてました アイキャッチはfunctions.phpの中にあります。functions.phpをご提示いただけませんか?
mifomifo

2019/09/24 08:51 編集

あーーーっ!!!ありましたありました!! もしかしてコレですかね???それらしきコードが2か所ありました ↓function.php(原文まま) 【1つめ】 //アイキャッチ画像 add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size(150, 150, true ); // 画像サイズを追加する add_image_size('cps_thumbnails', 320, 180,true); add_image_size('small_size', 640, 360,true); add_image_size('large_size', 1280, 720,true); 【2つめ】 // post_thumbnail で出力されるimgタグのカスタマイズ function custom_attribute( $html ){ // width height を削除する $html = preg_replace('/(width|height)="\d*"\s/', '', $html); return $html; } add_filter( 'post_thumbnail_html', 'custom_attribute' ); 【3つめ】 function cps_thumb_info($info) { global $post; $thumbnail_id = get_post_thumbnail_id($post->ID); //アタッチメントIDの取得 $image = wp_get_attachment_image_src( $thumbnail_id, 'small_size' ); //「full」サイズのアイキャッチの情報を取得 $thumb_src = $image[0]; //url $thumb_width = $image[1]; //横幅 $thumb_height = $image[2]; //高さ if ($info == "url"){ echo $thumb_src; }elseif ($info == "width"){ echo $thumb_width; }elseif ($info == "height"){ echo $thumb_height; } }
kyoya0819

2019/09/24 10:02

add_image_size('small_size', 640, 360,true);の値を変えてみてください。 width, heightです
kyoya0819

2019/09/24 10:05

add_image_size('small_size', 750, 500, true); でしょうか
mifomifo

2019/09/24 11:17

本当に丁寧にありがとうございます。ここまで来ると対価を支払いたいくらいです。 一応、該当箇所を編集し、新規投稿もしてみたのですがやはり16:9の比率は変わらないようでした。 だいたいの原因はわかりましたし、 あまり長くなっても申し訳ないので、次の返事を最後で、締め切りとさせていただこうかと思っています。 どうぞよろしくお願いいたします。
kyoya0819

2019/09/24 11:44

add_image_size('cps_thumbnails', 375, 250,true); add_image_size('small_size', 630, 420,true); add_image_size('large_size', 1200, 800,true); ではどうでしょうか? あとstyleも提示していただけませんか?
mifomifo

2019/09/24 11:55

ありがとうございます! やっぱり変わらないようでした。。。苦笑 でも、原因はわかりましたし、だいぶポイントは絞れたので、あとは自分でやれるだけやってみます! ダメなら諦めます。。。笑 本当に丁寧な解説、感謝感謝です!!
kyoya0819

2019/09/24 12:35 編集

原因究明できずすみません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問