外観

外観は、テーマの配色、カラム数、フォントサイズ、投稿日や著者、アーカイブの表示形式等最もポピュラーなニーズの多い設定を行います

設定一覧

  1. 外観
    1. 配色
      1. ベースカラー
      2. 配色タイプ
    2. レイアウトとサイドバー
      1. ページ幅
      2. レイアウトの最大幅(レスポンシブ ボックス）（ページ幅　レスポンシブ　ボックスが選択された場合）
      3. コンテンツコンテナの幅（ページ幅　フルサイズ　レスポンシブが選択された場合）
      4. ブラウザ最大許容ウィンドウ幅（ページ幅　フルサイズ　レスポンシブが選択された場合）
      5. サイドバー設定の選択
      6. サイドバーの幅と位置
      7. デフォルトサイドバーのレスポンシブ設定
      8. デフォルトサイドバーのブレークポイント（デフォルトサイドバーのレスポンシブ設定で「はい」が選択された場合)
      9. エキストラサイドバー表示設定（サイドバー設定の選択　シンプルが選択された場合)
      10. エキストラサイドバー　幅（エキストラサイドバー表示設定　表示が選択された場合　または、サイドバー設定の選択　詳細が選択された場合)
      11. エキストラサイドバーのレスポンシブ設定
      12. エキストラサイドバーのブレークポイント（エキストラサイドバーのレスポンシブ設定で「はい」が選択された場合)
    3. アイキャッチ画像
      1. 投稿のアイキャッチ画像の強調設定利用の可否
      2. アイキャッチ画像の位置　（投稿のアイキャッチ画像の強調設定利用の可否　灰が選択された場合）
      3. アイキャッチ画像　サイズ　（投稿のアイキャッチ画像の強調設定利用の可否　灰が選択された場合）
      4. アイキャッチ画像の特別な表示を行う件数　（投稿のアイキャッチ画像の強調設定利用の可否　灰が選択された場合）
      5. シングル（投稿、ページ）
    4. フォント
    5. 投稿
      1. 投稿タイトル　CSSクラス
      2. 投稿日の表示
      3. 著者の表示
      4. デフォルトカテゴリの表示
      5. 投稿（カテゴリ、タグ）ラベルテキスト
      6. 「コメントは受け付けていません」 ラベルテキスト
      7. タイトル下の、投稿者や日付のブロックの位置
      8. 投稿の下部にある、カテゴリやタグを表示するブロックの位置
    6. アーカイブ
      1. アーカイブ　ラベルテキスト
      2. アーカイブページの上部のページナビゲーション
    7. メニュー
      1. 表示非表示設定
      2. 主ナビゲーションのフォントサイズ
      3. 主ナビゲーションの最小幅

配色

Raindropsテーマの特徴的な配色機能は、ベースカラーと、配色タイプはを組み合わせによって行われます

ベースカラーに、　#e74c3c　をセットしたとします。

Raindropsは、自動的に10個の背景色と、フォント色を自動生成します。

color-class

また、生成された色から8個のグラデーションCSSクラスを作成します

gradient-class

このスクリーンショットは、配色タイプ「ダーク」との組み合わせです。配色タイプ「ライト」のスクリーンショットは以下のようになります。

color-class-light

動的に配色を設定して、WEBサイトの基本的な配色傾向を決めてやることが出来ます。

カスタマイズによって、アクセントカラーを動的に生成する事も、配色タイプを新たに作り出すことも簡単にできるという事が、Raindropsテーマの大きな特徴になっています。

ベースカラー

ベースカラーは、Raindropsテーマの最も特徴的な配色設定です

ベースカラーを設定すると、ベースカラーを基にした10色の色と背景　８パターンのグラデーションを自動作成します。

ベースカラーは、「配色タイプ」との組み合わせで、膨大なパターンの配色を作成する事が出来ます

配色タイプ

配色タイプは、雰囲気を作り出します。明るい、暗い、ミニマルといった雰囲気をベースカラーを元に作りだします。

配色タイプは、カスタマイズにより新しいカラータイプを複数作ることが出来ますし、カラータイプを使わなくてもレイアウトは壊れません。

レイアウトとサイドバー

Raindropsテーマは、1カラムから3カラムまでのレイアウトを設定することが出来ます

指定した投稿やページだけに、指定したカラムを設定したり、「配色タイプ」を投稿毎に指定する事も、投稿独自のstyleを設定する事もできます

タグアーカイブ、カテゴリーアーカイブ、検索ページ、画像ページ、PDFページ等、固定ページテンプレートを除くほとんどのテンプレートでレイアウトをコントロールすることが出来ます

ページ幅

固定ページ幅3種、レスポンシブスタイル2種から選べます

レスポンシブタイプのページでは、ページ幅を自由に設定できます

  1. 750px
  2. 950px
  3. 974px
  4. レスポンシブ　ボックス
  5. フルサイズ　レスポンシブ

レイアウトの最大幅(レスポンシブ ボックス

固定ページ幅3種、レスポンシブスタイル2種から選べます

レスポンシブタイプのページでは、ページ幅を自由に設定できます

ページ幅設定でレスポンシブ　ボックスが設定された時に、表示されます

ページ幅を設定してください。(デフォルト、1280px)

コンテンツコンテナの幅

ページ幅設定でレスポンシブ　「フルサイズ」が設定された時に、表示されます

ページ幅を設定してください。(デフォルト、1280px)

ブラウザ最大許容ウィンドウ幅

ページ幅設定でレスポンシブ　「フルサイズ」が設定された時に、表示されます

最大許容幅は、フルサイズレスポンシブを選択した場合、ヘッダー画像はブラウザ幅いっぱいに表示されるため、許容幅は通常ヘッダー画像の幅になります。
デフォルトは1920pxです。アップロードしたヘッダー画像の幅を考慮して設定してください

最大許容幅を超えた場合は、ヘッダー画像は中央に配置されます

サイドバー設定の選択

  1. シンプル
  2. 詳細

シンプルを選択した場合は、すべてのアーカイブで同じ設定、3カラムまたは2カラム（エキストラサイトバーを非表示に設定）で表示します。

詳細を選択した場合は、すべてのアーカイブが1-3カラムでそれぞれ設定が可能です。

詳細を選択した場合に可能な設定項目一覧

  1. トップページのカラム数（サイドバー設定の選択　詳細が選択された場合)
    1. 1カラム
    2. 2カラム
    3. 3カラム
  2. 月次アーカイブのカラム数（サイドバー設定の選択　詳細が選択された場合)
    1. 1カラム
    2. 2カラム
    3. 3カラム
  3. 固定ページのカラム数（サイドバー設定の選択　詳細が選択された場合)
    1. 1カラム
    2. 2カラム
    3. 3カラム
  4. 検索結果ページのカラム数（サイドバー設定の選択　詳細が選択された場合)
    1. 1カラム
    2. 2カラム
    3. 3カラム
  5. 投稿のカラム数（サイドバー設定の選択　詳細が選択された場合)
    1. 1カラム
    2. 2カラム
    3. 3カラム
  6. Attachment Page Image Columns（サイドバー設定の選択　詳細が選択された場合)
    1. 1カラム
    2. 2カラム
    3. 3カラム
  7. Attachment Page PDF Columns（サイドバー設定の選択　詳細が選択された場合)
    1. 1カラム
    2. 2カラム
    3. 3カラム
  8. 404ページのカラム数（サイドバー設定の選択　詳細が選択された場合)
    1. 1カラム
    2. 2カラム
    3. 3カラム
  9. List of Post テンプレートのカラム数（サイドバー設定の選択　詳細が選択された場合)
    1. 1カラム
    2. 2カラム
    3. 3カラム
  10. カテゴリーアーカイブのカラム数（サイドバー設定の選択　詳細が選択された場合)
    1. 1カラム
    2. 2カラム
    3. 3カラム
  11. タグアーカイブのカラム数（サイドバー設定の選択　詳細が選択された場合)
    1. 1カラム
    2. 2カラム
    3. 3カラム
  12. 著者アーカイブのカラム数（サイドバー設定の選択　詳細が選択された場合)
    1. 1カラム
    2. 2カラム
    3. 3カラム

参考

投稿本文内でもグリッドレイアウトを使用可能です。

ブレークポイントが６４０pxの　レスポンシブグリッド５カラム

３カラムまでの非レスポンシブグリッドを使うことが出来ます。

サイドバーの幅と位置

デフォルトサイドバー（初期表示では、左180pxにセットされています）の位置と幅を設定します

初期表示で、右に表示されているサイドバーは、エキストラサイドバーの幅と位置の設定で変更できます

  1. 左側　160px
  2. 左側　180px
  3. 左側　300px
  4. 右側　180px
  5. 右側　240px
  6. 右側　300px

デフォルトサイドバーのレスポンシブ設定

Raindropsテーマは、640pxをメインブレークポイントに設定したレスポンシブデザインですが、それとは別に、サイドバーの折り畳みを自由に指定でき、またブレークポイントの指定もできます。

この機能により、異なるブレークポイントを持ったレスポンシブデザインにカスタマイズすることが出来ます。

デフォルトサイドバーのブレークポイント

設定する場合は、数値フィールドにpxサイズの数値を指定してください

Raindropsテーマは、640pxをメインブレークポイントに設定したレスポンシブデザインですが、それとは別に、サイドバーの折り畳みを自由に指定でき、またブレークポイントの指定もできます。

この機能により、異なるブレークポイントを持ったレスポンシブデザインにカスタマイズすることが出来ます。

エキストラサイドバーのブレークポイント

設定する場合は、数値フィールドにpxサイズの数値を指定してください

エキストラサイドバー　幅

この項目は、エキストラサイドバー表示設定　表示が選択された場合　または、サイドバー設定の選択　詳細が選択された場合表示します

メインコンテンツと、サイドバーの比率で指定します。このサイドバーは位置調整機能はありません

このサイドバーを、レスポンシブ設定で使用した場合は、ブラウザ幅に応じて自動的にリサイズされる点を考慮してください

  1. 25パーセント
  2. 33パーセント
  3. 50パーセント
  4. 66パーセント
  5. 75パーセント

アイキャッチ画像

Raindropsは、ブログトップに表示される（1ページ目だけに、件数を指定して）アイキャッチ画像を特別な表示を行うことが出来ます。

この設定は、デフォルトでは動作しません。「投稿のアイキャッチ画像の強調設定利用の可否」で「はい」を選択すると有効になります。

投稿のアイキャッチ画像の強調設定利用の可否

「はい」を選択した場合、トップページまたは、ブログアーカイブページの最初のページ内で、特別なアイキャッチ画像を表示できます

  1. はい
  2. いいえ

アイキャッチ画像の位置

この項目は、投稿のアイキャッチ画像の強調設定利用の可否「はい」が選択された場合表示します

アイキャッチ画像の位置を設定してください

  1. 投稿タイトルの上部
  2. 投稿の左側

アイキャッチ画像　サイズ

この項目は、投稿のアイキャッチ画像の強調設定利用の可否「はい」が選択された場合表示します

アイキャッチ画像の位置を設定してください

  1. Thumbnail
  2. Medium
  3. Large
  4. 他　登録済み画像サイズ

アイキャッチ画像の特別な表示を行う件数

この項目は、投稿のアイキャッチ画像の強調設定利用の可否「はい」が選択された場合表示します

特別な表示を行う件数を　半角数字で入力してください

  1. テキストフィールド

シングル（投稿、ページ）

この項目は、投稿のアイキャッチ画像の強調設定利用の可否「はい」が選択された場合表示します

特別な表示を行う件数を　半角数字で入力してください

  1. 表示
  2. 非表示

フォント

Raindrops　テーマは　13px-20pxの間でベースフォントサイズを変更することが出来ます。

フォント

この項目は、投稿のアイキャッチ画像の強調設定利用の可否「はい」が選択された場合表示します

このフォントサイズは、em から計算されたpx近似サイズです

  1. 13px
  2. 14px
  3. 15px
  4. 16px
  5. 17px
  6. 18px
  7. 19px
  8. 20px

投稿

投稿タイトル　CSSクラス

投稿タイトルにCSSクラスを設定できます

  1. テキストフィールド

投稿日の表示

投稿の投稿日の表示を設定します

  1. 表示
  2. 非表示
  3. 絵文字

著者の表示

投稿の著者の表示を設定します

  1. 表示
  2. 非表示
  3. アバター

デフォルトカテゴリの表示

投稿の著者の表示を設定します

  1. 表示
  2. 非表示

投稿（カテゴリ、タグ）ラベルテキスト

カテゴリーの表示をテキストで表示するか、非表示または絵文字を使うか設定できます

  1. 表示
  2. 非表示
  3. 絵文字

「コメントは受け付けていません」 ラベルテキスト

  1. 表示
  2. 非表示

タイトル下の、投稿者や日付のブロックの位置

表示位置を設定します

  1. 本文の手前
  2. 本文の後ろ

タイトル下の、投稿者や日付のブロックの位置

投稿の下部にある、カテゴリやタグを表示するブロックの位置

  1. 本文の手前
  2. 本文の後ろ

アーカイブ

アーカイブ　ラベルテキスト

アーカイブのタイトルラベルのを表示または非表示を設定します

  1. 表示
  2. 非表示
  3. 絵文字

アーカイブページの上部のページナビゲーション

アーカイブページの上部にナビゲーションリンクを表示または非表示を設定します

  1. 表示
  2. 非表示

メニュー

表示非表示設定

primaryメニューの表示または非表示設定

  1. 表示
  2. 非表示

主ナビゲーションのフォントサイズ

primaryメニューの表示または非表示設定

  1. スライダー

主ナビゲーションの最小幅

primaryメニューの表示または非表示設定

  1. スライダー
(工事中）

投稿日: tenman
📂投稿グループ カスタマイザー 外観(カスタマイザー)

関連投稿

コメントは受け付けていません。