Anotionの使い方 / はじめての方へ
1. アカウント登録2. 決済情報の登録3. サイト作成3.1 サイトID登録3.2 トップページへ表示するNotionページの登録3.3 サイト名設定4. サイトデータ編集4.1 Google Analytics設定4.2 独自ドメイン設定4.3 パーマリンク設定4.4 HTML直接追記5. デザイン編集5.1 サイトアイコン設定5.2 ヘッダー設定5.2.1 パンくずリストの代わりにヘッダーへロゴ画像を表示する5.2.2 ロゴ画像5.2.3 ヘッダー上のサイト名の遷移先URL5.3 ヘッダー右側へのリンク追加5.4 フッター設定5.5 コンテンツエリア5.6 見出しに合わせてセクションを分ける区切る見出しの指定5.7 ダークモードの設定5.7 SNSシェアボタンの表示5.8 追加CSS編集5.9 追加CSS URL指定困ったときには
3. サイト作成
決済情報を登録したらサイト作成が行えます。現在は１アカウント１サイトのみ作成可能です（将来的にはアカウントあたりの保有可能サイトを増やしていく予定です）。
3.1 サイトID登録
登録時にはサイトのIDを決めて下さい。これは後から変更できません。入力後利用可能かどうかチェクして問題なければ登録可能です。
IDが blog の場合 blog.anotion.so というドメインが割り当てられます。
3.2 トップページへ表示するNotionページの登録
TOPページに表示するNotionのURLを入力してください。
URLはNotionで作成した記事右上のShare（スマホアプリの場合は右上メニュー）を押して「Share to the web」をONにして発行できるURLになります。
上記のようなURLをそのまま入力してください。
記事は公開状態でなければAnotion上でも表示出来ないのでご注意ください。
登録が完了すると、設定したID.anotion.so というURLでアクセスができるようになります。
404ページの場合上記URLが間違っているか、公開設定になっていない可能性があります。確認してどちらも問題ないのに404ページになってしまっている場合にはお問い合わせください。
3.3 サイト名設定
ヘッダーへ、パンくずリストを設定していない場合にはここにサイト名が入ります。また、シェアボタンを設定した場合のサイト名等にも利用されます。
以上でサイトを作成しての最低限の設定はここまでです、続けて見た目をカスタマイズするなどの追加の機能の説明に入ります。
4. サイトデータ編集
サイトが作成できるとダッシュボードにサイト一覧が表示されるようになると思います。
そこから「データ編集」ボタンを押すとサイトの設定が追加出来ます。
4.1 Google Analytics設定
自サイトにGoogle Analyticsを埋め込む事ができます。Google Analyticsで発行したトラッキングIDを入力してください。
4.2 独自ドメイン設定
ご自身のドメインのDNS設定へそちらのデータを設定後、フォームへ設定したドメインを送信してください。
4.3 パーマリンク設定
設定したパーマリンクにアクセスされた際に表示する記事を指定できます。
設定したIDのページにアクセスがあった場合には設定したパーマリンクへリダイレクトします。
例）
このマニュアルページのNotionページのURLはこちらで、
このページはAnotionで設定したページ上では以下の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 パンくずリストの代わりにヘッダーへロゴ画像を表示する
こちらをチェックするとパンくずリストの代わりにヘッダーへロゴ画像を表示します（AnotionのサイトではONにしています。）
5.2.2 ロゴ画像
ヘッダーでサイト名の代わりに表示される画像です。 こちらを設定すると5.1で設定した名称は表示されませんがサイト名としてSNSシェア時などに利用されます。
画像を直接アップロードしてください。推奨サイズは横400px,縦50pxです。
5.2.3 ヘッダー上のサイト名の遷移先URL
ヘッダーへパンくずリストを表示しない場合のサイト名・サイトロゴをクリックした際に遷移するサイトのURLを設定出来ます。
設定がなければサイトトップへ遷移します。
5.3 ヘッダー右側へのリンク追加
Anotionのサービスページのヘッダーにあるように、リンクを並べて表示できます。
スマートフォンなどの画面サイズが小さい場合には自動でハンバーガーメニューになり、押すとメニュー一覧として表示されます。
5.4 フッター設定
全ページの下部にフッターとして表示する記事を設定できます。TOPページへ設定したものと同じ用に公開設定にしたNotionページのURLを入力してください。
5.5 コンテンツエリア
ヘッダー以外の部分にパンくずリストを表示できます
- タイトル上部にパンくずリストを表示する
- コンテンツ下部にパンくずリストを表示する
また、パンくずリストのトップのタイトルを変更する場合のテキストを変更する場合にはこちらで設定します。
5.6 見出しに合わせてセクションを分ける区切る見出しの指定
見出しに合わせてセクションを分けるAnotionの独自機能を利用できます。
5.7 ダークモードの設定
ダークモードのカラーで表示します。
5.7 SNSシェアボタンの表示
Twitterボタンを記事下に配置するかどうかを設定出来ます。
5.8 追加CSS編集
直接追加するCSSを編集出来ます。ライブプレビューや、クラス名一覧機能は準備中です。
こちらはサンプルとしてCSSファイルですが、内容をコピーして入力していただければ同じように適用されます。ご自由にお使いください。
また、そのまま使いたい場合には次の追加CSS欄に直接入力して頂いても大丈夫です。
5.9 追加CSS URL指定
ここで追加したURLを直接サイトで参照させられます。こちらでGoogle Fontsなどを指定し、5.5 CSS編集でフォントを指定して利用することが出来ます。