page icon

Notion Wraptasにコメント機能追加

概要

NotionブログであるWraptasにコメント機能が標準ではなかったのでその手順を記載しています。
 

コメント機能の追加手順

Disqusの設定手順


  1. まず以下のURLにアクセスしアカウントを作成してください。
    1. Disqusというサービスでコメント機能を導入します。 (Wraptas公式にもDisqusサービスを使用すると良いという記載があったので安全性も問題ないサービスだと思います。)
    2. アクセスすると というボタンがあるので押下します。
      1.  
    3. こんな画面が出てくるので、好きな方法でアカウントを作成してください。
 
  1. アカウントを作成すると、以下の画面が表示されますので、右の を選択します。
 
  1. Create a new siteが表示されるので、WebsiteNameを記載して を押下します。
 
  1. を押下後は、課金画面(以下画面)になりますが、コメント機能を追加したいだけなので今回は、課金せずに進めます。
 
  1. 左の を選択し、以下画面に進みます。
    1. この画面では、コメント制限の厳しさ(不適切なコメントの自動削除など)を設定できます。
      とりあえず上の を選択しました。 最後に を押下して完了です。
 

Wraptasの設定手順

  1. まずDisqusからコメント機能のソースコードを取得します。
    1. 左上の一番端に先ほど登録した (私の場合は「ukuha」)が表示されるので選択します。
      1.  
    2. 次に上のメニューの を選択します。
      1.  
    3. 左メニューの を選択し、 画面下のを選択します。
      1.  
    4. 押下後の画面のYotubeの下にあるコード二つを使用します。 ①Place the following code where you'd like Disqus to load: ( 1番目のソースコード )
      1. さらに下にある
        ①Place the following code before your site's closing  tag: ( 2番目のソースコード )
        この二つのソースコードが必要になります。
         

  1. 次にWraptasにアクセスしコメント機能を設定します。
    1. > を選択します。
    2. 一番下に があるので、 そこに先ほどDisqusから取得したコード2つをコピーして記載します。
      1. 1番目のソースコード のソースコードの下に 2番目のソースコード のソースコードを記載してください。
        記載イメージ
         
    3. ソースコード記載後に を押下して、読み込み直すとプレビューの一番下にコメント機能が表示されます。
      1.  

  1. 私の場合は、上の画像のようにコメント機能が横幅フルページで設定されたので、 少しデザインの修正が必要でした。
    1. 1個目のソースコードがコメント機能を表示しているHTMLコードなので、 そこに を追加すれば、設定完了です。 ※ Wraptas クラスは、サイト本文の横幅を制御しているようなクラスです。
       
  1. ✨✨✨完成品✨✨✨
    1. 横幅が綺麗に揃いました!!
 

まとめ

今回は、NotionブログであるWraptasにコメント機能を追加する方法を紹介しました。 今回は少し難しかったですかね?不明点があればコメントで教えてください。
Wraptasを使わずに、Notionだけでもコメント機能をつけれる方法があれば是非教えてください。 調べても特に見つからなず…
では!みなさんのご参考になれば幸いです。
 
 
その他 関連記事
 
 
 
 
☑ New Post

 
Icons by icons8.com