サイドボタン-Volar2

サイドボタン-Volar2

SIRIUS2テンプレート【Volar2】ではブラウザ右端に常駐可能なミニリンクボタン機能を搭載してます。
 

アイキャッチ画像

当サイトで使用しているキャプチャ画像は(【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。

 

【Volar2】にはブラウザの右端に常時表示可能な《サイドボタン》機能を搭載してます。

こちらが通常版です。

(当サイトがデモになります)

 

キャプチャ画像

 

機能追加

縦書き&ボタン2個の縦書き(版)も追加しました。

 

キャプチャ画像

※”サイドボタン(縦書き)”が加わったことで、これまでの『サイドボタン』は『サイドボタン(通常版)』と表記します。


概要

この機能はデフォルトでは無効化されてます。

通常版はPCのみでの表示、縦書き版はPC&モバイルでも表示できます。

 

<サイドボタン(通常版)>の特長としては、

  • 嫌みのない程度(?)に透過させてます。
  • 幅もウザがられない程度(?)に抑えてます。(Max 70px)
  • 日本語で4文字が最大。それ以上は改行されます。
  • テキストの上のアイコンはicomoon(読み方わからず)なども使えますし、当サイトのようにSIRIUS2に標準搭載のアイコンや画像なども利用できます。(※アイコンや画像無しでもOK)
  • 作成・修正はモジュール内のリストにアイコンやテキストを記入するだけ。
  • 通常版の代替機能としてスマホ等ではスマホ固定フッターメニューのご利用をおすすめします。
  • 理論上は無制限に増やせますが実質的には最大5個程度が限界かと。

 

<サイドボタン(縦書き)>の特長としては、

  • 通常版の縦書き版。ただしスマホでは横書き表示(最下段)。
  • ボタンは2個で固定。デザインも固定。テキストの量によって高さの変更は可。

使い方(通常版&縦書き)

有効化のやり方

《サイドボタン(通常版)》を利用するにはモジュール①『【Volar2】サイドボタン[通常版](本体)』の[有効]のチェックをONにします。

(※デフォルトでONになってます)

 

続いてサイドボタンを表示したいページ②③④[有効]のチェックをONにします。

たとえばトップページとエントリーぺージのみに表示するなら①②④の[有効]のチェックをONにするといった具合です。

 

キャプチャ画像

 

《サイドボタン[縦書き]》>を利用するにはモジュール⑤『【Volar2】サイドボタン[縦書き](本体)』の[有効]のチェックをONにします。

(※デフォルトでONになってます)

 

続いてサイドボタンを表示したいページ⑥⑦⑧[有効]のチェックをONにします。

《サイドボタン[通常版]》と《サイドボタン[縦書き]》の同時利用はできません

 

登録のやり方(通常版)

《サイドボタン[通常版]》を利用する場合は『【Volar2】サイドボタン[通常版](本体)』をダブルクリックします。

すると下のような入力エリアが表示されます。(※簡略化してます)

 

サンプルにしたがってアイコン画像やオリジナルの画像タグ、テキストを入力していきます。

(画像はSIRIUS2の画像管理からの入力が早くて確実)

 

キャプチャ画像

モジュール上で”表示幅”のみカスタマイズできます。

テキストカラーや背景色は”一応”固定にしてあります。(変更がけっこう面倒なので…)

(SIRIUS2搭載アイコンの簡単な入力方法はマニュアルに記載してます)

 

位置はブラウザ高さの中央で固定です。

 

登録のやり方(縦書き)

《サイドボタン[縦書き]》を利用する場合は『【Volar2】サイドボタン[縦書き](本体)』をダブルクリックします。

すると下のような入力エリアが表示されます。(※簡略化してます)

 

サンプルにしたがって表示したいテキストに差し替えます。

 

キャプチャ画像

モジュール上でテキストカラーや背景色がカスタマイズできます。(PC・スマホ共通)

 

PCでは縦型のボタンはスマホでは横幅に変化します。

そのスマホの横幅(表示幅)は限界があるので高さ(横幅)は固定です。

そのためテキストの量には限りがあります。(最大7文字程度)

 

位置はブラウザ高さの中央で固定です。