Ktai Styleのimgタグにおけるalign属性の扱いについて

解決済 kira88
(@kira88)

12年前
Ktai Style2.0.5を使っています。

WPのメディアギャラリーにアップした画像を表示するimgタグをエントリ本文に書く際に、
ギャラリーから当該の画像を表示し、「表示する」で表示して、
「配置」オプションを選択して、本文に挿入しています。

この「配置」では「なし」「左」「中央」「右」と選択できますが、
例えば「なし」ではalignnone、「左」ではaliginleftのクラスがimgタグに付与されます。

自分のstyle.phpでは、alignleftは、下記の通りマージンしか指定していません。
```
.alignleft {
	margin-top:4px;
	margin-right:10px;
	margin-bottom:5px;
}
```
alignnoneは特に定義していません。

さて、これで本文に挿入した画像をKtai Styleが出力した画面で見ると、
alignleftを指定していた画像にalign=”left”が付与されています。
なお、alignnoneの画像には何も付与されていません。

このように存在していないalign属性が追加される状態になっています。
「alignleft」という単語にKtai Styleが誤って反応していると思われますが、
Ktai Style側での修正は可能でしょうか。

※オリジナルのalign属性を携帯電話表示に反映させるのはいいなとは思います

4件の返信を表示中 - 1 - 4件目 (全4件中)

popup
(@popup)

12年前

誤って反応しているのではなく、[plugin/ktai-style/inc/template-tags.php]のks_image_alignment()で、そのような動作になるようにしてあります。
まさしく画像の表示位置指定を、携帯にも反映させる為ではないかと思います。

トピック投稿者 kira88
(@kira88)

12年前

ありがとうございます
Ktai Styleのご指摘の箇所のロジックを確認しました

上述の通り、自分のテーマのcssでは.alignleftではマージンのみを指定しているのですが、
Ktai Styleではそれは「align=”left”を指定しているはず」として処理されているのですね
各クラスの定義内容を確認の上、携帯電話用にHTMLを吐き出しているという過保護なロジックになっていると思い込んでいました・・・

対して、Twenty Elevenではfloat:left;も指定されていました
となれば、Ktai Styleのロジックの組立がより一般的なのでしょうか

自分の環境では、左寄せにしたからといって必ずしもテキスト等を回りこませる必要はないと考えており、回りこませる際には別のクラスで対応しているのですが、方法的にイマイチでしょうか？

いずれにせよ、その他に当方のcssでのimgに対するmarginやalignの指定の仕方にイマイチな点に気が付きましたので、こちらのcssを直す方向で考えています

ご説明をいただきありがとうございました

popup
(@popup)

12年前

公式テーマの開発でユニットテストが推奨されていますが、画像に関して次のような記述があります。

http://codex.wordpress.org/Theme_Development
http://codex.wordpress.org/Theme_Unit_Test#Images_Test

Page 4

Floats are cleared properly for floated element (thumbnail image) at the end of the Post Content

Page 4で、コンテンツの末尾でフロートされた要素（サムネイル画像）が、適切にクリアされているかを確認しますので、サムネイル画像を左または右寄せした際は、フロートが前提になっているように思います。
（Page 1～3は、各種画像の表示に関してです。）
登録されている公式テーマをいくつか確認してみましたが、.alignleftまたは.alignrightは、いずれもfloatが指定されていました。

ユニットテストのデータをインポートしたサンプルは、次のページで確認できます。
http://wpthemetestdata.wordpress.com/2008/09/03/images-test/

自分の環境では、左寄せにしたからといって必ずしもテキスト等を回りこませる必要はないと考えており、回りこませる際には別のクラスで対応しているのですが、方法的にイマイチでしょうか？

何も指定していなければ、通常は左から表示されますので、わざわざ左寄せを指定する必要はなく、img、.size-thumbnail、.size-full等にそれぞれマージンを指定すればいいように思います。
また、右寄せの場合は、画像を右に表示してあって、左側が空白なのは不自然に感じます。
ですので、左または右寄せした場合は、フロートを指定するのが自然ではないかと思います。

トピック投稿者 kira88
(@kira88)

12年前

登録されている公式テーマをいくつか確認してみましたが、.alignleftまたは.alignrightは、いずれもfloatが指定されていました。

やはりそうでしたか・・・。
そうするべきなのでしょうね。自分の使っているテーマではなぜかfloatがなく、そのまま使っていました。初心者故に思慮が及びませんでした。

何も指定していなければ、通常は左から表示されますので、わざわざ左寄せを指定する必要はなく・・・

昨夜そのことに気がついた次第で・・・。
たまたまなのか、.alignleftのマージンの取り方が左寄せ(というか左寄せの指定なし)で画像を配置した際にちょうどいい感じになっていたので、そのまま何も考えず使っていました。

今後のエントリの書き方に関わることなので、ここでしっかりと設定を手直ししようと考えております。

ご丁寧に、分かりやすい説明をありがとうございました！

4件の返信を表示中 - 1 - 4件目 (全4件中)

トピック「Ktai Styleのimgタグにおけるalign属性の扱いについて」には新たに返信することはできません。

トピックタグ

表示