テーマオプション スライディングバー

Sliding Bar

ホーム/Theme Options/Sliding Bar/テーマオプション スライディングバー
  • テーマオプション スライディングバー
画像はクリックすることでLightbox内に大きく表示することができます。

このコンテンツでは、【テーマオプション スライディングバー】全12のオプションについて解説をしています。

スライディングバー デモ

スライディングバーは、ページ右上にある『+』と『-』の開閉ボタンでコンテンツを表示させることができる機能です。表示するコンテンツは、サイドバーやフッター同様に、ウィジェットから作成することができます。

ウィジェットエリアを拡大したい時などに利用するといいでしょう。

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

1.Sliding Bar on Desktops / デスクトップ

このオプションを有効にすると、デスクトップ表示時にスライディングバーを表示します。

ここでいうデスクトップとは、テーマオプション → 『Responsive(レスポンシブ)』 → 『Header Responsive Breakpoint(ヘッダーのブレイクポイント)』で決めた値より画面が広いデバイスのことを指します。

また、このオプションを有効にすると、スライディングバーのスタイリングなど様々なオプションが表示されます。

2.Sliding Bar On Mobile / モバイル

このオプションを有効にすると、モバイル上でスライディングバーを表示します。

ここでいうモバイルとは、テーマオプション → 『Responsive(レスポンシブ)』 → 『Header Responsive Breakpoint(ヘッダーのブレイクポイント)』で決めた値より画面が狭いデバイスのことを指します。

3.Sliding Bar Open On Page Load / ページを読み込み時の表示

このオプションを有効にすると、ページにアクセスした時に、スライディングバーのコンテンツを最初から表示します。

4.Number of Sliding Bar Columns / カラム数

スライディングバー カラム数

このオプションは、スライディングバーコンテンツのカラム数を1~6の中から選択します。

冒頭でも触れた通り、スライディングバーの各コンテンツはウィジェットとして作成しますので、このオプションで設定したカラム数が、WordPressの外観 → ウィジェットに表示されます。

画像では、3カラムを設定しているので、ウィジェットに【Sliding Bar Widget】が3つ表示されています。

5.Sliding Bar Background Color / 背景色

スライディングバー 背景色

このオプションは、スライディングバーの背景色を設定します。

画像は、少し透けるようにrgba(54,56,57,0.95)で設定しています。

6.Sliding Bar Item Divider Color / 区切りカラー

スライディングバー 区切りカラー

このオプションは、固定ページなどを表示する際の項目毎の区切りカラーを設定します。

画像は、#03a9f4で設定しています。

7.Sliding Bar Toggle Icon Color / トグルアイコンカラー

スライディングバー トグルアイコンカラー

このオプションは、スライディングバーの開閉トグルの『+』と『-』アイコンカラーを設定します。

スライディングバーが開いている時は『-』アイコン、閉じている時は『+』アイコンが表示されます。

8.Sliding Bar Heading Font Size / 見出しのフォントサイズ

スライディングバー 見出しのフォントサイズ

このオプションは、スライディングバーに表示するコンテンツの見出しのフォントサイズを設定します。

画像は、25pxで設定しています。

9.Sliding Bar Headings Color / 見出しのフォントカラー

スライディングバー 見出しのフォントカラー

このオプションは、スライディングバーに表示するコンテンツの見出しのフォントカラーを設定します。

画像は、#ffffffで設定しています。

10.Sliding Bar Font Color / 本文のフォントカラー

スライディングバー 本文のフォントカラー

このオプションは、スライディングバーに表示するコンテンツの本文のフォントカラーを設定します。

画像は、#8bc34aで設定しています。

11.Sliding Bar Link Color / リンクカラー

スライディングバー リンクカラー

このオプションは、スライディングバーに表示するコンテンツのリンクカラーを設定します。

画像は、#ffeb3bで設定しています。

12.Top Border on Sliding Bar / トップボーダー

スライディングバー ボーダートップの表示

このオプションを有効にすると、スライディングバーを閉じている時にページ上部にボーダーを表示し、スライディングバーの存在が若干わかりやすくなります。トップボーダーという名前ですが、CSSの『border-bottom』が3px加わります。

画像はデフォルトの状態とCSSでボーダーの値を太くしたもの(10px)を、それぞれオン・オフで比較しているものとなります。

コメントする