PotionでNotionをブログ化してみた

更新

Potionとは

• ちょっと安い

• SEOに強い

• 設定が超シンプル

• 割と表示が早い（とはいえNotionベースである以上多少遅い）

• 編集が即反映される（これが決め手）

• 最近、開発者がNFT系のサービスを開発してるらしいからそこと接続するかもしれない（あくまでも可能性だし、自分のようにNFTの界隈が好きじゃない人からするとディスアドバンテージとすらいえるのかもしれない）

使い方

サイト開設

1. https://potion.so/ で会員登録・ログイン

2. [Add New Site]

3. [Site name]に好きなサイトのタイトルを入力（サーチエンジン上で表示されるタイトル）

4. NotionでIndex用のPageを作成（あるいは公開したいPageを開く）

5. [Share>Share to web]で共有用リンクを作成してリンクをコピー

6. [Notion Public URL]に5でコピーしたリンクを貼り付け

7. [Potion Subdomain]に好きなドメイン名を入力

8. [Continue]

9. [Custom Font]、[Description]、[Favicon]、[Site Image]はお好みで

10. しばらく待ってればDNSが適切に設定されて公開される

CSSのカスタマイズ

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/hogehoge"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'hogehoge');
</script>

<style>
.notion-h1 {
  border-bottom: 3px solid #33ad9d;
}
.notion-h2 {
  border-left: 3px solid #33ad9d;
}
</style>

ヘッダーのカスタマイズ

• [Use custom menu]をオンにするとヘッダーが生成される

• [Customize Site’s Menu]でヘッダーに表示するPageのリンクを選べる（Page以外は無理）

• [Sticky Header]でヘッダーがSticky（？）に

• [Add a shadow]でヘッダーとボディの境界に影が入る

• [Header background color], [Header font color]で背景色、文字色をいじれる

• [Add a call to action]>[Link]に飛ばしたいリンクを設定

• [Add a call to action]>[Title]でリンクタイトルを設定

• [Add a call to action]は一つしか設定できないっぽいから自分はLinktreeのリンクを設定

• [Save menu]を忘れずに

フッターの作り方

2022/03/02 追記：ドメインを変更した

Google Adsense がネイキッドドメインじゃないとダメ、というのでデフォルトのPotionドメイン傘下のサブドメインから独自ドメインに切り替えた。やり方はPotion公式の解説を見たほうが早い。

公式解説にない情報を補足すると、Potion側がネームサーバーの設定変更を正常に感知できない可能性がある。通常、DNSレコードを編集してからネームサーバー側の設定が切り替わるまでは大体1日以内に終わる。しかし、今回は1日以上待ってもPotionのstatusは”DNS Waiting”。

Potionとネームサーバーのどちらに問題があるのか調べるため、nslookupコマンドでチェックしたところ、どうやらネームサーバー側では正常に名前解決できている様子だった。Potionのサポートに症状と状況を伝えるとすぐに解決してくれた。

まだ何かと不安定なところが多いようだから詰まったときは迷わずサポートに頼ろう。

ちなみにドメインはサーバーレンタルする必要ないので.comが一番安かったXserverドメインでとった。以下アフィリエイトリンク。Potionだと現状 rel=nofollow を個別の<a>タグに埋め込む機能がないから本当はアフィなんてやらないほうがいいのかもしれない。とてもこの記事からコンバージョンするとは思えないし。￥

ドメイン名取得【Xserverドメイン】

「.com」や「.net」など、 人気ドメインの取扱い多数。 他社で取得したドメインを Xserverドメインに移管する。 取得したドメインの登録期限を 確認・更新手続きをする。 Xserverドメインは取得も更新も国内最安値！ 目的にあったドメインを1円から取得可能！ Xserverドメインを活用することで 初心者でも簡単に運用可能。 DNS設定やWhois代理公開機能など ...

https://px.a8.net/svt/ejp?a8mat=3N5UNB+APTO2+CO4+15OK2A