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

    • Tab Area

    日本語

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

    WordPress4.5で、サイトロゴがサポートされる予定ですが、Raindropsテーマは、開発版WordPressをご利用の場合、サイトロゴを表示することが出来るようになりました。


    重要なお知らせ:次回のアップデートでスティッキーウィジェットの位置が変更になります。
    詳細は、「スティキーウィジェットエリアの位置変更について]をご覧いただけますようお願いします

    他、バグの修正を含みます。詳細は changelog (アドミンバー/カスタマイズ/高度な設定/変更履歴)を参照してください

    English

    Important Note

    Next Version change sticky widget position.

    If you are using this widget area now is to create a child theme, the theme, please duplicate the index.php in child theme

    Example of Child Theme

    http://tenman.info/download/child-raindrops.zip

    Overview of Changes

    Fixed child theme style.css can not auto load when $raindrops_css_auto_include == false

    Fixed Randum Header Image not work

    Fixed Display Improperly. Custmize Section Featured Image Settings / Featured Image Position Infront of Title

    Modyfied Add control raindrops_display_site_title for Custom Logo( WordPress4.5 )

    Add Custom Logo Support for WordPress4.5

    Add Text Widget Support Oembed Media


  • Raindrops1.353 テキストウィジェットで、Youtube等のOembedメディア埋め込みをサポートします。

    Raindrops1.353では、テキストウィジェットで、Youtube等のOembedメディア埋め込みをサポートします。

    表示例

    適用方法

    テキストウィジェットのテキストエリアにURLをペーストするだけです

    Oembedとは

    投稿本文に、Youtube等の動画サイトや、以下のOembed対応サイトのコンテンツを、URLをペーストするだけで簡単に表示できる機能です。

    例えば、投稿本文に

    <h3>Taylor Swift - Shake It Off</h3>
    
    

    Your Text
    URLは、一行使って記述してください。URLの前後に文字列がある場合には表示しません。前後にhtmlタグなどを使いたい場合は、以下のようにショートコードを使う必要があります

    サービス 埋め込みの種類 追加時
    Animoto 動画 WordPress 4.0
    Blip 動画 WordPress 2.9
    CollegeHumor 動画 WordPress 4.0
    DailyMotion 動画 WordPress 2.9
    Flickr 動画 & 画像 WordPress 2.9
    FunnyOrDie.com 動画 WordPress 3.0
    Hulu 動画 WordPress 2.9
    Imgur 画像 WordPress 3.9
    Instagram 画像 WordPress 3.5
    iSnare 記事 WordPress 2.9
    Issuu ドキュメント WordPress 4.0
    Meetup.com 各種コンテンツ WordPress 3.9
    EmbedArticles 各種コンテンツ WordPress 3.9
    Mixcloud 音楽 WordPress 4.0
    Photobucket 画像 WordPress 2.9
    PollDaddy 投票・アンケート WordPress 3.0
    Rdio 音楽 WordPress 3.6
    Revision3 TV shows WordPress 2.9
    Scribd ドキュメント WordPress 2.9
    SlideShare プレゼンスライド WordPress 3.5
    SmugMug 写真 WordPress 3.0
    SoundCloud 音楽 WordPress 3.5
    Spotify 音楽 WordPress 3.6
    TED 動画 WordPress 4.0
    Twitter ソーシャルメディア WordPress 3.4
    Viddler 動画 (4.0 で非推奨)
    Vimeo 動画 WordPress 2.9
    Vine 動画 WordPress 4.1
    WordPress.tv 動画 WordPress 2.9
    YouTube 動画 WordPress 2.9

    引用元:Codex:Embeds


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

    • Tab Area

    日本語

    今回の変更は、

    他、バグの修正を含みます。詳細は changelog (アドミンバー/カスタマイズ/高度な設定/変更履歴)を参照してください

    English

    version:1.352

    Overview of Changes

    Modified relate change for child theme

    childs/boots/inc.php

    Added jQuery ui tooltip

    raindrops_add_stylesheet();

    lib/csscolor.css.php

    lib/customize.php

    lib/validate.php

    lib/vars.php

    style.css

    @see Customize / Advanced / Tooltip

    if needs revert, set No.

    Added Primary Menu Automatic Responsive

    lib/customize.php

    lib/validate.php

    raindrops-helper.js

    raindrops.js

    responsiveness.css

    @see Customize / Presentation / Menu / Primary Menu Automatic Responsive

    if needs revert, set No.

    Modified Translation japanese

    Fixed category sepalator show twice.

    raindrops_category_navigation()

    Fixed year archive display improperly.

    raindrops_archive_year_navigation()

    Fixed page width 750px 950px 974px shows improperly when select 1column

    grid.css

    Fixed Modalbox title display improperly when language japanese.

    Fixed Sticky widget area not work when Static Front Page Front page displays ‘A static page’


  • 予告:Raindrops1.352 プライマリーメニューの表示の変更

    Raindrops1.352では、プライマリーメニュー(ヘッダー画像の下に表示される水平メニュー)のレスポンシブ表示の変更を行います。

    従来のレスポンシブ表示

    PCでの表示

    ブラウザのサイズが、メニュー幅を下回った場合の表示(ブラウザ幅が640px以上)

    ブラウザサイズが640px以下になり、レスポンシブ表示


    PC表示から、640pxのレスポンシブ表示に切り替わる区間内で、プライマリーメニューの幅によっては、折り返して表示されていました。

    Raindrops1.352では、メニューの折り返しを検出して、メニューのサイズがブラウザの幅よりも小さくなった場合、メニューの件数やフォントサイズに関係なく、640px以下で適用されるレスポンシブメニューに切り替えることが出来るようになります。

    設定の切り替え方法

    アドミンバーのカスタマイズをクリックし、カスタマイズページを表示します。

    外観 / メニュー / Primary Menu Automatic Responsive

    の項目で、無効にする場合は、いいえを選択します


  • 予告:Raindrops1.352 ツールチップサポート

    Raindrops1.352で、ツールチップをサポートします。

    WordPressの最近の変更で、emoji がサポートされたり、Material Icon, Genericonsといった、画像による表示が、テンプレートやコンテンツ内で多用される傾向が続いています。

    このような中で、そのアイコンの機能等を簡単に説明する一つの方法として、シンプルなツールチップをサポートする事にしました。

    ツールチップの利用方法

    a要素(リンク要素)の場合は、class=”tooltip” と title属性の両方が存在する場合にツールチップを表示し、それ以外の要素の場合は、title属性が存在した場合は、ツールチップが表示されます。

    この変更により、影響を受ける機能は、ウィジェットカレンダー、検索フォーム、コメントの表示が従来と異なって表示されます。

    tooltip

    tooltip-comment

    投稿フォーマットを指定した投稿で、タイトルを記述しなかった時に表示される投稿フォーマットアイコンにも、ツールチップが表示されます。

    サンプルコード

    以下のソースは、WP Emoji Oneプラグインの出力するソースに、文字サイズを拡大したものをベースに、title属性を追加しています。

    <span style="font-size:4em"><img style="margin-left: 3px; margin-right: 3px; vertical-align: middle; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;" title="ツールチップ" src="https://www.tenman.info/wp-37/wp-content/plugins/wp-emoji-one/icons/1F334.png" alt="" /></span>
    

    hello

    <a href="//tenman.info" class="tooltip" title="hello world">hello</a>

    リンクの場合は、class=”tooltip”がない場合には、ツールチップを表示しません

    hello

    <a href="//tenman.info" title="hello world">hello</a>

    ツールチップ機能の停止

    アドミンバーのカスタマイズをクリックして、カスタマイズページを表示します。

    高度な設定を選択して、表示されるTooltip セクションで、「いいえ」を選択し保存します

    又は、

    functions.php(チャイルドテーマのfunctions.phpが望ましいです)の先頭に、以下の変数を定義します。

    <?php
    	$raindrops_tooltip = false;
    ?>

    インラインでのツールチップの停止

    a要素以外は、title属性がある場合には、ツールチップとして表示しますが、必要のない場合には、class=”no-tooltip” を追加していただくとtitle属性が記述されていても、ツールチップは表示されなくなります。

    <span style="font-size:4em"><img class="no-tooltip" style="margin-left: 3px; margin-right: 3px; vertical-align: middle; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;" title="ツールチップ" src="https://www.tenman.info/wp-37/wp-content/plugins/wp-emoji-one/icons/1F334.png" alt="" /></span>
    

    この機能は、例えば以下のような場合に有用ではないかと思います。

    title属性に記述した文字列は、検索対象文字列になります。例えば企業ホームページ等で、画像やグーグルマップのiframe等に title=”本社地図”等とタイトルを付けておくと、検索した場合に、「本社」等の文字列で画像等が検索結果に反映します。

    地味なテクニックですが、使いどころは少なくないと思います。このような場合を考慮して、no-tooltipクラスを準備しました。


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

    • Tab Area

    日本語

    raindrops1.349がライブになりました。

    今回の変更は、

    English

    Modified editor-style.css
    Add hedding element style
    Add width classes (.rd-thumbnail,.rd-medium,.rd-large)
    Modified fonts.css
    Add font size class 27-32px(.f27-.f32)
    Modified functions.php
    change get_option() to raindrops_warehouse_clone()
    New Presentation Modal box support
    HTML pattern

            <a href="https://www.tenman.info/wp3/raindrops/2016/02/18/raindrops1-349%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/#modal_box_4186_1" class="modal-link">test</a>
    		<div class="rd-modal" id="modal_box_4186_1">
    			<div class="color4">
    				<div class="header color-3 block">
    		                   <h3>Title here, If need</h3>
    		                </div>
    				<div class="body">
    		youtube, form, table, list anything to here
    		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    		                </div>
    				<div class="footer color5 block">
    					<a href="#page" ><span class="lb-close color5 pad-s corner">Close</span></a>
    				</div>
    			</div>
    		</div>

    flagment link and modal id is automaticaly set,
    href=”https://www.tenman.info/wp3/raindrops/2016/02/18/raindrops1-349%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/#modal_box_4186_2”
    id=”modal_box_4186_2”
    is automatic replaced unique value

    Modified lib/customize.js, lib/customize.php
    add check current style type.
    Modified style.css
    Add Class rd-break-word,rd-break-all for non breaking text
    etc,


  • 予告:Raindrops1.348 モーダルボックスのサポート

    モーダルボックスを表示するための rd-modal クラスを追加します

    test

    <a href="https://www.tenman.info/wp3/raindrops/2016/02/12/%e4%ba%88%e5%91%8a%ef%bc%9araindrops1-348%e3%80%80%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88/#modal_box_4177_2" class="modal-link" title="hello world">test</a>
    <div class="rd-modal" id="modal_box_4177_2">
    	<div class="color4">
    		<div class="header color-3 block">
                       <h3>hello world</h3>
                    </div>
    		<div class="body">
    			
    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="footer color5 block"> <a href="#page" ><span class="lb-close color5 pad-s corner">Close</span></a> </div> </div> </div>

    モーダルボックスを表示するリンクは、シングルページだけで表示します。

    すべてのページで表示します
    id,href には、ユニークなIDを指定してください。
    #raindrops_modal_fragment_id_automatic 、 id=”raindrops_modal_fragment_id_automatic ”は、自動的にリンクとIDに置換されますので、そのままコピペで表示できます。

    サンプルのボックスシャドウは、スタイルに含みません。