【プログラミング不要】Notionをブログとして公開する方法を徹底解説

【プログラミング不要】Notionをブログとして公開する方法を徹底解説

こんにちは、うだたつやです。 Notionブログが最高すぎて、解説記事を書きたくなりました。

この記事では、「Notionをブログにできるって本当?」「Notionをブログにしたい!でも、プログラミングが必要なの?大変そう…。」という方に向けて、実際にSuperを使ってNotionをブログ化した筆者が、Notionをブログとして公開する方法をわかりやすく解説します。

結論から言うと、プログラミングは一切不要で、かなり簡単にNotionブログを始められます。今回は、誰でも簡単にNotionを独自ドメインに乗せて公開できるSuperというサービスを紹介します。

Notionをブログ化することで、ブログの更新がめちゃめちゃ楽になりましたので、ぜひ参考にしてみてください!

Notionをブログにするメリット

そもそも、なぜNotionをブログとして使うのか。

一番のメリットは更新が非常に楽だからです。

ブログの更新がスーパー楽になる

Notionをブログ化させると、ブログの更新がめちゃめちゃ楽です。

なぜ更新が楽なのかというと、文章を書き始めるまでが早いからなんですよね。

例えば、ワードプレスやはてなブログにブログを作っても、ログインして執筆までのハードルが高いです。せっかくブログを作ったけど、2,3記事書いてから全く更新してません。という方も多いと思います。

その点、NotionならPCやスマホでアプリを立ち上げっぱなしにしておけます。そうすることで、何か思い浮かんだ際に、サッと軽いメモとして書き留めたり、そのまま記事として書き上げやすいです。

Notionブログは更新のしやすさという点では、どのサービスよりも一番楽です。

書くのが楽しい

Notionは表現の幅も広く、簡単に読みやすい文章が作れるので、書いていて楽しいです。

元々のデザインもみやすいですし、簡単に装飾を使えて、記事をわかりやすくできるのが良いですね。

書いていて楽しいと、継続が楽です。

余計な機能がない

この記事の読者の中には、一般のブログサービスに疲れている方もいるんじゃないでしょうか。例えば、はてなブログやnoteには、いいねやコメント、フォローなどのソーシャル機能があります。それが楽しいのも理解できますが、僕はただ文章が書ければ良いです。

逆にそういうソーシャル機能があると、プラットフォームに発信内容をコントロールされている気分になります。いいねがつかないと落ち込んだり、フォロワーを増やすために戦略的な投稿をしたり。

Noitonブログには余計な機能がないため、ただただ文章を書くことに集中できます。

Superとは

image

Superは、NotionをそのままWebサイトとして公開できるツールです。

  • 独自ドメイン&SSL(https)対応。
  • 設定が簡単。だれでも10分で公開できる。
  • 読み込み速度が速い
  • ページ遷移速度が超速い
  • カスタムCSS / JS対応
  • Googleアナリティクスも導入可能
  • フォント変更可能
  • メタタグの設定可能
  • favicon設定可能

など、重要な機能はほとんど揃ってます。

▼Superの公式サイトはこちら

NotionをWordPressのように使える

もう少し専門的に言うと、Superは、いわゆるSSG(静的サイトジェネレーター)のホスティング自動化サービスです。NotionをCGMとして利用できるところが最大のメリットですね。

よく分からない方は、NotionをWordPressみたいに使えると考えれば大丈夫です。

このページもSuperを使ってホストしてますので、動作の参考にしてみてください。

Superの類似サービス

他にもいくつかNotionをwebサイト化するツールはありますが、Superが1番人気があり、使いやすそうだったのでSuperを選びました。

類似サービス一覧

Super $12/月 Anotion 980円/月(日本) Notion2Site $8/月 Notelet $7/月 HostNotion $5/月

Anotionだけは、日本人の方が開発者で日本語でサービス提供されています。Superはサイトが全て英語のため、英語に不安のある方はAnotionもおすすめです。

初級編:SuperでNotionをブログとして公開する方法

まずは、Superの公式サイトから黄色のCreate your siteをクリックしましょう。

image

アカウント作成

アカウント作成画面に飛ぶので、Superにログインする際に使用するメールアドレス、パスワードと、決済に使うクレジットカード番号を入力してください。

image

サイト登録

Superのアカウントが作成できたら、Notionのサイト設定に進みましょう。

image

右上のNew siteボタンをクリックして、公開したいサイトの設定に進みましょう。

Site Methodの選択

Site Methodは左のSuper Staticを選びましょう。

image

Site Setting

ここでは、サイトの基本的な設定ができます。

image

左のSite Nameにサイトの名前を入力してください。Site NameはSuper内で表示される名前なので、なんでもOKです。

右のCustom domainにドメイン名を設定してください。このサイトの場合はudapon.tokyoというドメインを使いました。

まだドメインを持っていない方は、Xドメインなどでドメインを取得しましょう。

下のPublic Notion URLにはNotionの公開URLを設定します。

Notionの公開URLを取得するには、Notionで公開したページに移動して、右上のShareボタンをクリックします。

image

Share to WebをクリックするとURLが表示されます。

image

このURLがNotionの公開URLです。

image

Copy linkをクリックして、URLをコピーし、先ほどのPublic Notion URLに貼り付けましょう。

⚠️

注意点として、Public Notion URLに入力したURLがトップページのページになります。ブログとしてNotionのページを公開するなら、まずは白紙のページを指定しておきましょう。Full pageのデータベースページを指定すると、後から要素が追加しづらいためです。 また、そのページの配下にあるコンテンツも全て公開されます。一般に公開してはいけないメモなどが混じっていないか、確認しておきましょう。

Continueをクリックして先に進みます。

Pretty URLs

Pretty URLsは、Superで自動的に生成された長いURLを、短くて覚えやすいURLに固定させるために使います。 よくわからない方は飛ばしてもOKです。

image

例えば、ブログ一覧ページのURLが"https://example.com/0974636199"のように、長くてわかりづらいURLだったとします。これではURLがわかりづらいので、"https://example.com/blog"に変更したいですよね。

そんな時に、この画面でURLの固定化ができます。

DNS Records

次に、DNS Recordsの設定をしましょう。

image

一般的なドメインサービスはここに無いため、Otherを選びます。

ここに表示された二つのDNSレコードを、使用しているドメインサービスの管理画面で入力します。

Xドメインで取得された方は、こちらを参考にしてください。

image

DNSレコードの反映には数時間から数日かかるので、反映されるまでしばらく待ちましょう。

Super Options

最後にSuper Opitonsで細かい設定を行いましょう。

image

Custom fontsでは、フォントを選べます。個人的にはNoto Sansが好きなので、日本語対応版のNoto Sans JPを選択しました。

Site imageでは、TwitterやFacebookなどSNSで共有する際に表示されるOGP画像の設定ができます。

Custom faviconでは、faviconが設定できます。faviconとは、ブラウザのタブに表示されるアイコンのことです。例えば、Superのファビコンは雷のマークですね。

image

Snippet injectionでは、サイト全体のヘッダーにスニペットを埋め込むことができます。ここにGoogle アナリティクス等のJavaScriptタグや、カスタムCSSを埋め込められます。これが非常に便利なので、後ほど詳細を解説します。

Site descriptionでは、OGP画像と一緒に表示される説明文が指定できます。

Enable or disable site searchは、Enable(オン)にすると、サイトのヘッダーの右上部分にサイト内検索のボタンが表示されます。

image

Show or hide page propertiesは、Show(表示)にすると、個別ページでプロパティが表示されます。いらない方は、Hide(非表示)にしておきましょう。

image

Search engine indexingは、Googleなどの検索エンジンにインデックスさせるかどうかを選べます。わざわざSuperを使うということは、一般に公開させたいはずなので、Enable(インデックスさせる)を選びましょう。

しばらく待つと、NotionがWebサイト化されます

DNSレコードの変更が反映されるまでに最大で数日かかるので、放置しましょう。

公開できました

image

正常に公開できましたね。

サイトの見た目は、Notionの編集画面とそっくりです

image

Notionでブログを書いてみましょう

早速、ページを追加してSuperが正常に動作しているか試してみましょう!

Notion上でページを編集すると、数分後に公開サイトでも変更が反映されます。

Notionブログは、WordPressと比べても文章を書くまでの心理的なハードルが低いため、更新が捗ります。サイトのデザインもシンプルで洗練されていますし、文字の装飾も簡単なので、書いていて楽しいのが重要なポイントです。

中級編:Superを使ったNotionブログでできること

NotionをWordPressの代わりに使うのは、ほとんどの点でメリットばかりですが、WordPressほどの拡張性はないため、困るポイントが少しあります。

例えば、Notionにはフッターがありません。毎回Notionのページの最後にフッターの内容を書くこともできますが、可能であればサイト全体で共通のフッターを設置したいですよね。(Superではもうじき、グローバルフッター機能が追加されるようです)

でも、やり方を工夫すれば、フッターのようなものを用意することは可能です。(後述)

以下では、ブログ運用に欠かせない機能をNotionブログで実現する方法を解説します。

下書き / 公開管理機能

image

執筆途中の記事は下書きにしておきたいですよね。

データベースのフィルター機能を使えば、記事を下書きとして保存しておけます。

Superでは、データベースのビューが複数あった場合、一番上のビューを表示のために使用されるようです。そのため、一番上のビューでフィルター機能を使えば、表示する記事を場合分けできます。

実際に、下書き機能を作るためのステップは以下の通りです。

1.データベースのプロパティに「公開」という名前のチェックボックスを追加

image

2.新しくビューを追加して、1番上に並び替える(ギャラリービューがおすすめ)

image

3.フィルター機能で、公開チェックボックスがチェックされているものだけ表示させる

image

こうすれば、公開のチェックボックスにチェックが入ったページだけサイトで表示させることが可能です。

Googleアナリティクスでアクセス分析

どのページがどれだけアクセスがあるのか、調べられたら嬉しいですよね。

Superならヘッダーに任意のコードを挿入できるため、Googleアナリティクスのタグを埋め込められます。

image

Snippet injectionの部分に、以下のようなGoogleアナリティクスのタグをそのまま貼り付ければOKです。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_ID"></script>

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

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

しっかりとデータが取得できています。

image

Googleタグマネージャーが導入できるので、細かいイベント収集や、スクロール率計測、A/Bテストなどもできますね🙂

同様にして、Googleアドセンスなどの広告も埋め込めると思います。(未検証)

上級編:カスタムCSSでNotionブログをカスタマイズする

ここからは、さらにNotionをカスタマイズしたい方に向けて、実際に僕が作成したカスタムCSSを紹介します。

ここに掲載しているCSSをそのままSnippet injectionに貼り付けて保存すれば使えます。(反映までしばらく時間がかかる点に注意)

実際に僕が適応しているカスタムCSSを公開

実際に使っているカスタムCSSを全て公開します!デザイナー兼エンジニアの腕を活かして、Notionを最高に見やすくなるCSSを書いてみました。

<style>
	/* 画像周りの余白調整 */
	.notion-image {
  	 margin-top: 14px !important;
 	   margin-bottom: 30px !important;
	}

	/* 文字の余白、行の高さ調整 */
	.notion-text__content {
	    line-height: 1.75;
	    margin-top: 14px !important;
	    margin-bottom: 14px !important;
	}
	
	/* タイトルの大きさを調整 */
	.notion-header__title {
	    line-height: 1.5 !important;
	    font-size: 30px !important;
	}
	
	/* プロフィールカード(Callout + ブラウンカラーの場合のみ)*/
	.notion-callout.bg-brown-light .notion-callout__content .notion-semantic-string span:nth-child(1) {
	    margin-bottom: 4px !important;
	    display: block !important;
	}

	.notion-callout.bg-brown-light .notion-callout__content .notion-semantic-string span:not(:nth-child(1)) {
	    display: inline;
	    font-size: 12px;
	}

	.notion-callout.bg-brown-light .notion-callout__icon div {
	    width: 80px !important;
	    height: 80px !important;
	    border-radius: 60px;
	}

	.notion-callout.bg-brown-light .notion-callout__icon {
	    margin-right: 6px;
	    width: fit-content !important;
	    min-width: fit-content !important;
	}

	.notion-callout.bg-brown-light {
	    border-radius: 8px !important;
	    border: none !important;
	    padding: 22px !important;
	}

	/* ページの横幅を小さく固定 */
	.notion-header__content.max-width {
	    max-width: 800px  !important;
	}
	.super-content.max-width {
	    max-width: 800px  !important;
	}

	/* ブログ一覧のアイコンを非表示 */
	.notion-property__title__icon-wrapper {
	    display: none !important;
	}

	/* ブログ一覧のシャドウを調整 */
	.notion-collection-card {
	    box-shadow: 0 1px 19px 2px #0000000f !important;
	    border-radius: 8px !important;
	}

	/* ブログ一覧のページタイトルのデザインをみやすく変更 */
	.notion-property.notion-property__title {
	    padding: 14px 14px !important;
	    font-size: 14px !important;
	}
	.notion-collection-card.gallery .notion-property__title .notion-semantic-string {
	    white-space: normal !important;
	}

	/* カバー画像がない場合のページの上の間延び部分を小さく変更 */
	.notion-header__cover.no-cover {
	    height: 40px !important;
	}
</style>

以下で、詳細を解説します。

画像と文章の余白を修正

Noitonは全体的にみやすいデザインなのですが、一般に公開するページとして考えると、少し文章や画像との余白が狭く、窮屈な印象です。

見出しと下の文との隙間や、文字同士の感覚が狭く、窮屈に見えます。
見出しと下の文との隙間や、文字同士の感覚が狭く、窮屈に見えます。

そこで、以下のCSSを追加します。

<style>
	/* 画像周りの余白調整 */
	.notion-image {
  	 margin-top: 14px !important;
 	   margin-bottom: 30px !important;
	}

	/* 文字の余白、行の高さ調整 */
	.notion-text__content {
	    line-height: 1.75;
	    margin-top: 14px !important;
	    margin-bottom: 14px !important;
	}
</style>

本の少しの差ですが、少し文字がみやすくなりました。

image

細かいこだわりですが、実際に文章を読んでみるとかなり違います。

適応前
適応前
適応後
適応後

プロフィールカード機能を追加

プロフィールカードというのは、こういうデザインのカードです。

image

Notionには、デフォルトでこんなカード機能が用意されていないため、CalloutとカスタムCSSを使って作ってみました。

image

このデザインの仕組みは、実は上の画像のようにCalloutの左のアイコン部分にプロフィール画像を使い、中身にプロフィール文を書いています。

これをカスタムCSSで画像を大きく、丸く変更することでプロフィールカードを実現しています。

とはいえ、普通のCalloutも使いたいですよね。なので、コールアウトの背景がブラウンの場合のみ、プロフィールカードに変わるようにCSSを設定しました。

image

以下、CSSです。

<style>
	/* プロフィールカード(Callout + ブラウンカラーの場合のみ)*/
	.notion-callout.bg-brown-light .notion-callout__content .notion-semantic-string span:nth-child(1) {
	    margin-bottom: 4px !important;
	    display: block !important;
	}

	.notion-callout.bg-brown-light .notion-callout__content .notion-semantic-string span:not(:nth-child(1)) {
	    display: inline;
	    font-size: 12px;
	}

	.notion-callout.bg-brown-light .notion-callout__icon div {
	    width: 80px !important;
	    height: 80px !important;
	    border-radius: 60px;
	}

	.notion-callout.bg-brown-light .notion-callout__icon {
	    width: max-content !important;
	    margin-right: 6px;
	}

	.notion-callout.bg-brown-light {
	    border-radius: 8px !important;
	    border: none !important;
	    padding: 22px !important;
	}
</style>
💡

背景色にブラウンを選んだ時だけ、プロフィールカードになります。

このCalloutを、グローバルブロック化して、全てのブログ記事のフッターとして使っています。

ブログ一覧(ギャラリー)のデザインをブログっぽく

Notionのギャラリーのデザインはこんな感じですよね。

image

これも悪くはないですが、ブログのタイトルが隠れてしまったり、無駄なアイコンが表示されてしまっています。これをカスタムCSSで修正してみました。

image

タイトルが全て表示され、アイコンも非表示になったのでみやすくなりましたね。

以下、CSSです。

<style>
	/* ブログ一覧のアイコンを非表示 */
	.notion-property__title__icon-wrapper {
	    display: none !important;
	}

	/* ブログ一覧のシャドウを調整 */
	.notion-collection-card {
	    box-shadow: 0 1px 19px 2px #0000000f !important;
	    border-radius: 8px !important;
	}

	/* ブログ一覧のページタイトルのデザインをみやすく変更 */
	.notion-property.notion-property__title {
	    padding: 14px 14px !important;
	    font-size: 14px !important;
	}
	.notion-collection-card.gallery .notion-property__title .notion-semantic-string {
	    white-space: normal !important;
	}
</style>

Notion + Superでブログを作る方法まとめ

以上、Superを使ってNotionでブログを作り、運用で必要な機能の作り方などを解説しました。

皆さんの役に立てれば嬉しいです!質問などあれば、Twitterでご連絡ください。

うだたつやぐっすり眠れる睡眠アプリのSheepを開発しています。ユーザーに愛されるサービスが好きです。Twitter / Instagram / note

Notionに関連する記事

Notion