• Raindrops1.345がライブになりました

    投稿日: tenman
    • Tab Area

    日本語

    Raindrops1.345がライブになりました

    今回の変更は、

     

    WordPress4.4で導入されたレスポンシブ画像とRaindropsの投稿フォーマットチャットのコンフリクトの問題を修正しました

    Oembed speakerdeck のレスポンシブ表示の不具合を修正しました。

    投稿のフロート画像と主にブロック要素の表示の問題については、更に1.346で、より自然な表示の実装に向けて継続してがんばっています。1.345で追加したスタイルも、さらに見直しとテストを繰り返しています。ユーザーの皆様には、ご不便をおかけする場面もあるかもしれませんが、よろしくお願いします

    English

    version:1.345

    Overview of Changes

    Fixed conflict Responsive Image (WordPress4.4)

    filter raindrops_chat_filter move from functions.php to lib/hooks.php

    Change priority default to 11

    Fixed raindrops_link_url_text_decode()

    regex issue

    Fixed Oembed speakerdeck presentation issue.

    Modified i18n languages/ja.po, ja.mo.

    Modified Raindrops color type ‘minimal’ default 3col to 2col

    Add raindrops_switch_default_by_color_type_clone()

    minimal style apply at lib/csscolor.css.php

    Change lib/customize.js

    Change lib/customize.php

    Change lib/vars.php

    Note: if you needs other columns style then once minimal save it,you can controll column count.

    Modified part-blog.php

    Add class

    .rd-float-wrapper

    for make floating blockquote , floatting table, etc block elements

    .clear

    .rd-float

    for dl elements

    @see https://www.tenman.info/wp3/tips/2016/01/12/26199/


    📂投稿グループ 未分類

  • 予告：Raindrops1.346­　投稿のスタイルの変更

    投稿日: tenman

    従来、メディアの追加から画像を追加した場合、（左寄せを続けて2枚）以下のように表示します

    aligin-issue

    同じ投稿をversion1.346で表示すると以下のように、（この場合は、左端に）表示されるようになります。

    IMG00170

    投稿の編集画面で、メディアを追加から、左寄せや右寄せの画像を複数表示した場合、（以下の例は、alignleft（左寄せ）2枚の画像を続けて指定すると、）
    このように、最初の画像の脇に次の画像が潜り込むように表示されていました。

    IMG00170

    また、blockquote要素などのブロック要素を記述した場合には、フロートが解除されます。
    rd-float-wrapper　クラスを使う事で、フロートブロッククウォートが表示できます（ver1.345)

    このようにフロート画像に続く　段落や　見出しタグ、blockquote 等の要素は、一見うまく表示されているように見えますが　細かくスタイルを適用しようとした場合には、いろいろ問題が出てきます。

    ver1.345でブロック要素であっても、フロートが解除されないように設定する、新しいCSSクラスを追加します

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

    引き続き、ver1.346では、aliginleft alignright クラスの表示をさらに見直し、これらの画像は、常に投稿の、左端または右端に表示するように見直します。

    また、投稿の潜在的な問題についても、手を入れていきます。

    以下の画像は、投稿の見出しタグと、段落を赤枠で示したものですが、

    potential-problem

    枠線が、左寄せのフロート画像の後ろに潜り込んでいるのが確認できると思います。

    potential-problem-fix

    見出し要素の潜り込みに対応します。

    この変更により、投稿のサブタイトルをCSSで装飾するといった作業が、簡単にできるようになると考えています。

    デフォルトテーマ等テーマによっては、見出し要素を記述した場合に、自動的にフロートがクリアされるタイプのテーマも存在しますが、

    同様の表示を行う場合は、見出し要素に、clrear クラスを追加していただくことで、フロートのクリアが可能です

    <h3 class="clear">Example</h3>

    📂投稿グループ 予告

  • 予告：Raindrops1.345　カラータイプ minimalのレイアウト変更

    投稿日: tenman

    現在、Raindropsのカラータイプは、デフォルトで4種類あります。

    それぞれ、3カラムで表示し、その後設定項目を使って、カラム数などを変更するという手順で動作しますが、

    今回の変更では、カラータイプミニマルのデフォルト表示を2カラム右300pxサイドバーに変更します。

    ミニマルを選択して一度保存していただくと、それ以降は自由にカラムの調整などが出来るようになります。

    この試みは、テスト的なものですが、良い方法が見つかれば、

    カラータイプの選択は、まるで完全に別のテーマを選ぶように選択できるようになります。


    📂投稿グループ 予告

  • 予告：Raindrops1.345

    投稿日: tenman

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

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

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

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

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

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

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

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

    <br style="clear:both;" />

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

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

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

    テーマは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を指定しているので、当然と言えば当然ですが、この回り込みを解除したい時は、

    <br style="clear:both;" />

    ぐらい使えば、大丈夫！　等と思い込んでいるわけです。
    あれ、シンタックスハイライター　回り込み解除しちゃっているよ。

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

    <div class="rd-float-wrapper">
<pre class="lang:default decode:true " >&lt;br style="clear:both;" /&gt;</pre> 
</div>

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


    📂投稿グループ 予告

  • Raindrops1.344がライブになりました

    投稿日: tenman
    • Tab Area

    日本語

    Raindrops1.344がライブになりました。

    今回の変更は、

    Speaker Deckの更新で、レスポンシブスタイル設定にミスがありました。
    次回のアップデートで、修正しますので、しばらくお待ちください

    WordPress4.4で、投稿oembedが実装されましたが、投稿の埋め込み表示に問題がありましたので、（埋め込んだ投稿の下部に意図しないマージンが追加される問題）修正しました

    English

    version:1.344

    Overview of Changes

    Modified editor style

    raindrops tablist

    .columns class

    PDF link

    Fixed Not work raindrops_header_image_ratio filter

    Modified Show Responsive

    reverbnation oembed

    Speaker Deck oembed

    videopress oembed

    Add new css class

    rd-round

    <div style="width:300px" class="rd-round">
<span style="background:url(IMAGE URI);"></span>
</div>
not-hover
<div style="width:300px" class="rd-round not-hover">
<span style="background:url(IMAGE URI);"></span>
</div>
rd-squere
<div style="width:300px" class="rd-squere">
<span style="background:url(IMAGE URI);"></span>
</div>

    note: must not set height

    Fixed

    Embed external post style shows improperly


    📂投稿グループ 未分類