• ブログ アーカイブ blog
  • Raindrops 1.500がライブになりました

    投稿日: tenman

    Raindrops 1.500 更新概要

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

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

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

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

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

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

    さらに、

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

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

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

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

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

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

    <a href="https://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="https://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


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

    投稿日: tenman

     

    Raindrops 1.492 更新概要

    今回の変更は、目前に迫った WordPress 4.9 の新機能に対応する変更、テーマを新規にインストールした場合に適用されるデフォルト設定の変更、カスタマイズ / 外観 / フォントでのベースフォントサイズを変更した場合のサイトの見え方の変更、開発用に「Gutenberg — WordPress Plugins」を使用した場合に、フロント側のレインドロップスのスタイルを追加しました。

    カスタマイズ / 外観 / フォントでのベースフォントサイズ

    レインドロップステーマは、従来よりベースフォントサイズの変更が可能でしたが、ページ幅が一定の幅、上限を持っているため 変更した場合全体として、レイアウトが崩れたように見え、実用性が低い機能でした。

    今回の変更では、h1-h6のフォントサイズの抜本的な見直しを行いました。ほとんどの見出し要素はスタイルを見直しました。サイドバーのウィジェット等、デフォルトのベースフォントサイズを維持するパートと、ベースフォントサイズに比例してサイズが変更される要素を分けて、自然なフォントサイズの変更と、カスタマイズ性実現しました。

    テーマを新規にインストールした場合に適用されるデフォルト設定

    テーマを新規にインストールした状態でのサイドバーの幅、1カラム時のスタイル等、デフォルト値の変更を行いました。すでに運用中のテーマではこの変更は適用されません。

    新しいデフォルト設定を運用中のテーマで、適用する場合は functions.phpの冒頭に、以下の変数を追加する事で新しいデフォルトスタイルを適用できます。

    $raindrops_year_2018_base_settings = true;

    Gutenberg 用のスタイル

    グーテンベルグプラグインは、将来的にコアにマージされるプロジェクトとして位置づけられていますが、機能的に完全なものではなく今後多くの変更が行われることが確実なため、あくまで開発用スタイルです。

    テーマはエディターの変更により影響を受けます、従来のエディタで作成した投稿のスタイルを維持しながら、新しいエディタのためのスタイルを作成する事は非常に困難を伴う作業です。長期的にグーテンベルグプラグインと、テーマでのスタイルの実装を考える必要があり、今回追加しました。(すべてのスタイルは、ヘッダーのインラインスタイルとフィルターで処理されていますので、いつでも元に戻すことが可能です)

    アーカイブウィジェット、カテゴリーウィジェットの件数表示の変更

    アーカイブウィジェット、カテゴリーウィジェットで件数表示が、(3)のように、カッコつきだったものを、カッコを外しました。

    version: 1.492 Overview of Changes

    Modified Focus Customize / Presentation / Fonts / Base Fonts Size

    The Raindrops theme had a ability to change the base font size,

    but due to the limitation of the page width, it was a clunky one

    I applied a new idea to solve this problem

    With this change most styles of heading elements have been rewritten.

    Newly, for those who installed the Raindrops theme,

    I decided to apply the style for 2018. The existing user’s settings will not be changed

    To use the new default settings in your theme, set the following PHP variable in the first line of functions.php

    $raindrops_year_2018_base_settings = true;

    Added plugin frontend style for gutenberg plugin (Please keep it for development use only)

    In the future, the gutenberg plug-in planned to be implemented in the core

    It is not easy to respond to future new editors while maintaining posts created with conventional editors.

    When using the Gutenberg plugin, add a style for Raindrops.

    Modified Widget counter style for Categories widget, Archives widget , Tag widget


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

    投稿日: tenman

     

    Raindrops 1.482 更新概要

    レインドロップステーマ1.482では、縦書きをサポートします。

    縦書きは、ウェブサイトでは珍しいかもしれませんが、ウェブサイト以外では新聞をはじめ多くの分野で使用されています。

    ブログで、詩を書いたり、俳句を書いたりする場合に 可能であれば縦書きをしたいなぁと思う人は少なくないと思い、サポートを始めることにしました。

    実際の使い方は、

    等を参考にしていただけると理解しやすいと思います。

    その他、一部のユーザーから、TinyMCEエディタでエラー表示が出るという指摘がありましたので、(私のサイトでは、エラーは確認できていませんが)

    カスタマイズ 高度な設定 ビジュアルエディタをテーマの設定に同期する のセクションで「いいえ」が選択された場合には、editor-style.css以外のCSSは読み込まないように、調整を行いました。

    その他、README.txtをマークダウンフォーマットに変更しました。

    version: 1.482 Overview of Changes

    Add Writing Mode vertical-rl for Japanese language.

    Modified Customize / Advanced / Synchronize Style for Visual Editor value No

    editor style not loading anything without editor-style.css

    Chaged README.txt format from text to Markdown


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

    投稿日: tenman

     

    Raindrops 1.476 更新概要

    今回の変更は、来月にもリリースされる予定のWordPress4.8の新機能に関する更新と、いくつかの不具合の修正です。

    4.8では、画像、動画、オーディオの3つのウィジェットが追加、テキストウィジェットは更新されて、エディタで本文を編集可能になる模様です。

    今回の変更では、新しいウィジェットのスタイルを追加しました。(不具合を見つけた場合は、是非教えてください)

    captionショートコードを記述した場合に、figure要素のID表示に問題がありましたので修正しました。

    日本語用フォント、YuGothicがかすれて表示される問題に対する対応を1.473で行いましたが、副作用がある事がわかりましたので、Meiryoフォントの優先度を上げる変更を行いました。

    アドオンプラグインの メタスライダーのショートコードを投稿本文に追加した場合に位置がずれる問題を修正しました

    raindrops_install_navigation, raindrops_options_init フィルター関数を削除しました

     

    version: 1.476 Overview of Changes

    Added

    Style added WordPress4.8 widget_media_image, widget_media_video, new text widget

    Fixed

    Since it turned out that countermeasure (1.473) of the faint character problem has a side effect,

    I decided to lower the priority of YuGothic font.

    priority of font Meiryo (only lang ja and color type minimal)

    Fixed

    meta slider plugin in post content

    display improperly ( position )

    Fixed

    raindrops_img_caption_shortcode_filter()

    wrong id and aria-labelledby attribute

    Removed

    add_action( ‘load-themes.php’, ‘raindrops_install_navigation’ );

    add_action( ‘admin_init’, ‘raindrops_options_init’ );


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

    投稿日: tenman

     

    Raindrops 1.471 更新概要

    今回の変更は、「予告:Raindrops1.471ヘッダー画像の自動トリミング – WordPress Theme Raindrops」です。

    Raindropsテーマは、従来より添付ファイルやアイキャッチ画像をヘッダー画像としてセットすることを投稿の編集画面で行うことが出来ましたが、画像の縦横比によっては、ブラウザサイズよりもヘッダー画像が大きくなってしまい。使いづらい面がありました。今回の変更で縦位置画像をセットしたような場合でも、ブラウザのウィンドウサイズにフィットして表示することが出来るようになりましたので、かなり使いやすいものになると思います。

    カスタマイズ/外観/レイアウトとサイドバーで、750px 950px 974pxを選択した場合のグリッド概要文レイアウトの調整を行いました

    カスタマイズ/外観/ウィジェットのセクションラベルを、Custom Post Type Helperに変更しました

    style.cssでベンダープレフィックスのクリーニングを行いました

    version: 1.471 Overview of Changes

    Modified Style of Grid excerpt for Document width 750px centered, 950px centered, 974px

    Modified Style of Grid excerpt for sticky post

    Changed Customize section label text from Customize / Presentation / Widget to from Customize / Presentation / Custom Post Type Helper

    Modified Header Image when Customize / Presentation / Layout and Sidebar value ‘ Full Width Responsive’ ( default )

    We set an upper limit so that the header image fits in the browser window size

    For example, when a portrait image is set as a header image

    Custom header-image height

    Add functions.php first

    add_filter('raindrops_header_image_ratio','custom_raindrops_header_image_ratio');
    
    function custom_raindrops_header_image_ratio($ratio){
        $ratio = 0.3 // Ratio calculation is based on image height / image width
        return $ratio;
    }
    

    Modified style.css bender prefix cleaning


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

    投稿日: tenman

     

    Raindrops 1.470 更新概要

    今回の変更は

    カラータイプ「ライト」でプライマリーメニューの背景が正常に表示されていない問題を修正しました。

    WordPress4.7.4TinyMCEエディタで、セキュリティアップデートがありました。

    a要素で、target=”_blank”が指定されたリンクには、rel=“nofollow noopener noreferrer”属性が追加されました。

    これに連携するために、テーマでも外部リンクについて、同様の処理を追加しました。(メニューなどで、外部リンクでtarget=”_blank”が指定された場合に、rel属性を自動追加します。)

    この機能が必要ない場合は、functions.phpの最初に、

    $raindrops_allow_safe_link_target = false;

    を追加していただくと、rel属性の追加は行われません。

    target blankの場合リンクのrel属性に noopener noreferrerが自動的にセットされる – WordPress Snippet

    アーカイブページの概要表示で、カテゴリーやタグを表示するposted_inエリアを、開閉式に変更しました。

    この機能が必要ない場合は、functions.phpの最初に、

    $raindrops_grid_posted_in = false;

    をセットしてください。従来表示に戻ります。

    more リンクが、稀に2度表示される問題を修正しました。

    raindrops_filter_page_column_control フィルタを追加しました。このフィルターで、カスタム投稿や、カスタムタクソノミのターム一覧のカラム数をコントロールできます。

    カスタム投稿タイプのカラム数変更フィルター – Raindrops 取扱説明書

    アイキャッチ画像の設定を行っている場合、アーカイブの2ページ目以降で、表示が崩れることがある問題を修正しました。

    version: 1.470 Overview of Changes

    Fixed Color Type light primary menu background color

    Security Update relate TinyMCE Editor

    External link add rel=”noopener noreferrer”

    If no needs attribute.

    Add functions.php first

    $raindrops_allow_safe_link_target = false;

    Modified
    Change display method of posted_in in grid layout

    If no needs new presentation
    Add functions.php first

    $raindrops_grid_posted_in = false;

    Fixed
    Rarely more links are displayed twice

    Added filter raindrops_filter_page_column_control

    add_filter( 'raindrops_filter_page_column_control','col_control1');
    
    function col_control1($control){
    
    $control['is_post_type_archive'] = array( 'type' =>'news', 'columns' => 1 );
    $control['is_category'] = array( 'type' => 1, 'columns' => 2 );
    
    return $control;
    }

    Fixed Featured Image display improperly where paged archive