テーマオプションレスポンシブ

画像はクリックすることでLightbox内に大きく表示することができます。

このコンテンツでは、【テーマオプションレスポンシブ】全9のオプションについて解説をしています。

Avadaはレスポンシブテーマですが、レスポンシブを謳う他のテーマと大きな差の1つにブレイクポイントを自分で決められる点があります。それに加え、ヘッダー・コンテンツ・サイドバー・グリット表示のブレイクポイントをそれぞれ分けて設定ができます。そのため、iPadではヘッダーをスマホでよく見かけるバーガーメニューにして、コンテンツはPC版と同様にサイドバー有りの2カラムにする!!といった設定が手軽にできます。

なお、このページの中に出てくるキーワードに【ブレイクポイント】というものがあります。ブレイクポイントは、CSSの切り替え地点のことで、「横幅が何px以上または何px以下の場合、このCSSを適用する」といった基準になるところを指します。

切り替え地点は、実際に使用されているスクリーンサイズの割合を確認できるStatCounterを参考に設定するといいでしょう。

サクッと画像で概要を見たい方はこちら

1.Responsive Design / レスポンシブデザイン

このオプションを有効化することで、レスポンシブに対応したサイトにすることができます。また、有効化することでレスポンシブに関わるオプションが表示され、詳細な設定をすることができます。

2.Grid Responsive Breakpoint / グリッドのブレイクポイント

このオプションは、グリッド表示のブレイクポイントを設定します。
グリッドは、ブログやポートフォリオで選択できる記事一覧の表示方法です。

ここで設定するブレイクポイントは、その値より画面の幅が下回るとカラム数が減少していき、最後は1つ1つで表示されます。

次で表示している画像は、iPhone plusで表示している例です。

グリッドブレイクポイント 600

グリッドブレイクポイント 641

ブレイクポイント600では4カラムとなっていましたが、641では1カラムとなりました。スマホでは2カラム以上あるとタップなどの操作が悪くなるため、当サイトでは1100としております。こうすることで、PCでは3カラム以上、iPadでは2カラム、iPhoneでは1カラムになります。

3.Header Responsive Breakpoint / ヘッダーのブレイクポイント

このオプションは、ヘッダーのブレイクポイントを設定します。

このオプションで設定した値より画面の幅が狭くなると、メニューがバーガーメニューに切り替わるなど、モバイル用のヘッダーレイアウトに変わります。

ヘッダーブレイクポイント 1023

ヘッダーブレイクポイント 1024

画像は、iPadのランドスケープ（横向き・1024px）で実際に当サイトを見た場合です。

ブレイクポイントが1023px未満では、PCで見ている時のレイアウトと変わりませんが、1024pxで設定すると、左上のナビメニューやSNSアイコンがそれぞれカラム落ちの1カラムとなり、メニューもバーガーメニューに切り替わりました。

なお、当サイトが採用しているヘッダーレイアウトは、色々な要素をヘッダーに詰め込めるレイアウトです。
そのためこのような設定としていますが、シンプルなレイアウトを選択している場合は、もっと低い値（狭い幅）でも崩れが起きる心配がないため、ヘッダーのレイアウトを選択してからこの値を設定するといいでしょう。

4.Site Content Responsive Breakpoint / コンテンツのブレイクポイント

このオプションは、メインコンテンツのブレイクポイントを設定します。
メインコンテンツは、ヘッダーの下部分からフッターまでを含めたエリアになります。（サイドバーは含まれません）

iPhoneとiPadそれぞれ実際の例を見てみましょう。

iPhone plus 413px → 414px

iPad 767px → 768px

iPhone plusの画面幅は414pxなので、413pxで設定してしまうとメインコンテンツ内の2カラム部分が1カラムのままとなっており、崩れてしまっています。iPadも同様に、画面幅である768pxを下回る値である767px未満で設定してしまうと、日付部分などが崩れてしまっています。

当サイトでは、ランドスケープ（横向き）の時はPCと同じレイアウト、ポートレイト（縦向き）の時は1カラムになるように（グリッド表示部分は2カラム）768pxで設定しています。

5.Sidebar Responsive Breakpoint / サイドバーのブレイクポイント

このオプションは、サイドバーのブレイクポイントを設定します。
設定した値より画面幅が狭くなると、メインコンテンツの下とフッターの間にサイドバーのコンテンツが表示されます。

Ver5以降に新たに加わった設定となりますが、【4.Site Content Responsive Breakpoint / コンテンツのブレイクポイント】と同様の値または大きな値がオススメです。

6.Mobile Device Zoom / モバイルデバイスのズーム操作

このオプションを有効にするとモバイルデバイスでピンチアウトを使用することができます。

ピンチアウトは、画面上の操作対象を広げるように2本の指を離していき、画面を拡大させる操作のことです。

7.Responsive Heading Typography / 見出しのフォント設定

このオプションを有効にすると、【8.Responsive Typography Sensitivity / フォント設定の感度】と【9.Minimum Font Size Factor / 最小フォントサイズ要因】のオプションが表示されます。

これら2つのオプションで、モバイルデバイスでのフォントサイズの調整を行うことができます。
ただし、テーマオプション → 【Typography（フォント）】で設定しているフォントサイズを基準に調整するため、相当大きなフォントサイズにしていない限り変化は見られません。

Fusion Sliderで【8.Responsive Typography Sensitivity / フォント設定の感度】と【9.Minimum Font Size Factor / 最小フォントサイズ要因】の設定ができますが、Sliderでは大きなフォントサイズを使用する機会があるため、そちらで変化を見てみるといいでしょう。