当ページのリンクにはプロモーション(広告)が含まれています。
SIRIUS2の機能を紹介するページ内にしか載せてない【Volar2】独自機能をあらためてまとめてみました。
和風旅館などのウェブサイトでよく見かける縦書きテキスト。
これ、意外と大変なんです。
この仕様を【Volar2】にも搭載しました。
和風サイトだけでなく、ページ内でちょっと雰囲気を変えたい時なんかにも使えます。
こちらで用意した2つのモジュールで囲んだエリア内が縦書きで表示されます。
英字や数字などの扱い(縦書き or 横書きのまま)も選択できます。
筆者
縦書きテキストはPC表示時のみ有効で、画面幅が狭くなるモバイル機器では横書き&中央揃えでの表示に変わります。
※実際の表示例はこちらをご覧ください。
ランキング表示のボタンリンク「公式サイトはこちら」は、パーツ<ランキング>の『リンクページ』という項目に入力したリンクURLがセットされます。
しかしながら『リンクページ』にはリンクURLは記入できても、ウェブビーコン付きアフィリエイトリンクタグ(※ASP発行のアフィリエイトリンク用コード)は入力できません。
入力してもリンクURLのみの出力になってしまいウェブビーコンは自動的に省かれてしまいます。
そのまま利用すると一般的には禁止されてる”アフィリエイトリンクの改変”に該当する可能性も出てきます。
そこで【Volar2】では、ウェブビーコン付きアフィリエイトリンクタグをそのまま出力できるコードを別途用意しました。
<ランキング>用HTMLコードの一ヵ所をこちらで用意したコードで差し替えるだけで機能します。
SIRIUS2標準のCTAはPCでは画像エリアとテキストエリアが左右に分かれるデザインです。
(スマホでは縦1列表示)
これが場合によっては使いにくいケースもあるので【Volar2】独自のレイアウトもご用意しました。
専用のスタイルを有効化すると下のようなレイアウトデザインでの表示に変わります
SIRIUS2標準のタブコンテンツは「デザイン1」を除いてはボーダーが表示されません。
しかしながらこのデザインだとタブの中身がどこまでなのかがちょっとわかりにくいです。
そこで【Volar2】では「デザイン1」を除くタブコンテンツにボーダーが付くスタイルを別途ご用意しました。
専用のスタイルを有効化すると下のようなレイアウトデザインでの表示に変わります。
SIRIUS2標準のフローチャートはチャート数によってはPCやスマホで見づらくなることがあります。
※デザイン3のケース
そこで【Volar2】では「デザイン3」をカスタマイズしてチャート数に関係なくPCでもスマホでも見やすい「デザイン”4”」用のスタイルをご用意しました。
専用のスタイルを有効化すると下のようなレイアウトデザインでの表示に変わります。
SIRIUS2標準のリンクカードはPCでは(Twitterのように)サムネイル画像が途中で切れるデザインで、スマホではサムネイル画像がエリアの半分を占領してるためテキストの内容がわかりにくいレイアウトになってます。
そこで【Volar2】ではPCではサムネイル画像を全幅表示に変更し、スマホではレイアウトそのものを変更したスタイルをご用意しました。
専用のスタイルを有効化すると下のようなレイアウトデザインでの表示に変わります。