アイキャッチ画像を正方形にできませんか？
-
@みっちー
こんにちは。画像を追加するところがあるとおもうのですが、
画像の編集 のしたに 代替テキストがあります。
そこが該当します
-
お世話になります。
教えて下さったように
①全ての記事のアイキャッチ画像を正方形にしaltも記入
しました。加えて、
②カスタマイズ＞SNS設定（OGP）も正方形にしaltも記入
③それぞれのサイズは1200px×1200px、75KB
としました。
しかし残念ながら
④ＪＩＮ上の一覧表示でも正方形にならず横長方形のままです。
⑤ＪＩＮ上の各個記事表示も同様です。
⑥ＦＢにシェアすると、最初は空白のまま、何回かやるうち横長方形。
⑦twitterにシェアすると、画像は何も表示されない。
という状態です。正方形の画像をアイキャッチに登録する前に、他の形の画像を登録し、一覧表示や各個記事表示が横長長方形に既になってしまっていた後で施したので無効かと思い
⑧過去に登録した記事を全て削除し、その後、新たに正方形アイキャッチを施した記事を登録したのですが、上記①～⑦のような結果です。
⑨⑧の作業をやる途中で、一時的に各個記事表示が正方形になったこともありましたが、ぬか喜びで、それ以降横長方形に戻ってしましました。⑩念のため、各個記事をＯＧＰデバッガーでチェックすると、og:image:altが表示されない状態でした（②に報告の通りaltは記入したのですが・・・）。
デバッガーはこちらのものを使いました。
https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fadampub.jp%2Fadampub%2F2021%2F05%2F13%2F%e7%a7%81%e3%81%ae%e4%b8%89%e9%83%bd%e5%b8%82%e7%89%a9%e8%aa%9e%2F
以上です。どのような措置を加えれば正方形の画像表示が得られる可能性があるか、お気づきの点を教えて下さいますでしょうか。
私の作成中のサイトはこちらです。
https://adampub.jp/adampub/
-
本当にお世話になります。
追記です。
その後、各個記事をtwitterでシェアすると正方形画像でtwitterに表示されるようになりました。ＯＧＰの件はいろいろ謎の要素も多いようですね。
-
ＪＩＮのトップページの一覧表示で、横長方形の表示になっているのですが、そのトップ「ページのソースを表示」で確認すると、画像に該当箇所に
width ="368" height ="207"
と指定されています。
ＪＩＮのＰＨＰのどれかの中や、データベースにあるその要素を触れば正方形にできるのかな？とも思うのですが如何せん、どこを触れば良いか分かりません。
その点、ご教示頂けますでしょうか？ＪＩＮの画面上で、アイキャッチ画像を、一覧表示においても単個記事の表示においても正方形にしたのです（twitterやＦＢのＯＧＰ表示に関しては「成り行き」で横長方形でも妥協しますｗ）。
よろしくアドバイスの程お願い申します。
-
@みっちー さん
この前説明した部分は少し足りなかったかもしれません。試してませんが、FTPから直接uploads→05（今5月なので、自動で増えます）というところに、正方形の画像をアップロードすればうまくいくかもしれません。（私は画像の様にノーイメージ画像で試しただけなので、確証ありませんが、理屈としては行くかと思います。）管理画面からアップロードすると3種類の画像ができます。実際みっちーさんの画像はアップロード時に余白が増える事で長方形になっています。
元々、正方形でできた画像であればこの方法なら、余白が付くことはないかと思います。試していないので何とも言えませんが。動的に変える方法は以下です。
こんにちは。そうですね。＞ＪＩＮのトップページの一覧表示で、横長方形の表示になっているのですが、そのトップ「ページのソースを表示」で確認すると、画像に該当箇所に
width ="368" height ="207"
と指定されています。
＞そのはずです。場所はjin→include→liststyle→parts→post-list-mag-parts.php
のパソコンでは19行目 スマホでは32行目の記述が出力されています。もし、分かるのであれば、カスタマイズすることができます。
１ jinのフォルダーからincludeのフォルダーをコピーして jin-childに移します。
親テーマに書いてもいいですが、新バージョンになった際、そのファイルが書き換われば上書きされてしまいます。
（それでもいい場合は、親テーマに書いても大丈夫です）
２ jin-child のfunctions.php を開きます。何やら書いてあるはずなので、その下に1行も開けずに
add_image_size( 'thumb-square', 360, 360, true );
を張り付けます。
thumb-squareはどんな英字でもいいです。（英字を変えた場合は、<?php the_post_thumbnail('thumb-square'); ?>の該当箇所も変えてください。）
3 次にpost-list-mag-parts.phpを開けます。19行目と32行目に
<?php the_post_thumbnail('thumb-square'); ?>を書き
19行目の<?php the_post_thumbnail('small_size',array('width ' => '368','height ' => '207')); ?>を消します。
32行目の<?php the_post_thumbnail('small_size',array('width ' => '345','height ' => '194')); ?>
スマホが長方形がいい場合は、変えないでください。
カテゴリーページは終了です。
トップページの最新記事は
１ post-list-mag-parts-infeed.phpを開きます。
２ 57行目70行目を変えます。 スマホで変えたくない場合は70はそのまま。
以上で変わります。
正方形にしたいところはこのように変えないといけません。
試してみてください。
-
@みっちー
ツイッターでシェアがうまくいかないときは、
https://cards-dev.twitter.com/validator
で、読み込み 登録的な事ができます。ついでにエラーも見れます。
画像が出るようになったのは、登録が済んだからだと思います。
-
benkbookさん
ご懇切にありがとうございます<(_ _)>
さっそく、ＦＴＰで該当箇所にアップロードしてみます。
またＰＨＰ改変も必要ならやってみます。添付の画像では、正方形、長方形混在もあり得るんですね！
取り組むのが楽しみです！！
本当にありがとうございます！
-
この投稿が削除されました！
-
ftpで、横長方形画像の上に、同じ名前の正方形画像を上書きするやり方で、見事うまく行きました！
benkbookさん！本当にありがとうございます！！
横長方形、正方形混在の方が使い出があるので、PHPの方は今回触らないつもりです。
ただ、OGPの方が未検証なので、その辺、もし絡むところがあれば触ることになるかもと思います。
いずれにせよ、懇切丁寧なご指導で本当にありがとうございました<(_ _)>横長方形、正方形混在
https://adampub.jp/adampub/
-
@みっちー さん。良かったですね。
解決済みにお願いいたします。
