リンクボタン機能の使い方

リンクなどをボタンっぽくするデザインに変更するWraptas独自機能の利用方法の紹介です。
 
今までは下記の記事のようにCSSを挿入することで実装していたボタン型のリンクですが、CSS編集無しで挿入できるようになったので、利用方法を紹介します。
 

利用方法

  1. Wraptas管理画面で利用したいサイトの「サイトデザイン編集」→コンテンツエリアの「リンクボタン機能をON」にするへチェックを入れて保存します。(新規に制作したサイトはデフォルトでONになっていります。)
  1. Notion上の記事では通常のテキストブロックで、 [] でくくったURLリンク(ページリンクでも動作します)がボタンに自動で変換されるようになります。
  1. ボタンの色はNotionのそのブロックの背景色と連動し、それぞれの色に変換されます。色なしの場合白で黒フチのボタンになります。下記がそれぞれの背景色のボタンになります。
 
 
以下がNotion自体のリンクになります。こちらをコピーしても利用できます。

注意点

上手く動作しない場合には以下の項目を順番にチェックしてください。
  1. 管理画面側で「リンクボタン機能をON」チェックを入れて保存している
  1. リンクボタンブロックは他のテキストなどを配置しないでください。また、背景色以外に文字装飾なども解除してください。
  1. リンクURLが httpで始まる、もしくはWraptas内で展開可能なページリンクになっていることを確認してください。
  1. 背景色を利用する場合には、文字装飾などは一切なくし、”ボタンのブロック全体”に背景色を設定していることを確認してください。