こちらの記事に少し書いていたのですが
petitmatch.hatenablog.com
この記事では、codoc（コードク）を使って、はてなブログの記事を課金記事化する方法を紹介します。
１・codocって何？
「codoc」というのは、
HTML編集ができる＆JavaScriptの貼り付けができるブログ・サイトで、有料課金記事が作れるというサービスです。
↓詳しくは
あなたのコンテンツをあなたのサイトで販売・課金できる
— codoc (@codoc_jp) May 8, 2020
有料コンテンツ配信＆課金サービス codoc （コードク）
私はnoteをやめたのをきっかけに、8月末からこのサービスを使用しています。自分のサイトやブログで、noteみたいなことができます。
超ざっくり分けると、一記事の有料販売（単体販売）・投げ銭記事の作成・サブスクリプション記事の作成ができます。
でも私は、サブスクリプション記事は作ったことがないです。
なので、この記事では、投げ銭記事の作り方と、有料記事の作り方（単体販売の一記事の作り方）について解説します。
投げ銭記事は、こんな感じのものができます。
petitmatch.hatenablog.com
有料記事は、こんな感じの見た目になります。
はてなブログで販売している有料記事
（本当に大したこと書いてないし、文字数も少ないから、買わなくていいですよ。）
petitmatch.hatenablog.com↑は「有料で販売したい記事」というよりも、私としては「検索避け」の意味合いで有料にしている記事 という感じです。
私のサイトで販売している、「私と東大駒場寮」の有料記事
では、はじめていきます。
２・はてなブログの課金記事化
（2-1）投げ銭記事の作り方（投げ銭ボタンの配置）
〈手順〉
１・codocのダッシュボード→ウィジェット→デザイン
でウィジェットの色味・文言を決定し、
ウィジェット→サポートで「張り付けタグ」を取得する。
ここで「JS（JavaScriptの略）＋要素」なのか「要素のみ」なのか、迷う方もいると思います。
はてなブログの場合は、「JSをヘッダーに書いて、一記事のHTMLに要素を書く」と、一応公式の説明に書いてあります。
でも「JS＋要素」をそのままコピペして貼るのが楽かも…
私は公式の説明の通り、JSをヘッダーに入れてますけど…
codoc.jp
codocの社長の石川さんのcodocを読む限りでは、「JSをヘッダーに書いて、一記事のHTMLに要素を書く」のでも、「JS＋要素をそのままコピペ」でも、どっちでもいいようです。（実際にやってみても、どっちでもできました。）どちらがより良いのかは、今度サポートに聞いてみようと思います。
JSをヘッダに書く場合は、はてなブログの「設定」→詳細設定→「検索エンジン最適化」の中の「headに要素を追加」の部分に記載します。
２・
＊記事の最下部（広告の下）に投げ銭ボタンを配置したい場合
はてなブログのダッシュボード→デザイン→カスタマイズ（スパナのボタン）→記事→記事下
に、codocで取得したタグを貼りつける。→変更を保存する
＊本文の最下部（本文終了直後）または本文中に投げ銭ボタンを配置したい場合
・「記事を書く」画面の「定型文」に、１で取得したcodocのタグを入れておいて、好きなところに投げ銭ボタンを配置することもできます。
・私は、本文最下部に投げ銭ボタンのタグを入れた記事テンプレートを作成して、「下書き」に保存しておき、テンプレートをコピーして新しい記事を書くことにしました。
staff.hatenablog.com
ここまで書いて気づきましたが
codocの社長の石川さんが、ご自分のcodocで解説記事を書かれていました。そっちのほうが画像入りでわかりやすいかも…
でもこれはサポートウィジェット機能（投げ銭ボタン機能）ができる前に書かれた記事のようで、この記事の「2. タグをコピーします」以下が、投げ銭ボタンを設置するやり方の説明になります。
（2-2）有料記事の作り方
これは、既に社長の石川さんのcodocにマニュアルがありました。
codoc.jp↑今は石川さんのはてなブログは、codocにリダイレクトされてしまうようです。
このマニュアルはちょっとわかりにくいので（思想とかはわかって、おもしろいんですけどね）、私なりの方法で解説します。
〈手順〉
この「codocテスト用記事」で解説します。
＊テスト用記事なので、中身も見せてしまいます…
１・codocで記事を書く。
無料で読めるようにしたい部分は「本文 無料部分」に、有料エリアにしたい部分は「本文 有料部分」に書く。
販売設定をして、「更新」。
これでcodocの「サイト」には、公開されます。
２・タグを取得する。（私はヘッダにJSを入れてるので、「要素のみ」）
３・取得したタグを、はてなブログの「HTML編集」に貼る。
＊SEOや、はてなブログでの見栄えのことを考えると、はてなの記事編集画面で「編集オプション」で「アイキャッチ画像」の指定と「記事の概要」の入力をしたほうがいいと思います。今回はテスト記事なので、しませんけど…
プレビューで確認して、問題なければ、はてなブログで「公開する」。
これで、有料記事の完成です！
（2-3）特商法表記について
codocは、特商法表記を自分で記載する必要があります。
私は、自分のサイトの表記へリンクするようにしました。
私ははてなブログだけでなく、自分のサイト（jimdo）のブログ機能も使用しており、そちらのほうでも有料記事を販売しているためです。
www.tomokooosuki.com
＊特商法表記ページはcodocの自分のサイトの一番下にもあるので、はてなブログからは、そこにリンクするようにしてもいいと思います。
codoc.jp
＊特商法表記については、よくわからない・不安な方は、一回、消費者庁に電話して聞いてみるといいと思います。私もcodoc導入時に電話したのですが、想像以上に、かなり親切に教えていただけました。
↓電話番号は、こちらの一番下の代表番号にかければ、担当の方につないでいただけます。このページを一度読んで、わからない点を整理してから電話するといいと思います。
【おまけ・１】codocには「自由課金」というのもある
ちなみに、codocには「自由課金」というのもあります。最近できた機能です。
「自由課金」と言いつつ、ログイン不要で、全部無料で読めてしまいます。
私は、「単に『続きを読む+投げ銭機能』の言い換えでは！？」と思ったのですけど、何かおもしろい使い方もあるかもしれないので、一応紹介しておきます。
【おまけ・２】課金する側からはどう見えるのか＆画像入り解説記事(2021/3/6追記)
私の記事を読んで課金してくださった＆codocを設置した方の記事を紹介します。かなりわかりやすいです。この方はサイドバーに投げ銭ボタンを設置されたようです。codocの投げ銭ボタンはこういう設置のしかたもできて、自由度が高いです。
以上です。
わからないことや不明点は、私と直接知り合いの人は、私に直接聞いても良いですが、他の人はcodocのサポートに聞いてください！よろしくお願いいたします。
codoc.jpcodocはまだ去年会社ができたばかりの小さい会社のようで、どうもエンジニアばかりの会社のようだから、まだcodocはちゃんとしたマニュアルもないし、「自由課金」みたいな謎機能を開発したり、ちょっとトンチンカンなところもあるけれど、応援しています。
codocは最近ログリーと提携したみたいですよ
