cover image

Wraptasの使い方 / はじめての方へ

1. アカウント登録

Google アカウントかメールアドレスでの登録が選べます。
メールアドレスログインの場合にはメールアドレスの確認が必要です。登録後にメールアドレスへ確認メールが届くので、それを開封後&確認URLへアクセス後に再度サイトへアクセスし登録メールアドレスでログインしてください。
 

2. 決済情報の登録

Stripeを使って決済情報を登録することでサービスを利用できます。Stripeでの決済登録画面に遷移するので、クレジットカードかGooglePay等の決済情報の登録をお願いします。
登録後トライアル期間の30日が終了したタイミングから月額利用料が開始します。(その際のStripeからメールでのお知らせは来ますが、Wraptasからのお知らせはございませんのでご自身でリマインドをお願いします。)
 

3. サイト作成

決済情報を登録したらサイト作成が行えます。
複数サイトの登録が行いたい場合は以下の記事をご参考ください。
 

3.1 サイトID登録

登録時にはサイトのIDを決めて下さい。これは後から変更できません。入力後利用可能かどうかチェクして問題なければ登録可能です。
IDが blog の場合 blog.wraptas.site というドメインが割り当てられます。
1サイトに適用できるのは1ID、1独自ドメインになります。

3.2 トップページへ表示するNotionページの登録

TOPページに表示するNotionのURLを入力してください。
URLはNotionで作成した記事右上のShare(スマホアプリの場合は右上メニュー)を押して「Share to the web」をONにして発行できるURLになります。
上記のようなURLをそのまま入力してください。
notion image
記事は公開状態でなければWraptas上でも表示出来ないのでご注意ください。
登録が完了すると、設定したID.wraptas.site というURLでアクセスができるようになります。
404ページの場合上記URLが間違っているか、公開設定になっていない可能性があります。確認してどちらも問題ないのに404ページになってしまっている場合にはお問い合わせください。
 

3.3 サイト名設定

ヘッダーへパンくずリストも画像も設定しない場合にヘッダーに表示されるサイト名が入ります。また、シェアボタンを設定した場合のサイト名等にも利用されます。
 

以上でサイトを作成しての最低限の設定はここまでです、続けて見た目をカスタマイズするなどの追加の機能の説明に入ります。
 

4. サイトデータ編集

サイトが作成できるとダッシュボードにサイト一覧が表示されるようになると思います。
そこから「データ編集」ボタンを押すとサイトの設定が追加出来ます。
 

4.1 Google Analytics設定

自サイトにGoogle Analyticsを埋め込む事ができます。Google Analyticsで発行したトラッキングIDを入力してください。
notion image
 

4.2 独自ドメイン設定

ご自身のドメインのDNS設定へそちらのデータを設定後、フォームへ設定したドメインを送信してください。

4.3 パーマリンク設定

設定したパーマリンクにアクセスされた際に表示する記事を指定できます。
設定したIDのページにアクセスがあった場合には設定したパーマリンクへリダイレクトします。
 
例)
このマニュアルページのNotionページのURLはこちらで、
このページはWraptasで設定したページ上では以下のURLでの表示になります
これに、パーマリンクとして
manual
を設定することで
というURLでアクセスできるようになります(元のURLでアクセスするとこのURLでリダイレクトされます)
 

4.4 HTML直接追記

head内とbody内それぞれで、htmlを直接挿入できます。
Google Tag Managerなどにご利用ください。
 

5. デザイン編集

ダッシュボードで「データ編集」ボタンを押すとサイトのデザインに関する設定が追加出来ます。
 

5.1 サイトアイコン設定

サイトのFaviconや、ホーム画面に追加する際に利用されるアイコンを設定出来ます。
推奨サイズは横150px、縦150px

5.2 ヘッダー設定

5.2.1 パンくずリストの代わりにヘッダーへロゴ画像を表示する

こちらをチェックするとパンくずリストの代わりにヘッダーへロゴ画像を表示します(WraptasのサイトではONにしています。)

5.2.2 ロゴ画像

ヘッダーでサイト名の代わりに表示される画像です。 こちらを設定すると5.1で設定した名称は表示されませんがサイト名としてSNSシェア時などに利用されます。
画像を直接アップロードしてください。推奨サイズは横400px,縦50pxです。

5.2.3 ヘッダー上のサイト名の遷移先URL

ヘッダーへパンくずリストを表示しない場合のサイト名・サイトロゴをクリックした際に遷移するサイトのURLを設定出来ます。
設定がなければサイトトップへ遷移します。

5.3 ヘッダー右側へのリンク追加

Wraptasのサービスページのヘッダーにあるように、リンクを並べて表示できます。
スマートフォンなどの画面サイズが小さい場合には自動でハンバーガーメニューになり、押すとメニュー一覧として表示されます。

5.4 フッター設定

全ページの下部にフッターとして表示する記事を設定できます。TOPページへ設定したものと同じ用に公開設定にしたNotionページのURLを入力してください。

5.5 コンテンツエリア

ヘッダー以外の部分にパンくずリストを表示できます
  • タイトル上部にパンくずリストを表示する
  • コンテンツ下部にパンくずリストを表示する
また、パンくずリストのトップのタイトルを変更する場合のテキストを変更する場合にはこちらで設定します。

5.6 見出しに合わせてセクションを分ける区切る見出しの指定

見出しに合わせてセクションを分けるWraptasの独自機能を利用できます。

5.7 ダークモードの設定

ダークモードのカラーで表示します。
notion image

5.7 SNSシェアボタンの表示

Twitterボタンを記事下に配置するかどうかを設定出来ます。
notion image
 

5.8 追加CSS編集

直接追加するCSSを編集出来ます。ライブプレビューや、クラス名一覧機能は準備中です。
こちらはサンプルとしてCSSファイルですが、内容をコピーして入力していただければ同じように適用されます。ご自由にお使いください。
また、そのまま使いたい場合には次の追加CSS欄に直接入力して頂いても大丈夫です。
 
サンプルCSS集2021/3/19 17:052021/9/17 1:11
 

5.9 追加CSS URL指定

ここで追加したURLを直接サイトで参照させられます。こちらでGoogle Fontsなどを指定し、5.5 CSS編集でフォントを指定して利用することが出来ます。

困ったときには

困ったときのサポートはDiscordで質問するか、メールでお気軽にお問い合わせください!
疑問・質問・ご要望、何でも大歓迎です!一緒により良いサービスにしてければと思っております!