• Raindrops 1.494 プライマリーメニュー クラスの追加

    Raindrops 1.494 では、プライマリーメニュー(ヘッダー画像下の横並びメニュー)の表示をコントロールするための新しいクラスを追加します。

    使いどころ

    メニューの階層が深い場合、ブラウザの右側にメニューリンクが隠れてしまう問題がありました。

    新しい child-left-side クラスを使う


    上記のように、メニューの親クラスに child-left-side を追加します。

    child-left-side クラスを適用すると以下のように表示できます


  • Raindrops 1.486 ウェブフォントクラスの追加と既知の問題

    Raindrops 1.486で、Google 日本語 アーリーアクセスフォントを追加する事にしましたので、お知らせします。

    Google Fonts + 日本語 早期アクセス

    にこもじ

    Mplus 1p

    はんなり

    Rounded Mplus 1c

    にくきゅう

    Noto Sans Japanese(従来よりサポート)

    さわらびゴシック

    さわらび明朝

    こころ明朝

    HTML

    f32クラスは、32px相当のフォントを意味します。

    ウェブフォントと既知の問題

    WordPress4.8でエディターに、存在しないフォント名を入力した場合以下のようなエラーが出ます

    上記の例は、google-font-noto-sans-jp ( Noto Sans JP )をロードしようとして、失敗してエラーが表示されている例です。

    なぜ、google-font-noto-sans-jp ( Noto Sans JP )がロード出来なくて、google-font-noto-sans-japanese(Noto Sans Japanese)がロードできるのかですが、

    多くのグーグルフォントは、スペースとフォント名で構成されているわけですが、Noto とか、それぞれの文字は、最初の文字が大文字 続く文字は小文字で構成されます。

    レインドロップステーマは、このような構成になっている事を標準として、フォントの自動ロードを試みますが、Noto Sans JP は、JPが二文字共に大文字のため、レインドロップスは、Googleに対して

    Noto Sans Jpというフォントを要求するため、フォントは存在しない事となり、エラーが表示されます。

    このため、google-font-noto-sans-jp クラスは、1.486では使用できません。Googleフォントを使用する場合、このような問題で、エラーが出ることがありますのでご留意ください。

    TinyMCEエディタビジュアルモードで、グーグルフォントが反映しない問題

    多分、4.8からだと思いますが、ビジュアルモードでGoogleフォントが反映しない問題があります。現在検証中です。

    ブログ表示では、フォントが反映することは確認済みです。


  • Raindrops1.482 縦書き機能の追加

    2017/7/10 Raindrops1.482をリリースしました。

    WordPressを使って誰でも特別な知識を必要とせず 縦書き記事が書けるようになりました。

    この記事は「縦書きを使いたい」という場合には、是非お試しください。

    Raindrops 1.482 リリースノート

    Raindrops1.482で縦書き機能を組み込むためのテストを始めました。


  • Raindrops 1.480 BUG Report

    カスタマイザーで、投稿リスト表示で「 概要をグリッドレイアウトで表示」を選択している場合に表示される 青丸ポップアップリンクにバグがありましたので、次のアップデートで修正します。(1.481で予定)

    内容:640px以下で表示した場合に、ポップアップとして機能せずクリックした場合 ページトップへ移動する。

    原因:640px以下では、グリッド表示からリスト表示に変更されるべきものがグリッド表示のスタイルが維持され続けるため。

    640px以下では、青丸リンクを非表示として、ポップアップ時に表示される カテゴリーやタグ編集ボタンを既定で表示するように変更します。

    なを、このブレークポイントの値は、raindrops_grid_break_point_smallフィルターで変更可能です。


  • Raindrops 1.471 BUG Report

    Raindrops1.472 ブログ一覧アイキャッチ画像の修正

    Raindrops1.472以前で、縦長のアイキャッチ画像を投稿の左側に表示した場合に、本文の量が少ない場合に、アイキャッチ画像が重なって表示される問題がありました。

    アイキャッチ画像を投稿の左側に表示する方法

    トップページのブログ一覧の1ページ目だけで設定可能な機能ですが、

    カスタマイズ/外観/アイキャッチ画像設定/投稿のアイキャッチ画像の強調設定利用の可否 をはいに設定すると表示される「アイキャッチ画像の位置」を投稿の左側にセットすると、以下のように表示されます。


    この問題を修正し、以下のような表示が得られるように修正を行います。


  • 予告:Raindrops1.471ヘッダー画像の自動トリミング

    Raindrops1.471で

    カスタマイズ/外観/レイアウトとサイドバーの設定で「フルサイズレスポンシブ」が設定されている場合(デフォルト設定)ヘッダー画像の自動トリミング機能を追加します。

    自動トリミング機能の設定の背景

    フルサイズレスポンシブでは、ブラウザ幅いっぱいに画像が表示されるようになりますが ヘッダー画像用にトリミングを行わない場合 この場合多くのブラウザでは画像の縦方向が、ブラウザのサイズを超えてしまいます。

    縦長の画像をセットしたような場合は、スクロールしても画像が表示され続け、操作がしずらいものになってしまいます。

    このような事から、ヘッダー画像として設定された画像が、ブラウザの高さを超えてしまう場合には、ブラウザの高さを上限にして、ブラウザに表示可能な範囲を表示するように変更します。

    例:indexページで、縦長のアイキャッチ画像が使用されています。

    個別投稿で、ヘッダー画像をアイキャッチ画像に設定した場合、横長のPCブラウザでは、ブラウザの長さよりはみ出る部分は、トリミングして以下のように表示されます。


    縦長の、スマートフォンなどで表示した場合は、同様にヘッダー画像のは見出しが発生する場合、ブラウザのサイズに合わせて縦長でいっぱいに表示されるようになります。

    この機能を使いたくない場合

    以下のようなフィルターを使用していただくと、カスタマイザーのヘッダー画像と同じ比率で、ヘッダー画像を表示するようになります。

    functions.phpの先頭に設定してください。