本サイトではないのだが、どうしてもアイキャッチ画像を小さくして「...続きを読む」までの文章を画像横に回り込みさせたかったのだが、スタイルシート（CSS）に追記しても上手くいかず悩んでしまった。
「twenty seventeen」以前のバージョンまでの情報も調べたりしたのだが、同じようにやってもどうしても画像の横に文章が回り込みしてくれない。
不思議でしょうがない現象だった。
要は下図のように表示したいだけなのだ。
スタイルシートで制御できない理由は不明
自分の会社のホームページ等の作成経験もあるので、HTML・CSSに関してはそれなりに理解している。どんなことをしてもスタイルシートでの制御不能という事態になってしまった為、別の方法を考えることにした。
通常であれば、下のように画像に対して「float: left;」を指定すれば回り込むはずなのだが、どうしても上手くいかない。新しいクラスを埋め込みしても上手く動作しなかった。
.クラス名 img{
float: left;
}
ハッキリ言ってしまうと意味不明だ。「the_post_thumbnail()」関数を使用するのはWordPress共通の仕様であるのだが、この関数の引数に「'twentyseventeen-featured-image'」をしてしている。
この引数は「親テーマ / function.php」に定義されているのだが、画像サイズは「2000×1200」と定義してあるだけ。表示に関しては何も記載されていない。
ただ、この引数を別のものに変えるとアイキャッチ画像すら表示されないどころか、ページまで参照できなくなる。
これに関しては自分の引数指定の仕方が悪かったせいかもしれません。それなので詳しい方は自分なりのやり方でやってください。
結局行きついた方法
スタイルシートで制御するのを辞めて、HTMLに埋め込みしました。要はPHPファイルに直接HTML言語で強制回り込みをさせるように変更を加えました。変更を加えたファイルは「子テーマフォルダ / template-parts / post / content-excerpt.php」になります。
<?php the_post_thumbnail('twentyseventeen-featured-image' ); ?>
と記載するとアイキャッチ画像が表示されるのですが、このアイキャッチ画像のサイズを「100×100」で強制回り込みさせるためにやったコードが下となります。
<span style=" float: left; margin-right: 1em;"><?php the_post_thumbnail(array(100,100),'twentyseventeen-featured-image' ); ?></span>
異なっている点わかりますか？
画像出力部分を<span> ~ </span>で囲み、画像サイズ指定として「array(100,100)」を指定しています。勿論ですが意味不明な「'twentyseventeen-featured-image'」を第二引数へ指定しています。
この方法でやったらイメージと同じ表示となりました。本来ならスタイルシートで指定するところですが、それが有効にならないので仕方がなくこのような方法をとりました。
同じように困っている方がいましたら、真似してみてください。
【A8.netに登録しよう！】
◇ 広告主数・アフィリエイトサービス数日本最大級☆
◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
◇ 使いやすいサイトNO.1
⇒アフィリエイトならA8.net
関連記事
