サポート » テーマ » 無料テーマ「Focus」について

  • 解決済 theokanemaru

    (@theokanemaru)


    海外の無料テーマ「Focus」を使用しています。 → 配布先リンク
    撮影した写真一枚に付き一投稿を行い、簡易なギャラリーページとして使用しています。

    ヘルプの必要なページへのリンクは、ページ2です。ずらっと写真が並んでいますが、中段、”stone”と題した写真のアイキャッチ画像と、”apple”と題した写真のアイキャッチ画像のサイズに差異が見られます。”stone”の投稿をを含む、以前のアイキャッチ画像はサイズが380×254で統一されていますが(一部、縦長の写真等もあります)、”apple”以降は380×380で統一されてしまっています。投稿されている画像、および、アイキャッチに設定している画像のサイズはすべて同じです。
    F12で要素の検証を行ったところ、どうやら”apple”以降はアイキャッチ画像のURLにそのまま380×380とサイズの定義が行われているようです。特にイジったりもせず、いつも通り写真を投稿しただけなので、なぜこんなことになったのか不明で困っています。

    心当たりがあるとすれば、「Focus」テーマのアイキャッチ画像のデフォルトサイズが380×380らしいので、Focusテーマ導入当初に追加CSS欄に以下のようなCSSを追記したことです。

    @media screen and (min-width: 1280px) {
    .grid-view .entry-image {
    height: auto;
    }

    この記述を削除すると、今度は380×254のアイキャッチ画像の下部にグレーの余白が出現します(つまり、強制的に380×380で表示される)。
    要望としては、アイキャッチに設定した写真の寸法に合わせたアイキャッチ画像が自動で生成されれば一番良いと思っています。こちらのページなどは写真の寸法が違いますが、アイキャッチ画像は余白も無くトリミングされた様子もなく、きれいに収まっています。

    きちんと伝えられているか不明ですが、必要な情報があればすべて開示させていただきますので、よろしくお願いいたします。

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

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • 質問してから、問題のサイトを閲覧しますが、「Focus」テーマを最初から使用していましたか。”stone”の投稿をを含む、以前の投稿は別のテーマだったわけではないですね。

    ishitaka

    (@ishitaka)

    こんにちは

    テーマの変更前に登録された画像のサムネイルが生成されていないからだと思います。
    サムネイルを再生成するプラグイン(Regenerate Thumbnails など)などを使用して再生成するのはどうでしょうか?

    ishitaka

    (@ishitaka)

    なお、下記 CSS で画像サイズに関係なく正方形に表示させることはできると思います。参考まで。

    .grid-view .image-thumbnail {
    	position: relative;
    }
    .grid-view .image-thumbnail:before{
    	content: "";
    	display: block;
    	padding-top: 100%;
    }
    .grid-view .image-thumbnail img{
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	margin: auto;
    	object-fit: cover;
    }
    theokanemaru

    (@theokanemaru)

    >> 天宮耀子 さん

    返信ありがとうございます。大切なことを書き忘れていました。「Focus」テーマより前は、海外テーマ「Hamilton」を使用していました。”stone”を含む以前の投稿は、この”Hamilton”テーマが適用されておりました。

    theokanemaru

    (@theokanemaru)

    >> ishitakaさん

    ありがとうございます!
    教えていただいたプラグインを導入したところ、すべてのサムネイルが380×380で統一されました。それはいいのですが、縦横比が無視されるため一部の画像はトリミングされて見た目が悪くなってしまっています。参考ページ
    はじめにはっきりと明記しなかったこちらの落ち度ですが、縦横比を維持したままのサムネイルが生成できれば一番ありがたいです。以前の”stone”らサムネイルのサイズは縦横比が維持されていたので、サムネイルでも解像度が落ちず綺麗に表示されていました。

    二度手間三度手間をお掛けしますが、お知恵をお貸しくださればありがたく存じます。(以前、writeテーマの方でもお世話になりましたことを覚えています)

    ishitaka

    (@ishitaka)

    メディア設定(管理画面のメニューより、[設定]-[メディア設定])の「サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)」がオフになっているからではないでしょうか。

    theokanemaru

    (@theokanemaru)

    >> ishitakaさん

    確認しましたが、チェックは入っております。念のためもう一度チェックを入れ直し、サムネイルを再生成しましたがぼやけたままです。

    ishitaka

    (@ishitaka)

    Focus テーマとRegenerate Thumbnails プラグインをインストールして試してみましたが、サムネイルは実寸法にトリミングされました。ちょっと分からないですね。
    Regenerate Thumbnails の再生成のオプションの「すでに正しいサイズで存在するサムネイルの再生成をしない (高速)」をオフではどうでしょうか?

    theokanemaru

    (@theokanemaru)

    >> ishitakaさん

    ご教示の通りやってみましたが、やはりダメでした。一応、サイズの異なる画像をアップロードしてみましたがこれも上手くいきません。
    (書くのが遅いですが)これまでにやったことといえば、

    ・プラグイン「Hide Featured Image」を使用して、投稿ページ毎のアイキャッチ画像を非表示にしていました。(現在はアイキャッチ画像挿入時に同様の処理が行えるようになったため不要となり、削除済みです)

    ・function.php内の記述、

    add_image_size( ‘focus-archive’, 380, 380, true );

    の値をそれぞれ変えてみたり、trueからfalseにしてみたり。現在は元に戻してあります。

    そちらでテストしていただいた環境で問題無いのであれば、これは一度テーマを削除して再インストールした方が早いのでしょうか。

    ishitaka

    (@ishitaka)

    テーマをカスタマイズしていませんか?
    試しに下記コードをテーマの functions.php に追加してみてください。

    function my_focus_register_image_sizes() {
    	add_image_size( 'focus-archive', 380, 380, true );
    }
    add_action( 'after_setup_theme', 'my_focus_register_image_sizes', PHP_INT_MAX );
    theokanemaru

    (@theokanemaru)

    >> ishitakaさん

    一度テーマを削除してもう一度インストールしなおしてみましたが、やはりだめでした。ご教示のコードも追加してみましたが、なしのつぶて。サイズの大きい写真を新規でアップロードして試してみてもダメでした。
    念のためと思ってプラグインをすべて停止させてみましたが、これもダメです。
    こうなるともう、諦めるほかないのでしょうか…それならそれで諦めもつくのですが、ここまで熱心にお教えくださったことを省みるに、どうにも…。

    ishitaka

    (@ishitaka)

    現在のページの画像は縦横比を維持したトリミングした画像になっています。
    ブラウザのキャッシャを削除してみてはどうでしょうか?

    • この返信は1ヶ月前にishitakaが編集しました。
    theokanemaru

    (@theokanemaru)

    縦横比は維持されています。しかし画質が良くないのです。
    このページでは、縦長の写真だからか画像の上の方がちょん切られて表示されています。380px×380pxに従わず、あくまでもメーソンリーデザインを実現させたいのですが、大幅なカスタマイズが必要でしょうか。

    ※※※

    @media screen and (min-width: 1280px) {
    .grid-view .entry-image {
    height: 380px;
    }

    この部分を

    @media screen and (min-width: 1280px) {
    .grid-view .entry-image {
    height: 380px;
    width: 380px;
    }

    のように追記すると、画質の問題は解決されました。なぜ解決されるのかわかりません。

    ishitaka

    (@ishitaka)

    あくまでもメーソンリーデザインを実現させたいのですが、大幅なカスタマイズが必要でしょうか。

    これについては、ちょっと分かりません。m(__)m

    画質に関しては、サムネイルの 380x380px より、多少拡大表示されるので多少粗くなってしまいます。
    focus-archive 画像サイズを大きくするなどしないといけないと思います。

    theokanemaru

    (@theokanemaru)

    focus-archive該当コードを親テーマのfunctions.phpから探し出し、380×380よりも大きく指定したところ、縦横比を維持したままきれいなアイキャッチ画像が表示されました!
    ポラロイド写真のものに関しては、別途アイキャッチ用の画像を用意して適用させることで解決しました。ありがとうございます。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • このトピックに返信するにはログインが必要です。