【Volar2】その他の機能-SIRIUS2

【Volar2】その他の機能

忘れられがちな【Volar2】の機能を挙げて行きます。

縦書きモード

和風旅館などのウェブサイトでよく見かける縦書きテキスト

これ、意外と大変なんです。

 

この仕様を【Volar2】にも搭載しました。

和風サイトだけでなく、ページ内でちょっと雰囲気を変えたい時なんかにも使えます。

 

こちらで用意した2つのモジュールで囲んだエリア内が縦書きで表示されます。

英字や数字などの扱い(縦書き or 横書きのまま)も選択できます。

サイト管理人

筆者

 

縦書きテキストはPC表示時のみ有効で、画面幅が狭くなるモバイル機器では横書き&中央揃えでの表示に変わります。

※実際の表示例はこちらをご覧ください。

 

パーツ<ランキング>でアフィリエイトタグ入力

ランキング表示のボタンリンク「公式サイトはこちら」は、パーツ<ランキング>の『リンクページ』という項目に入力したリンクURLがセットされます。

 

しかしながら『リンクページ』にはリンクURLは記入できても、ウェブビーコン付きアフィリエイトリンクタグ(※ASP発行のアフィリエイトリンク用コード)は入力できません

 

入力してもリンクURLのみの出力になってしまいウェブビーコンは自動的に省かれてしまいます。

そのまま利用すると一般的には禁止されてる”アフィリエイトリンクの改変”に該当する可能性も出てきます。

 

そこで【Volar2】では、ウェブビーコン付きアフィリエイトリンクタグをそのまま出力できるコードを別途用意しました。

 

<ランキング>用HTMLコードの一ヵ所をこちらで用意したコードで差し替えるだけで機能します。

 

 

CTAレイアウトデザイン

SIRIUS2標準のCTAはPCでは画像エリアとテキストエリアが左右に分かれるデザインです。

(スマホでは縦1列表示)

 

キャプチャ画像

 

これが場合によっては使いにくいケースもあるので【Volar2】独自のレイアウトもご用意しました。

専用のスタイルを有効化すると下のようなレイアウトデザインでの表示に変わります

 

キャプチャ画像

 

 

タブコンテンツにボーダー

SIRIUS2標準のタブコンテンツは「デザイン1」を除いてはボーダーが表示されません

 

キャプチャ画像

 

しかしながらこのデザインだとタブの中身がどこまでなのかがちょっとわかりにくいです。

 

そこで【Volar2】では「デザイン1」を除くタブコンテンツにボーダーが付くスタイルを別途ご用意しました。

専用のスタイルを有効化すると下のようなレイアウトデザインでの表示に変わります。

 

キャプチャ画像

 

 

フローチャートのレイアウトデザイン

SIRIUS2標準のフローチャートはチャート数によってはPCやスマホで見づらくなることがあります。

 

※デザイン3のケース

キャプチャ画像

 

キャプチャ画像

 

そこで【Volar2】では「デザイン3」をカスタマイズしてチャート数に関係なくPCでもスマホでも見やすい「デザイン”4”」用のスタイルをご用意しました。

専用のスタイルを有効化すると下のようなレイアウトデザインでの表示に変わります。

 

キャプチャ画像

 

キャプチャ画像

 

 

リンクカードのレイアウトデザイン

SIRIUS2標準のリンクカードPCでは(Twitterのように)サムネイル画像が途中で切れるデザインで、スマホではサムネイル画像がエリアの半分を占領してるためテキストの内容がわかりにくいレイアウトになってます。

 

キャプチャ画像

 

そこで【Volar2】ではPCではサムネイル画像を全幅表示に変更し、スマホではレイアウトそのものを変更したスタイルをご用意しました。

専用のスタイルを有効化すると下のようなレイアウトデザインでの表示に変わります。

 

キャプチャ画像

 

コメントフォーム(β版)

    ※コメントはこちらからどうぞ

    このフォームを作成するにあたって参考にしたサイト情報はこちらに載せてます