WordPress Theme Raindrops

ワードプレス日本語テーマ レインドロップス

Expandmenu Shrunk

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

    投稿日 tenman
     

    Raindrops 1.453 更新概要

    Raindrops1.453 BUG Report

    今回の更新は

    カスタマイザーに新しい機能の追加を行いました

    カスタマイズ / 外観  / フォント に

    投稿のバーチカルリズム セクション

    投稿のバーチカルリズムとは、投稿本文内で 見出し要素 div要素 p table ul ol 等よく使用される要素の垂直方向のマージンを変更できる機能です。

    ユーザーは、テーマをブログ用に使ったり、企業ポータルサイト等様々な用途で使用します。ブログ用の用途の場合だと、マージンが広く取られた方が読みやすかったり、企業ポータルの記事などは、マージンが少なめの方が まとまった印象になるといった、ここの使用状況に合わせて雰囲気を変更する機能です。

    タイトルを大文字に変更する機能

    この機能は、タイトルに日本語だけを使っている場合は、何も変化しません。英文字だけの機能です。

    サイトタイトル、投稿タイトル ウィジェットタイトル、アーカイブタイトルの英文文字列を大文字に変更します

    WEBサイトの印象の変更には、レイアウトや配色といった項目が注目を浴びやすいですが、これらのマージンを変更するだけでサイトの印象を大きく変えることが出来ます。是非一度お試しください。

    この変更に関連して、新しいCSSクラスを追加しました。.uppercase,.lowercase,.capitalizeの3つです。これらのクラスは、

    カスタマイズ / サイト基本情報 / サイトタイトルのCSSクラス、

    カスタマイズ / 外観 / 投稿 / 投稿タイトルのCSSクラス

    カスタマイズ / メニュー / それぞれのメニュー名 / それぞれの項目のCSSクラス 等で、上記の設定を調整する目的のために追加しました。

    また、従来から存在するグリッドクラスに、equal-heightクラスを追加しました。

    1/2

    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 …

    1/4 グリッド表示行の高さをそろえるためのクラスです。
    1/4


    詳細は以下をご参照ください。
    Equal Height Grid

    また、最近よく使われているゴーストボタンを簡単に設置するためのクラス ghostクラスを追加しました。

    詳細は以下を参照ください。

    Ghost Button ゴーストボタンクラス -- CSS note

    disable クラスを追加しました

    カスタマイズ / メニュー / それぞれのメニュー名 / それぞれの項目のCSSクラス 等で、リンクを停止したいというニーズがあるようなので、メニューのCSSクラスに

    disableを記述していただくことで、リンクを無効にします。このクラスは、クラス直下のa要素、およびa要素に指定された場合のみ動作します。

    CSSの適用だけでなくjavascriptで、href属性も削除します。

    AMPプラグイン用のフィルター名が間違っていましたので修正しました。

    version: 1.453 Overview of Changes

    Modified Add new CSS classes

    .equal-height

    .uppercase

    .lowercase

    .capitalize

    Customize ‘Convert All Titles to Uppercase’ relate changes.

    You can control from Customize / Site Identity / CSS Class of Site Title

    Customize / Presentation / Post / Entry Title CSS Class

    Customize / Menus / Menu Name / CSS Classes

    .ghost

    Make the ghost button

    example

    <a class="ghost rd-alert-bg external" href="http://www.example.com">ghost</a>

    .disable

    a.disable or .disabe > a is ignore tags surrounded by anchor.

    Modified Customizer Customize / Presentation / Fonts

    Add New Section ‘Vertical Rhythm for Entry Content’ and ‘Convert All Titles to Uppercase’

    Fixed wrong filter name

    Change from raindrops_amp_image_width to raindrops_amp_image_height




  • テーマサポート

    ページレイアウト

    1カラム

    2カラム

    3カラム

    4カラム

    post format status

    コンテンツ レイアウト

    投稿本文領域でのgrid layout

    1カラム

    2カラム

    3カラム

    4カラム

    5カラム

    機能

    カスタム背景

    カスタムカラー

    カスタムヘッダー

    カスタムロゴ

    カスタムメニュー

    エディタースタイル

    アイキャッチ画像­ヘッダー

    アイキャッチ画像

    可変ヘッダー

    フッターウィジェット

    全幅テンプレート

    マイクロフォーマット

    投稿フォーマット

    RTL言語対応

    固定投稿

    スレッドコメント

    翻訳対応

    テーマ カスタムウィジェット

    ピンナップ投稿

    投稿のグリッド表示、サイドバーで特定投稿(ランダム表示可能)を表示

    カテゴリーごとの最新記事

    すべてのカテゴリの中から選択、件数指定で最新記事表示

    拡張アーカイブ

    アーカイブの表示期間指定、月別グループ化

    配色機能

    ベースカラーの設定により、無数の配色パターンを作ることが出来ます

    表示しているボックスの背景やフォント色は、自動配色機能を使っています

    ダーク

    ライト

    ミニマル

    W3スタンダード

  • カスタマイズ FAQ

    • サイトタイトルや投稿 タイトルのフォントを変更したい
    • Googleフォントは、クラス名を記述するだけで、サイトタイトル、投稿タイトル、本文で使用できます。
      例:カスタマイズ/サイト基本情報/サイトタイトルのCSS クラス に google-font-lobsterと入力
      投稿タイトル
      例:カスタマイズ/外観/投稿/投稿タイトルCSSクラス に google-font-lobsterと入力 詳細:Google Font Test
    • 投稿一覧などをグリッドレイアウトで表示できますか
    • はい、Raindrops1.464でグリッド表示を行うことが出来ます。
      version1.464から投稿一覧、アーカイブ、検索結果はカスタマイザーの設定で、カスタム投稿一覧、カスタムフォーマットアーカイブは、functions.phpにコードを追加する事で、グリッド表示にすることが出来ます。詳細は、「予告:Raindrops1.464でアーカイブページのグリッド表示 – WordPress Theme Raindrops」をご覧ください
    • サイトタイトルや投稿 タイトルのフォントを変更したい
    • Googleフォントは、クラス名を記述するだけで、サイトタイトル、投稿タイトル、本文で使用できます。
      例:カスタマイズ/サイト基本情報/サイトタイトルのCSS クラス に google-font-lobsterと入力
      投稿タイトル
      例:カスタマイズ/外観/投稿/投稿タイトルCSSクラス に google-font-lobsterと入力 詳細:Google Font Test
    • サイトタイトルやキャッチフレーズをヘッダー画像内に表示したい
    • カスタマイズの設定で簡単にできます。
      カスタマイズ/サイト基本情報/サイトタイトルの表示位置で変更できます ヘッダー画像の中に表示を選択すると、マージンや位置に関するセクションが表示され詳細な設定が可能です。
    • トップページでは、ヘッダー画像の代わりにスライダーを表示したい
    • Meta Sliderとの自動連係機能があります
      既にインストールしてある場合には、テーマインストール後、一度停止、再アクティベートすると、カスタマイズ/アドオン/トップページにスライダーを表示という項目が追加されますので、スライダーを選択していただくと、自動的にトップページで表示します。
    • Topページをカスタマイズしたい
    • 簡単な例:トップページ用の固定ページ(タイトル例:home)と、投稿アーカイブ用の固定ページ(タイトル例:blog)を作成します
      手順1:カスタマイズで固定フロントページをクリックします。 手順2:カスタマイズで固定フロントページをクリックし、固定ページを選択します。 手順3:フロントページを(タイトル例:home)を選択します 手順4:投稿ページを(タイトル例:blog)を選択し、保存します 手順5:レイアウトを変更する場合は、カスタマイザー/外観/サイドバー設定の選択で詳細を選択して、表示される トップページのカラム数等を指定します。 投稿アーカイブは、http://ワードプレスのURL/blog(タイトルがblogの場合)で表示することが出来ます
    • 投稿日や投稿者を非表示にしたい
    • カスタマイズ/外観/投稿で、表示非表示を設定できます。
      表示、非表示、アイコン表示が出来ます。
    • 投稿日等の日付を和暦で表示したい
    • カスタマイズ/アドオンで、日付の和暦表示を選択してください
      日本語環境でワードプレスを使用している場合のみ和暦表示が可能です
    • パンくずリストを設置したい
    • Breadcrumb NavXTとの自動連係機能があります
      既にインストールしてある場合には、テーマインストール後、一度停止、再アクティベートすると、カスタマイズ/アドオン/パンくずリストという項目が追加されますので、「はい」 を選択していただくと、パンくずリストが、自動的に表示されます。
    • イベントカレンダーを設置したい
    • The Events Calendarとの自動連係機能があります
      既にインストールしてある場合には、テーマインストール後、一度停止、再アクティベートすると、カスタマイズ/アドオン/イベント管理という項目が追加されますので、「はい」 を選択していただくと、イベント管理が出来ます。
    • アーカイブページナビゲーションを詳細に設定したい
    • WP-PageNaviとの自動連係機能があります
      既にインストールしてある場合には、テーマインストール後、一度停止、再アクティベートすると、カスタマイズ/アドオン/カスタムページナビゲーションという項目が追加されますので、「はい」 を選択していただくと、自動的に、ナビゲーションが置き換えられます。
    • 投稿の前後等に、独自のコンテンツを差し込みたい
    • カスタマイズ/高度な設定/開発者用設定で、表示 を選択するとカスタマイザーのプレビューに挿入ポイントが表示されます
      必要な場所に対応するテンプレート名でテンプレートを作成するか、アクションフックで簡単に挿入できます。
      カスタマイズが終了したら、非表示に設定を戻してください。
    • フッタークレジットを書き換えたい
    • カスタマイズ/高度な設定/フッタークレジットのテキストエリアに、独自のクレジットを記述できます。
      address要素で囲んでいただくと中央揃えになります。
    • リンクをクリックしたときに一瞬色が変わるのを停止したい
    • カスタマイズ/高度な設定/キーボードアクセシビリティの停止 で無効を設定していただくと、停止します。
      キーボードアクセシビリティとは、リンクの移動をTABキーを使って移動できる機能です
    • チャイルドテーマを作るほどではないが、スタイルをカスタマイズしたい
    • カスタマイズ/高度な設定/サイト全体のCSS でスタイルを設定出来ます
      スタイルが反映しない場合、入力後、テキストエリアの外側を一度クリックしていただくと反映します。 ここで設定したスタイルは、テーマをアップデートしても失われません
    • テーマを黒以外に設定したい
    • カスタマイズ/外観/配色で、変更できます
      ベースカラーと、配色タイプの組み合わせで、通常のカラーパターンにとらわれない独自の配色設定が出来ます
    • 投稿で、画像が存在しない場合に表示される代替画像をカスタマイズしたい。
    • カスタマイズ/高度な設定/投稿本文内代替画像で、画像のURLを変更してください
      デフォルトの代替画像 デフォルト代替画像
    • 他の投稿とは、異なる独自の投稿デザインを適用したい
    • 例:投稿本文に[raindrops class="rd-card"]と記述してみてください
      このスタイルは、組み込みのサンプルスタイルです。記法のクラスを、書き換えて(例えば:my-class)として、.my-class article{border:1px solid red;}等のようにスタイルをセットしていただくと、独自のスタイルをセットできます。
    • アイキャッチ画像のサイズや位置のカスタマイズ
    • カスタマイズ/外観/アイキャッチ画像で設定が可能です。
      デフォルトでは、トップページの1ページ目に指定件数サイズや位置をカスタマイズできます。
    • トップページや検索ページでは本文を概要表示したい
    • カスタマイズ/概要表示で設定が可能です。
      概要表示には、WordPress標準の概要表示と、Raindrops独自のhtmlを含んだ概要表示が可能です
    • デフォルトカテゴリー(未分類等)をカテゴリーリストに表示したくない
    • カスタマイズ/外観/デフォルトカテゴリの表示 隠すを設定してください
      この処理は、CSSで行われますので、ソースそのものには、デフォルトカテゴリーは存在します
    • レイアウトを変更したい
    • カスタマイズ/外観/レイアウトとサイドバーで、ページ幅、サイドバー幅、カラム数を変更できます。
      1カラムにしたい場合は、サイドバー設定の選択で、詳細を選択すると、投稿、ページ、すべてのアーカイブのカラム数を変更できます レスポンシブレイアウトで、3カラムから、2カラム、1カラムへのブレークポイントの設定は、エキストラサイドバーのレスポンシブ設定 デフォルトサイドバーのレスポンシブ設定から、ブレークポイントをお好みに応じて設定できます
    • フォントサイズを変更したい
    • カスタマイズ/外観/フォントで、ベースフォントサイズを変更できます
      全体のサイズがすべてベースフォントサイズに対応して表示されますのでサイトタイトルや投稿タイトルの調整が必要な場合は レスポンシブレイアウトで、3カラムから、2カラム、1カラムへのブレークポイントの設定は、エキストラサイドバーのレスポンシブ設定 デフォルトサイドバーのレスポンシブ設定から、ブレークポイントをお好みに応じて設定できます カスタマイズ/サイト基本情報/サイトタイトルのCSS クラスに、f10(10px)-f40(40px) クラスを追加してください カスタマイズ/外観/投稿/投稿タイトルCSSクラスに、f10(10px)-f40(40px) クラスを追加してください 詳細:フォントサイズクラス
    • メインメニューのフォントサイズや幅、スティキーメニューの調整
    • カスタマイズ/外観/メニューで、フォントサイズや幅を調整できます
      カスタマイザーの設定によっては、ハンバーガーメニューが表示されます。少し余裕を見て設定してください
    • カスタム投稿タイプを使いたいのですが、テーマはサポートしていますか?
    • Raindrops1.439から、カスタム投稿タイプ個別投稿ページ、カスタム投稿アーカイブでの表示の問題を改善しました。
      特別にテンプレートなどを準備しなくても表示できます 詳細は、アップデートのお知らせを参照してください。
  • ワイヤーフレームクラス(wireframe Class)のご紹介

    このクラスは、Raindropsの長い歴史の中でもほとんど説明されることのなかった プライベートなCSSクラスです。

    このクラスを body要素内に記述すると、コンテンツの中身が非表示になり アウトラインだけが表示されるようになります。

    WEBサイトの、レイアウトの検証や、印刷していただいて、机上でコンテンツの配置等を検討する場合に使っていただけると思います。