予告:Raindrops1.345

あけまして、おめでとうございます。

Raindrops1.345に向けた、更新についてご報告します。

かゆいところに、手が届く投稿を実現する

慣れというのは、恐ろしいもので自分自身が問題と思っていない事は根拠なく「これで、いいのだ」という状態が続くもので、ユーザーの方々は、「なにこれ」と思いながらも、「まっ、しょうがないか~」などという事が、多分たくさんあるんだろうと思います。

このテーマを使って、テーマの作り手としてではなく、利用者の視点から見てみると、いくつかの問題点に気づくようになりました。

WordPressの投稿に画像を配置すると、大抵「右」とか「左」とかといった位置を指定すると思いますが、

Raindrops1.269では、ギャラリーにフォーカスしたアップデートを行います。
Raindrops1.269では、ギャラリーにフォーカスしたアップデートを行います。

続けて文字を入力すると、この行のように、回り込んで表示されるわけですが、この回り込みを解除したい時は、

を使えば、大丈夫! 等と思い込んでいいたのですが、それだけだと実際やってみると厳しい

見出し要素やテーブル、プラグインでのコードの挿入などで「 シンタックスハイライター 回り込み解除しちゃっているよ。」といった事が起きます。

要素やプラグインのショートコード等で、回り込みは解除される場合も、そうでない場合もあります

テーマはWordPressのテーマUnitTestを行う事が推奨されていますが、それらのルールはこれらの問題を想定していません
このような現象は、テーマによっても、プラグイン等でのショートコード等でも、異なる挙動を示すことがよくあります
デフォルトテーマや、ちょっと気になるテーマが、どのような処理を行っているのか、同一の投稿が、どのような差異を生ずるのかを、調べ始めました。

フロート問題を検証してみた

例えば、dl要素と、フロート画像の組み合わせを見てみると、Raindropsの場合は、以下のようになっていました。

raindrops-1.344-dl-alignleft

Twentysixteenだと

twentysixteen-aligin-right-dl
twentysixteen-alignleft-blockquote

もう一歩進めてみる。じゃblockquoteは?

twentysixteen-alignleft-table

じゃtableは?

最初のフロート画像と、dlの組み合わせをもう少し深く見てみる

日本語環境で、問題が出る場合がある事に、思い当たる

twentysixteen-float-image-japanese-issue

英語のタイトルならば、こんな風にはならない。つまり 使用されている英単語の長さ以下の幅になると、画像の下にdtが潜り込んでいくのに対して、日本語の場合は、どんどん幅が狭められてしまうために起きている。

ただ、根の深い問題ではなく、dt要素にmin-widthを設定すれば即解決

このような事から、Raindrops1.345では、

画像のフロートと組み合わされた、ブロック要素の表示について検討を加えることにした

Raindrops1.345で新たに追加するCSSクラス

rd-float-wrapper
このクラスは、通常フロート画像と一緒に配置できないblockquote,tableを、div要素でラップすることで、正常に表示する事を可能にします
rd-float
dl要素にクラスを追加する事で、回り込みをするデータリストを表示できます。日本語対応済み
clear
フロートをリセットするクラスです。回り込みを解除します。

サンプル

Raindrops1.269では、ギャラリーにフォーカスしたアップデートを行います。
Raindrops1.269では、ギャラリーにフォーカスしたアップデートを行います。

続けて文字を入力すると、この行のように、回り込んで表示されるわけですが、aliginleftを指定しているので、当然と言えば当然ですが、この回り込みを解除したい時は、

ぐらい使えば、大丈夫! 等と思い込んでいるわけです。

あれ、シンタックスハイライター 回り込み解除しちゃっているよ。

この部分では、rd-float-wrapperを使っています


このクラスを使用する事で、意図しないフロートのクリアが行われなくなり、ユーザーの方が満足いくドキュメントを作成する上での小さな助けになるのではないかと感がています。


コメントは受け付けていません