TOMOKO OOSUKI

イラストレーター オオスキトモコのブログです。

【はてなブログカスタマイズ】はてなブログをcodocで課金記事化する

f:id:cafe_petit:20201121205656j:plain


こちらの記事に少し書いていたのですが

petitmatch.hatenablog.com
この記事では、codoc(コードク)を使って、はてなブログの記事を課金記事化する方法を紹介します。

 

1・codocって何?

「codoc」というのは、
HTML編集ができる&JavaScriptの貼り付けができるブログ・サイトで、有料課金記事が作れるというサービスです。
↓詳しくは

 

codoc.jp


私はnoteをやめたのをきっかけに、8月末からこのサービスを使用しています。自分のサイトやブログで、noteみたいなことができます。

超ざっくり分けると、一記事の有料販売(単体販売)・投げ銭記事の作成・サブスクリプション記事の作成ができます。


でも私は、サブスクリプション記事は作ったことがないです。
なので、この記事では、投げ銭記事の作り方と、有料記事の作り方(単体販売の一記事の作り方)について解説します。

投げ銭記事は、こんな感じのものができます。

はてなブログ

petitmatch.hatenablog.com
有料記事は、こんな感じの見た目になります。

はてなブログで販売している有料記事
(本当に大したこと書いてないし、文字数も少ないから、買わなくていいですよ。)

petitmatch.hatenablog.com↑は「有料で販売したい記事」というよりも、私としては「検索避け」の意味合いで有料にしている記事 という感じです。

私のサイトで販売している、「私と東大駒場寮」の有料記事

www.tomokooosuki.com

www.tomokooosuki.com

では、はじめていきます。

2・はてなブログの課金記事化

(2-1)投げ銭記事の作り方(投げ銭ボタンの配置)

〈手順〉
1・codocのダッシュボード→ウィジェット→デザイン
ウィジェットの色味・文言を決定し、
ウィジェット→サポートで「張り付けタグ」を取得する。

貼り付けタグ画面

貼り付けタグ画面

ここで「JS(JavaScriptの略)+要素」なのか「要素のみ」なのか、迷う方もいると思います。
はてなブログの場合は、「JSをヘッダーに書いて、一記事のHTMLに要素を書く」と、一応公式の説明に書いてあります。
でも「JS+要素」をそのままコピペして貼るのが楽かも…
私は公式の説明の通り、JSをヘッダーに入れてますけど…

codoc.jp
codocの社長の石川さんのcodocを読む限りでは、「JSをヘッダーに書いて、一記事のHTMLに要素を書く」のでも、「JS+要素をそのままコピペ」でも、どっちでもいいようです。(実際にやってみても、どっちでもできました。)どちらがより良いのかは、今度サポートに聞いてみようと思います。

JSをヘッダに書く場合は、はてなブログの「設定」→詳細設定→「検索エンジン最適化」の中の「headに要素を追加」の部分に記載します。

はてなブログの「設定」→詳細設定→「検索エンジン最適化」の中の「headに要素を追加」の部分

はてなブログの「設定」→詳細設定→「検索エンジン最適化」の中の「headに要素を追加」の部分

2・
*記事の最下部(広告の下)に投げ銭ボタンを配置したい場合
はてなブログダッシュボード→デザイン→カスタマイズ(スパナのボタン)→記事→記事下
に、codocで取得したタグを貼りつける。→変更を保存する

*本文の最下部(本文終了直後)または本文中に投げ銭ボタンを配置したい場合
・「記事を書く」画面の「定型文」に、1で取得したcodocのタグを入れておいて、好きなところに投げ銭ボタンを配置することもできます。
・私は、本文最下部に投げ銭ボタンのタグを入れた記事テンプレートを作成して、「下書き」に保存しておき、テンプレートをコピーして新しい記事を書くことにしました。

staff.hatenablog.com
ここまで書いて気づきましたが
codocの社長の石川さんが、ご自分のcodocで解説記事を書かれていました。そっちのほうが画像入りでわかりやすいかも…
でもこれはサポートウィジェット機能(投げ銭ボタン機能)ができる前に書かれた記事のようで、この記事の「2. タグをコピーします」以下が、投げ銭ボタンを設置するやり方の説明になります。

codoc.jp

(2-2)有料記事の作り方

これは、既に社長の石川さんのcodocにマニュアルがありました。

codoc.jp↑今は石川さんのはてなブログは、codocにリダイレクトされてしまうようです。
このマニュアルはちょっとわかりにくいので(思想とかはわかって、おもしろいんですけどね)、私なりの方法で解説します。

〈手順〉
この「codocテスト用記事」で解説します。
*テスト用記事なので、中身も見せてしまいます…

1・codocで記事を書く。
無料で読めるようにしたい部分は「本文 無料部分」に、有料エリアにしたい部分は「本文 有料部分」に書く。

codocで記事を書く

codocで記事を書く

codocで記事を書く

販売設定をして、「更新」。

codoc記事の販売設定

codoc記事の販売設定

codoc記事の販売設定

これでcodocの「サイト」には、公開されます。

codocのサイトに公開された有料記事

codocのサイトに公開された有料記事


2・タグを取得する。(私はヘッダにJSを入れてるので、「要素のみ」)

貼り付けタグ画面

貼り付けタグ画面

3・取得したタグを、はてなブログの「HTML編集」に貼る。

はてなのHTML編集画面

はてなのHTML編集画面


SEOや、はてなブログでの見栄えのことを考えると、はてなの記事編集画面で「編集オプション」で「アイキャッチ画像」の指定と「記事の概要」の入力をしたほうがいいと思います。今回はテスト記事なので、しませんけど…


プレビューで確認して、問題なければ、はてなブログで「公開する」。

記事のプレビュー

記事のプレビュー

記事のプレビュー

これで、有料記事の完成です!

(2-3)特商法表記について

codocは、特商法表記を自分で記載する必要があります。
私は、自分のサイトの表記へリンクするようにしました。
私ははてなブログだけでなく、自分のサイト(jimdo)のブログ機能も使用しており、そちらのほうでも有料記事を販売しているためです。

www.tomokooosuki.com
特商法表記ページはcodocの自分のサイトの一番下にもあるので、はてなブログからは、そこにリンクするようにしてもいいと思います。

codoc.jp
特商法表記については、よくわからない・不安な方は、一回、消費者庁に電話して聞いてみるといいと思います。私もcodoc導入時に電話したのですが、想像以上に、かなり親切に教えていただけました。
↓電話番号は、こちらの一番下の代表番号にかければ、担当の方につないでいただけます。このページを一度読んで、わからない点を整理してから電話するといいと思います。

www.no-trouble.caa.go.jp

【おまけ・1】codocには「自由課金」というのもある

ちなみに、codocには「自由課金」というのもあります。最近できた機能です。
「自由課金」と言いつつ、ログイン不要で、全部無料で読めてしまいます。
私は、「単に『続きを読む+投げ銭機能』の言い換えでは!?」と思ったのですけど、何かおもしろい使い方もあるかもしれないので、一応紹介しておきます。

petitmatch.hatenablog.com

【おまけ・2】課金する側からはどう見えるのか&画像入り解説記事(2021/3/6追記)

私の記事を読んで課金してくださった&codocを設置した方の記事を紹介します。かなりわかりやすいです。この方はサイドバーに投げ銭ボタンを設置されたようです。codocの投げ銭ボタンはこういう設置のしかたもできて、自由度が高いです。

aqm.hatenablog.jp

以上です。

わからないことや不明点は、私と直接知り合いの人は、私に直接聞いても良いですが、他の人はcodocのサポートに聞いてください!よろしくお願いいたします。

codoc.jpcodocはまだ去年会社ができたばかりの小さい会社のようで、どうもエンジニアばかりの会社のようだから、まだcodocはちゃんとしたマニュアルもないし、「自由課金」みたいな謎機能を開発したり、ちょっとトンチンカンなところもあるけれど、応援しています。

codocは最近ログリーと提携したみたいですよ

corp.logly.co.jp