TAテーマ001取扱い説明(レスポンシブデザイン設定)

TAテーマ001取扱い説明(レスポンシブデザイン設定)

『TAテーマ001』のレスポンシブデザイン設定の説明です。

 

基本設定

レスポンシブデザイン基本設定

responsive_basic1

レスポンシブデザイン基本設定です。項目を入力して”レスポンシブデザイン『基本設定』設定更新”をクリックすると設定が確定します。

① レスポンシブデザイン:チェックを入れるとレスポンシブデザインが有効になります。

② レスポンシブデザイン時のサイドバー表示 ※ 通常画面で表示されている場合に有効です。

③ レスポンシブデザイン時のサブサイドバー表示 ※ 通常画面で表示されている場合に有効です。

④ レスポンシブデザインに切り替わる画面ピクセル幅 ※ 一般的なスマートフォンの縦表示のみが対象の場合は640ピクセル、横表示も含める場合は770ピクセルを入力します。

⑤ レスポンシブデザインの左右余白付きコンテンツの幅 ※ 100%以下:100%との差は左右の均等余白になります。

アディショナルモード設定

responsive_basic2
responsive_basic3

アディショナルモード設定です。アディショナルモードとは、サイドバー・サブサイドバーを別枠としてアコーディオン展開表示させるモードです。スタイリッシュなモバイル表示が実現できます。項目を入力して”レスポンシブデザイン『基本設定』設定更新”をクリックすると設定が確定します。

※ アディショナルモードではヘッダーバナーエリアのロゴ画像(代替テキスト)と検索ボックスのみが表示されます。

① アディショナルモード:チェックを入れるとアディショナルモードが有効になります。※ 標準ヘッダーは無効になります。

② 強制サイドバーコンテンツ表示モード ※ 通常画面の設定は無視されます。、③ 強制サブサイドバーコンテンツ表示モード ※ 通常画面の設定は無視されます。

④ アディショナルヘッダーの高さ

⑤ アディショナル表示開始マーク(WordPressダッシュアイコンより)

⑥ アディショナル表示開始マークの幅 ※ マークの位置はアディショナルヘッダーの垂直方向中心になります。

⑦ アディショナル表示開始マークの色

⑧ アディショナル表示終了マーク(WordPressダッシュアイコンより)

⑨ アディショナル表示終了マークの幅 ※ マークの位置はアディショナルヘッダーの垂直方向中心になります。

⑩ アディショナル表示終了マークの色

⑪ アディショナル表示吹き出し、⑫ アディショナル表示吹き出しサイズ、⑬ アディショナル表示吹き出しの色

⑭ アディショナル表示吹き出しの上部からの位置、⑮ アディショナル表示吹き出しの左端からの位置

⑯ ロゴエリア表示(ロゴ画像 or 代替テキスト) ※ ロゴ画像 or 代替テキストの選択が可能です。

⑰ ロゴ画像の縮尺 ※ アディショナルヘッダーの高さに対しての縮尺です。

⑱ ロゴ画像の代替テキストサイズ、⑲ ロゴ画像(代替テキスト)の上端との余白

⑳ 検索表示(虫眼鏡の表示:虫眼鏡をクリックすると検索ボックスが表示される)※ 虫眼鏡と検索ボックスのデザインは標準ヘッダーの検索エリア情報を踏襲します。

㉑ アディショナル表示開始・終了マーク、検索マークの両端との余白

㉒ 誘導表示 ※ 有効にするとアディショナル表示マークの横でクリックを促すテキストを表示します、㉓ 誘導テキスト

㉔ 誘導表示サイズ、㉕ 誘導表示の太さ、㉖ 誘導表示の色

㉗ 誘導表示の上部からの位置、㉘ 誘導表示の左端からの位置

㉙ 誘導表示のブリンキング間隔(ブリンキングをさせない場合は0を入力)

レスポンシブデザイン有効時のviewport設定

responsive_basic4

レスポンシブデザイン有効時のviewport設定です。項目を入力して”レスポンシブデザイン『基本設定』設定更新”をクリックすると設定が確定します。

① viewport設定出力(レスポンシブデザインが有効の時に有効です)

②(仮想表示)幅(200~10000の範囲:端末に任せる場合の“device-width”は0を、未使用の場合は-1を入力)

③ 初期拡大倍率(最小倍率~最大倍率の範囲:未使用の場合は-1を入力)

④ 最小倍率(0~10の範囲:未使用の場合は-1を入力)

⑤ 最大倍率(0~10の範囲:未使用の場合は-1を入力)

⑥ ユーザーの拡大縮小操作許可

具体的にはヘッダーに記述される下記の”viewport”の各項目の値になります。

<meta name=”viewport” content=”width=②, initial-scale=③, minimum-scale=④, maximum-scale=⑤, user-scalable=⑥”>

※ 比較的多い設定は<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>です。viewportの解釈(効果)はOSによって異なりますのでご留意ください。特にiOS(iPhone、iPadなどのOS)はバージョンによって解釈が一定ではありません。

背景

レスポンシブデザイン時のトップページフレーム外背景色・背景画像

responsive_bg1

レスポンシブデザイン時のトップページフレーム外背景色・背景画像に関する設定です。項目を入力して”レスポンシブデザイン『背景』設定更新”をクリックすると設定が確定します。

① 背景色

② 背景画像

③ 背景画像の場所と繰り返しルール

④ 背景画像の上下部端からの距離 ※ y方向の繰り返しが無い場合のみ有効です。

レスポンシブデザイン時のトップページ以外ページのフレーム外背景色・背景画像

responsive_bg2

レスポンシブデザイン時のトップページ以外ページのフレーム外背景色・背景画像に関する設定です。項目を入力して”レスポンシブデザイン『背景』設定更新”をクリックすると設定が確定します。

① 背景色

② 背景画像

③ 背景画像の場所と繰り返しルール

④ 背景画像の上下部端からの距離 ※ y方向の繰り返しが無い場合のみ有効です。

レスポンシブデザイン時のヘッダーバナーエリアの背景色・背景画像

responsive_bg3

レスポンシブデザイン時のヘッダーバナーエリアの背景色・背景画像に関する設定です。項目を入力して”レスポンシブデザイン『背景』設定更新”をクリックすると設定が確定します。

① 背景色

② 背景画像

③ 背景画像の場所と繰り返しルール

④ 背景画像の上下部端からの距離 ※ y方向の繰り返しが無い場合のみ有効です。

レスポンシブデザイン時のメインコンテンツの背景色・背景画像

responsive_bg4

レスポンシブデザイン時のメインコンテンツの背景色・背景画像に関する設定です。項目を入力して”レスポンシブデザイン『背景』設定更新”をクリックすると設定が確定します。

① 背景色

② 背景画像

③ 背景画像の場所と繰り返しルール

④ 背景画像の上下部端からの距離 ※ y方向の繰り返しが無い場合のみ有効です。

レスポンシブデザイン時のサイドバーの背景色・背景画像

responsive_bg5

レスポンシブデザイン時のサイドバーの背景色・背景画像に関する設定です。項目を入力して”レスポンシブデザイン『背景』設定更新”をクリックすると設定が確定します。

① 背景色

② 背景画像

③ 背景画像の場所と繰り返しルール

④ 背景画像の上下部端からの距離 ※ y方向の繰り返しが無い場合のみ有効です。

レスポンシブデザイン時のサブサイドバーの背景色・背景画像

responsive_bg6

レスポンシブデザイン時のサブサイドバーの背景色・背景画像に関する設定です。項目を入力して”レスポンシブデザイン『背景』設定更新”をクリックすると設定が確定します。

① 背景色

② 背景画像

③ 背景画像の場所と繰り返しルール

④ 背景画像の上下部端からの距離 ※ y方向の繰り返しが無い場合のみ有効です。

レスポンシブデザイン時のフッター背景色・背景画像

responsive_bg7

レスポンシブデザイン時のフッター背景色・背景画像に関する設定です。項目を入力して”レスポンシブデザイン『背景』設定更新”をクリックすると設定が確定します。

① 背景色

② 背景画像

③ 背景画像の場所と繰り返しルール

④ 背景画像の上下部端からの距離 ※ y方向の繰り返しが無い場合のみ有効です。

ヘッダー

ヘッダーのレスポンシブデザイン設定

responsive_header1
responsive_header2

ヘッダーのレスポンシブデザイン設定です。項目を入力して”レスポンシブデザイン『ヘッダー』設定更新”をクリックすると設定が確定します。

① ヘッダーの表示(グローバルメニューとヘッダー画像は含まない)※ 通常画面で表示されている場合に有効です。

② ヘッダーのレスポンシブデザイン共通フォントサイズ(ヘッダー内の一般フォントに適応されます)

③ PC設定流用 or ヘッダー(レスポンシブ)専用:有効にすると当設定(ヘッダー(レスポンシブ)専用)が選択されます。無効の場合は共通設定が採用されます。

④ ヘッダー(レスポンシブ)パラグラフの高さ(line-height)

⑤ ヘッダー(レスポンシブ)パラグラフの上余白、⑥ ヘッダー(レスポンシブ)パラグラフの下余白

⑦ ヘッダー(レスポンシブ)パラグラフの左余白、⑧ ヘッダー(レスポンシブ)パラグラフの右余白

⑨ ヘッダーの上側余白、⑩ ヘッダーの下側余白

ロゴエリアのレスポンシブデザイン設定

responsive_header3
responsive_header4

ロゴエリアのレスポンシブデザイン設定です。項目を入力して”レスポンシブデザイン『ヘッダー』設定更新”をクリックすると設定が確定します。

① ロゴエリアの表示 ※ 通常画面で表示されている場合に有効です。

② ロゴエリアh1の表示 ※ 通常画面で表示されている場合に有効です。

③ ロゴエリアh1のフォントサイズ(ヘッダーレスポンシブデザイン共通フォントサイズに対する比率)

④ ロゴエリアh1の位置、⑤ ロゴエリアh1の表示方法(無効の場合は左右余白無し)

⑥ ロゴエリアh1の上側余白、⑦ ロゴエリアh1の下側余白、⑧ ロゴエリアh1の端余白(50%以下:位置が中央の場合は無効)

⑨ ロゴエリア画像(代替テキスト)の表示 ※ 通常画面で表示されている場合に有効です。

⑩ ロゴエリア画像(代替テキスト)のフォントサイズ(ヘッダーレスポンシブデザイン共通フォントサイズに対する比率)

⑪ ロゴエリア画像(代替テキスト)の位置、⑫ ロゴエリア画像(代替テキスト)の表示方法(無効の場合は左右余白無し)

⑬ ロゴエリア画像(代替テキスト)の上側余白、⑭ ロゴエリア画像(代替テキスト)の下側余白、⑮ ロゴエリア画像(代替テキスト)の端余白(50%以下:位置が中央の場合は無効)

連絡先エリアのレスポンシブデザイン設定

responsive_header5
responsive_header6

連絡先エリアのレスポンシブデザイン設定です。項目を入力して”レスポンシブデザイン『ヘッダー』設定更新”をクリックすると設定が確定します。

① 連絡先エリアの表示 ※ 通常画面で表示されている場合に有効です。

② 連絡先エリア画像(代替テキスト)の表示 ※ 通常画面で表示されている場合に有効です。

③ 連絡先エリア画像(代替テキスト)のフォントサイズ(ヘッダーレスポンシブデザイン共通フォントサイズに対する比率)

④ 連絡先エリア画像(代替テキスト)の位置、⑤ 連絡先エリア画像(代替テキスト)の表示方法(無効の場合は左右余白無し)

⑥ 連絡先エリア画像(代替テキスト)の上側余白、⑦ 連絡先エリア画像(代替テキスト)の下側余白、⑧ 連絡先エリア画像(代替テキスト)の端余白(50%以下:位置が中央の場合は無効)

⑨ 連絡先エリア簡易メニューの表示 ※ 通常画面で表示されている場合に有効です。

⑩ 連絡先エリア簡易メニューの位置、⑪ 連絡先エリア簡易メニューの表示方法(無効の場合は左右余白無し)

⑫ 連絡先エリア簡易メニューの上側余白、⑬ 連絡先エリア簡易メニューの下側余白、⑭ 連絡先エリア簡易メニューの端余白(50%以下:位置が中央の場合は無効)

⑮ 連絡先エリアSNS表記の表示 ※ 通常画面で表示されている場合に有効です。

⑯ 連絡先エリアSNS表記の位置、⑰ 連絡先エリアSNS表記の表示方法(無効の場合は左右余白無し)

⑱ 連絡先エリアSNS表記の上側余白、⑲ 連絡先エリアSNS表記の下側余白、⑳ 連絡先エリアSNS表記の端余白(50%以下:位置が中央の場合は無効)

検索エリアのレスポンシブデザイン設定

responsive_header7
responsive_header8

検索エリアのレスポンシブデザイン設定です。項目を入力して”レスポンシブデザイン『ヘッダー』設定更新”をクリックすると設定が確定します。

① 検索エリアの表示 ※ 通常画面で表示されている場合に有効です。

② 検索エリア検索ボックスの表示 ※ 通常画面で表示されている場合に有効です。、③ 検索エリア検索ボックスの幅

④ 検索エリア検索ボックスの位置、⑤ 検索エリア検索ボックスの表示方法(無効の場合は左右余白無し)

⑥ 検索エリア検索ボックスの上側余白、⑦ 検索エリア検索ボックスの下側余白、⑧ 検索エリア検索ボックスの端余白(50%以下:位置が中央の場合は無効)

⑨ 検索エリア簡易メニューの表示 ※ 通常画面で表示されている場合に有効です。

⑩ 検索エリア簡易メニューの位置、⑪ 検索エリア簡易メニューの表示方法(無効の場合は左右余白無し)

⑫ 検索エリア簡易メニューの上側余白、⑬ 検索エリア簡易メニューの下側余白、⑭ 検索エリア簡易メニューの端余白(50%以下:位置が中央の場合は無効)

⑮ 検索エリアSNS表記の表示 ※ 通常画面で表示されている場合に有効です。

⑯ 検索エリアSNS表記の位置、⑰ 検索エリアSNS表記の表示方法(無効の場合は左右余白無し)

⑱ 検索エリアSNS表記の上側余白、⑲ 検索エリアSNS表記の下側余白、⑳ 検索エリアSNS表記の端余白(50%以下:位置が中央の場合は無効)

グローバルメニュー

グローバルメニューのレスポンシブデザイン設定

responsive_gm1
responsive_gm2

グローバルメニューのレスポンシブデザイン設定です。項目を入力して”レスポンシブデザイン『グローバルメニュー』設定更新”をクリックすると設定が確定します。

① グローバルメニューの表示 ※ 通常画面で表示されている場合に有効です。

② グローバルナビの上側余白(縦型、横型両方に有効)、③ グローバルナビの下側余白(縦型、横型両方に有効)

上図は横型(パソコン用横型の設定を流用)の説明です。

④ 横型グローバルナビの表示方法(無効の場合は左右余白無し)

⑤ 横型グローバルナビテキストのサイズ比(パソコン用横型のテキストサイズに対しての比率)

⑥ 横型グローバルナビメニュー全体高さのサイズ比(パソコン用横型のメニュー全体高さに対しての比率)

⑦ 縦型グローバルメニュー(無効の場合はパソコン用横型の設定を流用します)※ 通常画面で表示されている場合に有効です。

縦型グローバルメニュー(メニューボックス)設定

responsive_gm3
responsive_gm4

縦型グローバルメニュー(メニューボックス)設定です。項目を入力して”レスポンシブデザイン『グローバルメニュー』設定更新”をクリックすると設定が確定します。

① メニューボックス文字

② メニューボックス文字の色③ メニューボックス(背景)の色

④ メニューボックス文字のサイズ、⑤ メニューボックス文字の太さ

⑥ メニューボックスの表示方法(無効の場合は左右余白無し)、⑦ メニューボックス文字の位置

⑧ メニューボックス文字の端余白(50%以下:位置が中央の場合は無効)、⑨ メニューボックスボックスの高さ(文字の上下にpadding加算されます)

⑩ メニューボックス文字のHOVER(マウスポインターが上に来た時の)色⑪ メニューボックス(背景)のHOVER(マウスポインターが上に来た時の)色

縦型グローバルメニュー(メインメニュー・サブメニュー)設定

responsive_gm5
responsive_gm6

縦型グローバルメニュー(メインメニュー・サブメニュー)設定です。項目を入力して”レスポンシブデザイン『グローバルメニュー』設定更新”をクリックすると設定が確定します。

① メインメニューの高さ(文字の上下にpadding加算されます)、② メインメニューテキストの前に付けるマーカー

③ メインメニュー幅(メニューボックスに対するメインメニューバーの比率)

④ メインメニューテキストサイズ、⑤ メインメニューテキストの太さ

⑥ メインメニューテキストの色⑦ メインメニューテキストのマウスオーバー時の色

⑧ メインメニューテキストの背景色⑨ メインメニューテキストのマウスオーバー時の背景色

⑩ メインメニューテキストの位置、⑪ メインメニューテキストの端余白(50%以下:位置が中央の場合は無効)

⑫ サブメニューの高さ(文字の上下にpadding加算されます)、⑬ サブメニューテキストの前に付けるマーカー

⑭ サブメニュー幅(メインメニューバーに対するサブメニューバーの比率)

⑮ サブメニューテキストサイズ、⑯ サブメニューテキストの太さ

⑰ サブメニューテキストの色⑱ サブメニューテキストのマウスオーバー時の色

⑲ サブメニューテキストの背景色⑳ サブメニューテキストのマウスオーバー時の背景色

㉑ サブメニューテキストの位置、㉒ サブメニューテキストの端余白(50%以下:位置が中央の場合は無効)

ヘッダー画像

ヘッダー画像のレスポンシブデザイン設定

responsive_hdimg1
responsive_hdimg2

ヘッダー画像のレスポンシブデザイン設定です。項目を入力して”レスポンシブデザイン『ヘッダー画像』設定更新”をクリックすると設定が確定します。

① ヘッダー画像の表示 ※ 通常画面で表示されている場合に有効です。

② ヘッダー画像の表示方法(無効の場合は左右余白無し)、③ ヘッダー画像の上側余白、④ ヘッダー画像の下側余白

⑤ ヘッダー画像テキストの表示(WordPress標準ヘッダー画像にのみ有効です)※ 通常画面で表示されている場合に有効です。

⑥ ヘッダー画像テキストサイズ、⑦ ヘッダー画像テキストの太さ

⑧ ヘッダー画像テキストの位置調整(横方向)、⑨ ヘッダー画像テキストの位置調整(縦方向)

メイン(トップ)

メイン(トップ)コンテンツのレスポンシブデザイン設定

responsive_main1
responsive_main2

メイン(トップ)コンテンツのレスポンシブデザイン設定です。項目を入力して”レスポンシブデザイン『メイン(トップ)』設定更新”をクリックすると設定が確定します。

① トップキャッチエリアの表示方法:チェックを入れるとレスポンシブデザイン時に縦に独立表示をします。その際の画像幅は右欄に設定します。※ 端末表示幅に対する比率です。非表示は0を入力します。

② 画像と説明付きメニューAの表示方法:チェックを入れるとレスポンシブデザイン時に縦に独立表示をします。その際の画像幅は右欄に設定します。※ 端末表示幅に対する比率です。非表示はカスタム投稿編集ページで設定します。

③ 画像と説明付きメニューBの表示方法:チェックを入れるとレスポンシブデザイン時に縦に独立表示をします。その際の画像幅は右欄に設定します。※ 端末表示幅に対する比率です。非表示はカスタム投稿編集ページで設定します。

④ トップページ最新投稿ダイジェスト定位置表示:チェックを入れるとレスポンシブデザイン時に表示します。※ 通常画面で表示されている場合に有効です。

⑤ トップページ各種投稿ダイジェスト定位置一括表示:チェックを入れるとレスポンシブデザイン時に表示します。※ 通常画面で表示されている場合に有効です。

⑥ トップページウィジェットエリアの表示:チェックを入れるとレスポンシブデザイン時に表示します。※ 通常画面で表示されている場合に有効です。

⑦ トップページコンテンツ間隔 ※ レスポンシブデザイン時のトップページのメインコンテンツ内で使用されるクラス”fixed-space”の値になります。

⑧ メインコンテンツ間隔 ※ レスポンシブデザイン時のトップページ以外のメインコンテンツ内で使用されるクラス”fixed-space”の値になります。

responsive_main3
responsive_main3-3
responsive_main3-2

⑨ メインコンテンツのレスポンシブデザイン共通フォントサイズ(メインコンテンツ内の一般フォントに適応されます)

⑩ パンくずナビのフォントサイズ(メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率)

○ h2タイトル(ヘッドライン)

⑪ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑫ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ h3タイトル(ヘッドライン)

⑬ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑭ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ h4タイトル(ヘッドライン)

⑮ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑯ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ h5タイトル(ヘッドライン)

⑰ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑱ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ 装飾1

⑲ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑳ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ 装飾2

㉑ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

㉒ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ 装飾3

㉓ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

㉔ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ 装飾4

㉕ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

㉖ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

名称未設定-5.fw

㉗ メインコンテンツの上側余白

㉘ メインコンテンツの下側余白

㉙ コンテンツエリアの上下枠幅(上下に同じ幅ののりしろが出来る)

㉚ トップページウィジェットエリアのセンタリング(センタリングできないウィジェットもあります)

※ h2~h5レスポンシブデザイン専用設定と修飾1~修飾4レスポンシブデザイン専用設定の使い方はPCデザインのh2~h5タイトルと全く同様です。詳細設定は以下のリンク先をご覧ください。

詳細設定 → h2~h5タイトル設定

(サブ)サイドバー

(サブ)サイドバーのレスポンシブデザイン設定

responsive_side1
responsive_side1-2
responsive_side1-1
responsive_side2

(サブ)サイドバーのレスポンシブデザイン設定です。サイドバーとサブサイドバーはプラグイン『ハイエンド』による機能制限以外は同じ動作のためまとめて説明します。項目を入力して”レスポンシブデザイン『(サブ)サイドバー』設定更新”をクリックすると設定が確定します。

① (サブ)サイドバー最新投稿ダイジェスト定位置表示 ※ 通常画面で表示されている場合に有効です。

② サイドバー各種投稿ダイジェスト定位置一括表示 ※ 通常画面で表示されている場合に有効です。

② サブサイドバー各種投稿ダイジェスト定位置一括表示 ※ 通常画面で表示されている場合に有効です。

③ (サブ)サイドバーウィジェットエリアの表示 ※ 通常画面で表示されている場合に有効です。

④ (サブ)サイドバーコンテンツ間隔 ※ レスポンシブデザイン時の(サブ)サイドバーコンテンツ内で使用されるクラス”fixed-space”の値になります。

⑤ (サブ)サイドバーのレスポンシブデザイン共通フォントサイズ(サイドバー内の一般フォントに適応されます)

○ h2タイトル(ヘッドライン)

⑥ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑦ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ h3タイトル(ヘッドライン)

⑧ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑨ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ h4タイトル(ヘッドライン)

⑩ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑪ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ h5タイトル(ヘッドライン)

⑫ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑬ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ 装飾1(サイドバーのみ)

⑭ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑮ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ 装飾2(サイドバーのみ)

⑯ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑰ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ 装飾3(サイドバーのみ)

⑱ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑲ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ 装飾4(サイドバーのみ)

⑳ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

㉑ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

㉒ (サブ)サイドバーの上側余白、㉓ (サブ)サイドバーの下側余白、㉔ (サブ)サイドバーの上下枠幅(上下に同じ幅ののりしろが出来る)

㉕ (サブ)サイドバーウィジェットエリアのセンタリング(センタリングできないウィジェットもあります)

㉖ (サブ)サイドバー上側(アディショナルモード時は下側)に区切り線を表示する、㉗ 区切り線の太さ

㉘ 区切り線の種類、㉙ 区切り線の色

※ h2~h5レスポンシブデザイン専用設定と修飾1~修飾4レスポンシブデザイン専用設定の使い方はPCデザインのh2~h5タイトルと全く同様です。詳細設定は以下のリンク先をご覧ください。

詳細設定 → h2~h5タイトル設定

フッターのレスポンシブデザイン設定

responsive_footer1
responsive_footer1-2
responsive_footer1-1

フッターのレスポンシブデザイン設定です。項目を入力して”レスポンシブデザイン『フッター』設定更新”をクリックすると設定が確定します。

① フッターブロック1の表示 ※ 通常画面で表示されている場合に有効です、② フッターブロック2の表示 ※ 通常画面で表示されている場合に有効です。

③ フッター画像の表示:チェックを入れるとレスポンシブデザイン時に表示をします。その際の画像幅は右欄に設定します。※ 端末表示幅に対する比率です。通常画面で表示されている場合に有効です。

④ サブフッター画像の表示:チェックを入れるとレスポンシブデザイン時に表示をします。その際の画像幅は右欄に設定します。※ 端末表示幅に対する比率です。通常画面で表示されている場合に有効です。

⑤ フッターフリーテキストの表示:チェックを入れるとレスポンシブデザイン時に表示をします。その際の枠幅は右欄に設定します。※ 端末表示幅に対する比率です。通常画面で表示されている場合に有効です。

⑥ フッターメニューの表示:チェックを入れるとレスポンシブデザイン時に表示をします。その際の枠幅は右欄に設定します。※ 端末表示幅に対する比率です。通常画面で表示されている場合に有効です。

⑦ フッターウィジェットの表示:チェックを入れるとレスポンシブデザイン時に表示をします。※ 通常画面で表示されている場合に有効です。

⑧ フッターコンテンツ間隔 ※ レスポンシブデザイン時のフッターコンテンツ内で使用されるクラス”fixed-space”の値になります。

⑨ フッターのレスポンシブデザイン共通フォントサイズ(フッター内の一般フォントに適応されます)

○ h2タイトル(ヘッドライン)

⑩ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑪ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ h3タイトル(ヘッドライン)

⑫ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑬ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ h4タイトル(ヘッドライン)

⑭ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑮ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

○ h5タイトル(ヘッドライン)

⑯ PCデザイン流用 or レスポンシブデザイン専用:チェックを入れた場合はレスポンシブデザイン専用設定が有効になります。

⑰ PCデザイン流用時のフォントサイズ:メインコンテンツレスポンシブデザイン共通フォントサイズに対する比率です。

responsive_footer2

⑱ コンテンツフレームとフッターとの間隔(コンテンツフレーム:メイン・サイドバー・サブサイドバー)

⑲ フッターブロック1上部余白(ピクセル)

⑳ フッターブロック2上部余白(ピクセル)

㉑ フッターウィジェットエリアのセンタリング(センタリングできないウィジェットもあります)

㉒ コピーライト上部余白

㉓ コピーライト下部余白

㉔ コピーライトの上下枠幅 (上下に同じ幅ののりしろが出来る)

※ h2~h5レスポンシブデザイン専用設定の使い方はPCデザインのh2~h5タイトルと全く同様です。詳細設定は以下のリンク先をご覧ください。

詳細設定 → h2~h5タイトル設定

ダイジェスト・一覧

トップページのダイジェスト

responsive_digest1
responsive_digest2

トップページのダイジェストに関する設定です。項目を入力して”レスポンシブデザイン『ダイジェスト・一覧』設定更新”をクリックすると設定が確定します。

○ トップページ最新投稿ダイジェスト

① 記事列数を1列にする、② 抜粋コンテンツを非表示にする

③ コンテンツグループ画像のサイズ

④ コンテンツグループ抜粋枠の最小高さ(コンテンツグループ画像とサイズバランスを取るため)

○ トップページ各種投稿ダイジェスト

⑤ 記事列数を1列にする、⑥ 抜粋コンテンツを非表示にする

⑦ コンテンツグループ画像のサイズ

⑧ コンテンツグループ抜粋枠の最小高さ(コンテンツグループ画像とサイズバランスを取るため)

(サブ)サイドバーのダイジェスト

responsive_digest3
responsive_digest4

(サブ)サイドバーのダイジェストに関する設定です。サイドバーとサブサイドバーはプラグイン『ハイエンド』による機能制限以外は同じ動作のためまとめて説明します。項目を入力して”レスポンシブデザイン『ダイジェスト・一覧』設定更新”をクリックすると設定が確定します。

○ (サブ)サイドバー最新投稿ダイジェスト

① 記事列数を1列にする、② 抜粋コンテンツを非表示にする

③ コンテンツグループ画像のサイズ

④ コンテンツグループ抜粋枠の最小高さ(コンテンツグループ画像とサイズバランスを取るため)

○ サイドバー各種投稿ダイジェスト

○ サブサイドバー各種投稿ダイジェスト

⑤ 記事列数を1列にする、⑥ 抜粋コンテンツを非表示にする

⑦ コンテンツグループ画像のサイズ

⑧ コンテンツグループ抜粋枠の最小高さ(コンテンツグループ画像とサイズバランスを取るため)

一覧(アーカイブ)

responsive_digest5
responsive_digest6

一覧(アーカイブ)に関する設定です。項目を入力して”レスポンシブデザイン『ダイジェスト・一覧』設定更新”をクリックすると設定が確定します。

① 記事列数を1列にする、② 抜粋コンテンツを非表示にする

③ コンテンツグループ画像のサイズ

④ コンテンツグループ抜粋枠の最小高さ(コンテンツグループ画像とサイズバランスを取るため)

フリーCSS

レスポンシブデザインフリーCSS

responsive_freecss1
responsive_freecss2

レスポンシブデザインフリーCSSに関する設定です。項目を入力して”レスポンシブデザイン『フリーCSS』設定更新”をクリックすると設定が確定します。

① レスポンシブデザインフリーCSS機能を有効にする:チェックを入れるとCSS記述が有効になります。※ 記入したコードに不具合がある場合は無効にして下さい。

② レスポンシブデザインフリーCSSコード:ここにレスポンシブデザイン用のCSSを書きます。

  • LINEで送る


ta_thm001_downloadta_designing