• 更新一覧
  • Raindrops 1.510がライブになりました

    投稿日: tenman

     

    Raindrops 1.510 更新概要

    今回の変更では、size1of2, size1of3, size2of3, size1of4, size3of4,size1of5, size2of5, size3of5, size4of5, の各クラスを、組み合わせることで画像等のサイズを柔軟に変更できるようにしました。また、それら右寄せ左寄せのボックスに枠線を追加する solid-border クラスを追加しました。

    なを、Gutenberg plugin の新UIでは、右寄せ左寄せする機能が、画像以外のブロックにも多数追加されていますので、ブロックのclassフィールドにこれらのクラスを入力する事で、より柔軟なサイズ指定を可能にしました。現在 div, figure, ul, ol, p, (tableは、未サポート)に対応しています。

    詳細はblock aligns + percent width Classes – CSS noteでご確認ください。

    version: 1.510 Overview of Changes

    Modified wp-caption short code remove inline style.

    Added

    CSS percent width classes

    You can make grid layout in post content.

    size1of2, size1of3, size2of3, size1of4, size3of4,size1of5, size2of5, size3of5, size4of5, solid-border

    means size1of2 is 50% width of entry content

    Supports gutenberg plugin block class, text html.

    work width div, figure, ul, ol, p, (table is not support)

    Example

    
    

    hello world

    hello world

    hello world

    hello world

    @see https://tenman.info/labo/css/?p=8704

    Traditional Raindrops grid classes can also be used.

    
    
    1/2
    1/2

    Modified gutenberg plugin front end style

    removed gutenberg figure(imge) inline style.


  • Raindrops 1.509がライブになりました

    投稿日: tenman

    Raindrops 1.509 更新概要

    今回の変更は、version1.507でのアップデートの際にxhtml環境で表示、子テーマでの表示で、レイアウトが崩れてしまうバグがありましたので、修正しました。

    カスタマイザーにヘッダー画像を固定表示するための、Parallax Header Imageを追加しました。(カスタマイズ/ヘッダーメディア/ Parallax Header Image

    version: 1.509 Overview of Changes

    Fixed a bug that the site could not be displayed properly in xhtml environment

    Added Header Image parallax

    Customize / Header Media / Parallax Header Image

    Please select disable to return to the conventional display


  • Raindrops 1.507がライブになりました

    投稿日: tenman

     

    Raindrops 1.507 更新概要

    文書型HTML5(デフォルト)でご利用の場合、テーマ内で出力されるstyle要素、script要素から、type属性を削除しました。

    グーテンベルグプラグイン用のスタイルを変更しました。

    文書型HTML4でご利用の場合、ギャラリーショートコードをdl要素で出力するように変更しました。

    ul ol要素にalignleft,alignrightクラスを追加しました。

     

    version: 1.507 Overview of Changes

    Modified remove type attribute from html5 style and script elements in theme.

    Modified Gutenberg plugin Styles

    Modified When using Doctype HTML4, Gallery Shortcode using dl,dt,dd old style.

    Added CSS Classes ol.alignleft,ol.alignright, ul.alignleft, ul.alignright


  • Raindrops 1.505がライブになりました

    投稿日: tenman

    Raindrops 1.505 更新概要

    今回の変更は、主にグーテンベルグプラグインのためのCSSを変更しています。

    このプラグインは、WordPress5.0でのコア実装を目標に行われている エディターのインターフェースの変更のためのプロジェクトで、

    近い将来使い勝手が大きく変わる可能性があり、コアのCSSクラスも刷新されます。

    レインドロップスは、この大きな変更に追従する事で既存サイトでの安定した運営を可能にするべく、早期サポートを行っています。

    テストサイトなどで、グーテンベルグプラグインのテストを始めていただくと、テーマでの課題も見えてくると思います。是非ご協力ください。

     

    version: 1.505 Overview of Changes

    Almost relate CSS

    Main changes Gutenberg front and editor style.

     

    Modified Add style for Gutenberg Plugin

    Modified Add Oembed instagram wrapper div.rd-instagram

    Added function raindrops_width_class_and_relate_settings()

    Fixed function raindrops_gallerys_clone funny code

    Fixed wrong styles in lib/csscolor.css.php

    Removed oembed instagram script in raindrops.js

    Removed br.clear element and added clearfix in block


  • Raindrops 1.500がライブになりました

    投稿日: tenman

    Raindrops 1.500 更新概要

    今回は、広幅サイドバーのスタイルにフォーカスした変更を行いました。

    WordPress 4.9 では、カスタマイザーを使ったサイドバー等、投稿以外のカスタムHTMLウィジェット、ギャラリーウィジェット等がカスタマイザーの変更予約機能で、日付を指定して適用することが可能になりました。

    サイドバーは、これまで単にリンクの置き場のようなものでしたが、これらの機能の進化に伴い より効果的なサイドバーの利用方法が見えてくるかもしれません。

    このような事から、これまで、あまり用途のなかった 広い幅のサイドバーのデザインを変更する事にしました。

    広い幅のサイドバーとは、(カスタマイズ / 外観 / レイアウトとサイドバー)のエキストラサイドバーで 50%, 66%, 75%のものを指します。

    これらの見栄えを刷新しました。

    さらに、

    サイドバーのギャラリーウィジェットの表示方法に、新しいアイディアを追加しました。

    一般的に、2カラム、3カラムのサイトではサイドバー幅は300px前後がよく使われると思いますが、ギャラリーの画像は多くの場合サムネールサイズよりも小さいものになって、リンクがない場合は画像の内容がみずらくなります。

    リンクなしのギャラリーをサイドバーにセットしていただいた場合、画像をクリックするとギャラリーの先頭に拡大表示する機能を追加しました。(CSSのみ)

    モーダルボックスの機能の見直しも行いました

    レインドロップスには古くからモーダルボックスを簡単に表示するための仕組みがありました。投稿本文で動作するものでしたが、今回カスタムhtmlウィジェットでも動作するように変更しました。

    モーダルボックスの作成方法は、以下のhtmlソースを投稿本文や、カスタムhtmlウィジェットに貼り付けてご確認ください。

    <a href="http://www.tenman.info/wp3/raindrops/theme_update/raindrops%e3%81%8c%e3%83%a9%e3%82%a4%e3%83%96%e3%81%ab%e3%81%aa%e3%82%8a%e3%81%be%e3%81%97%e3%81%9f-version-1-500/#modal_box_6006_1" class="modal-link">Link displaying modal box</a>
    
            <div class="rd-modal" id="modal_box_6006_1">
                    <div>
                            <div class="body">
                                ここにコンテンツ
                            </div>
                            <div class="footer">
                                    <a href="#page" ><span class="lb-close color5 pad-s corner">Close</span></a>
                            </div>
                    </div>
            </div>

    上記のソースを、投稿本文に貼り付けていただくとモーダルボックスが表示されます。(複数可)
    id等は、自動的に振りなおしますので、このソースをペタペタペーストしていただくだけで大丈夫です。

    上記の data-modal-id属性は、今回のアップデートで変更した部分です。(従来はidを使っていました)

    従来のidでも動作しますが、カスタムHTMLウィジェットに、コードエディタが追加されたため、エディタの検査機能で、複数のidで、同じ値が使われた場合エラーとなり保存できないため、変更を行いました。

    Note: このモーダルボックスは、過去からの継続的な問題がありました。

    モーダルボックス内にyoutube等の動画を配置した場合、モーダルボックスを消しても、ビデオが動作し続けるという問題です。
    今回の変更で、クローズボタンが押された時点で、oembedビデオを(極力)停止する機能を追加しました。

    youtube.com, reverbnation.com, cloudup.com, videopress.com, www.mixcloud.com, ted.com, soundcloud.com, wordpress.tv

    では、動作確認ができましたが、モバイル環境などデバイスにより、停止しない場合もあるかもしれませんのでご注意ください。

    また、audio shortcode等も、閉じた場合でも停止しません。

    モーダルボックスには、大抵のhtml要素を含める事は出来ますが、oembedビデオなどを大量に設置する事はお勧めしません。iframeは、遅延ロードしますが、関連するスクリプト等は読み込まれるので、パフォーマンスに影響があるためです。

    タブボックスの調整を行いました。

    タブボックスもカスタムhtmlウィジェットでの動作を確認しました。
    タブボックスの作り方は、モーダルボックス同様に、以下のhtmlをペーストすることで可能です。

    <ul class="raindrops-tab-list clearfix" role="tablist">
                    <li class="dummy">Tab Area</li>
            </ul>
            <div class="raindrops-tab-content clearfix">
                    <div class="raindrops-tab-page">
                            <h3>Tab1</h3>
                            <p>Lorem ipsum dolor sit amet...</p>
                    </div>
                    <div class="raindrops-tab-page">
                            <h3>Tab2</h3>
    
                            <p>Lorem ipsum dolor sit amet, ...	</p>
                    </div>
                    <div class="raindrops-tab-page">
                            <h3>Tab3</h3>
                            <p>Lorem ipsum dolor sit amet...</p>
                    </div>
            </div>

    タブボックスの数を変更する場合は、以下のブロックを追加するだけで追加されます。h3要素は、タブ名に自動置換されます(必須)

     <div class="raindrops-tab-page">
        <h3>Tab3</h3>
        <p>Lorem ipsum dolor sit amet...</p>
     </div>

    カスタマザー/外観/フォント タイトル(英文字)の大文字化

    大文字化の適用範囲を変更しました。

    日本語、クロームブラウザ、オペラ用フォントの変更

    NotoSansJP-Regular.otf を NotoSansJP-Light.otf に変更しました。

     

    version: 1.500 Overview of Changes

    Focus Wide Sidebar Design.

    WordPress 4.9 has greatly advanced the extension of non-post content such as sidebar.

    Custom html widgets allow you to place content freely in the sidebar and galleries can now be displayed in the sidebar.

    Schedule function was also added.

    Until now, the sidebar was just the place to place the link, but you may be able to use it more effectively with your idea

    In order to help your idea, I reconsidered the design of the wide sidebar of Raindrops

    wider sidebar is ( Customize / Presentation / Layout and Sidebars ) Extra Sidebar Width 50%, 66%, 75%

    Many widget displays have been refreshed for these sidebar settings

    Please preview with the customizer and check how it looks. Also, please give me your feedback.

    In addition, I have devised modal boxes and tab display further to make use of wide sidebar conveniently.

    Modified Gallery widget in Sidebar( default sidebar, extra sidebar )

    Raindrops Default sidebar can be set in the range of minimum 160px width up to 300px width.

    The Extra Sidebar can be set in the relative range of 25% to 75% in proportion to posting.

    Since the width used relatively often is about 300px,

    when added the gallery, the image is displayed very small. If the link is not used, it is very hard to see

    When linkless gallery is set, added a function to pop up when clicking images

    Image size of linkless gallery, midium or more is recommended

    Modified Raindrops Modal Box

    A modal box is a mechanism to create a modal box easily from ancient times.

    You can easily create a modal box simply by pasting the following source in the entry content.

    Since the href attribute and data-modal-id are automatically converted, you can create as many modal boxes as you paste.

    <a href="http://www.tenman.info/wp3/raindrops/theme_update/raindrops%e3%81%8c%e3%83%a9%e3%82%a4%e3%83%96%e3%81%ab%e3%81%aa%e3%82%8a%e3%81%be%e3%81%97%e3%81%9f-version-1-500/#modal_box_6006_2" class="modal-link">Link displaying modal box</a>
    
            <div class="rd-modal" id="modal_box_6006_2">
                    <div>
                            <div class="body">
                                
    </div> <div class="footer"> <a href="#page" ><span class="lb-close color5 pad-s corner">Close</span></a> </div> </div> </div>

    I added the function so that this function works not only in the entry content but also in the sidebar( with Custom HTML Widget ).

    This modal box has some drawbacks to date. That is, if youtube video is placed in a modal box,

    youtube video continues to play even if you press the close button during playback.

    Improved to stop video when pushing the Close button.

    tested with

    youtube.com, reverbnation.com, cloudup.com, videopress.com, www.mixcloud.com, ted.com, soundcloud.com, wordpress.tv

    Not yet, audio shortcode

    Note:Avoid placing large amounts of video in modal boxes. Iframes are loaded lazily, but the associated scripts are loaded and affect performance.

    Modified Raindrops Tab Box

    A layout that saves space on the WEB page is easily realized.

    You can easily create a Tab Box simply by pasting the following source in the entry content and Custom HTML Widget.

    <ul class="raindrops-tab-list clearfix" role="tablist">
                    <li class="dummy">Tab Area</li>
            </ul>
            <div class="raindrops-tab-content clearfix">
                    <div class="raindrops-tab-page">
                            <h3>Tab1</h3>
                            <p>Lorem ipsum dolor sit amet...</p>
                    </div>
                    <div class="raindrops-tab-page">
                            <h3>Tab2</h3>
    
                            <p>Lorem ipsum dolor sit amet, ...	</p>
                    </div>
                    <div class="raindrops-tab-page">
                            <h3>Tab3</h3>
                            <p>Lorem ipsum dolor sit amet...</p>
                    </div>
            </div>

    Added current Tab CSS and General adjustment of display

    Modified Customize / Presentation / Convert All Titles to Uppercase

    Change scope

    Modified language Japanese

    Fonts Changes NotoSansJP-Regular.otf to NotoSansJP-Light.otf