Wraptasのコピペで使えるサンプル集/リンクボタン機能の使い方
セクション
セクション
Wraptasのコピペで使えるサンプル集/リンクボタン機能の使い方

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

2022/7/5 15:102023/12/4 14:40
リンクなどをボタンっぽくするデザインに変更するWraptas独自機能の利用方法の紹介です。
 
今までは下記の記事のようにCSSを挿入することで実装していたボタン型のリンクですが、CSS編集無しで挿入できるようになったので、利用方法を紹介します。
Linkをボタンっぽくするデザイン
Notionコンテンツ自体は通常のリンクに設定していただいて、Block IDを指定してCSSを当てていきます。 ソーシャルアイコン自体は Fork Awesome というプロジェクトを利用します。 そのため下準備として、管理画面のデータ編集から次のコードを追加してアイコンを利用出来る状態にしてください。 ...
https://demo.wraptas.site/link_button
 

利用方法

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

注意点

上手く動作しない場合には以下の項目を順番にチェックしてください。
  1. 管理画面側で「リンクボタン機能をON」チェックを入れて保存している
  1. リンクボタンブロックは他のテキストなどを配置しないでください。また、背景色以外に文字装飾なども解除してください。
  1. リンクURLが httpで始まる、もしくはWraptas内で展開可能なページリンクになっていることを確認してください。
  1. 背景色を利用する場合には、文字装飾などは一切なくし、”ボタンのブロック全体”に背景色を設定していることを確認してください。
 
Xでポスト
もし指定方法・カスタマイズ方法がよくわからない場合には気軽に運営にお問い合わせください!
wraptas.com
https://wraptas.com/help
こちらにお問い合わせ先を記載しています。
今後もWraptasをよろしくお願いします。

Wraptas本体へ戻る
 
Peraichi Inc.