noteのような有料記事を作れるcodocの使い方や導入方法を解説！購入方法も

記事を有料で販売できるツールと言えばnoteが有名ですが、WordPress内で有料の記事を作成できるcodocという便利なツールがあります。

今回はそのcodocを使って実際に有料記事を作成する手順や、記事の購入方法について紹介。シンプルで使いやすいのでおすすめです。

導入方法(codoc)

STEP

codocのサイトにアクセス

codocのサイトはこちら

STEP

無料で始めるを選択

TwitterやFacebookのアカウントを持っている方は、そちらから登録すると手間が省けるので、持っている方は「Twitterで始める」もしくは「Facebookで始める」を選択します。

両方ともアカウントを持っていなければ、右上の「無料で始める」を選択します。

STEP

codocに登録

Twitter・Facebookの場合

今回はTwitterで解説。先程の「Twitterで始める」を押すと、こんな画面になります。

ログインしていれば勝手にメールアドレスやTwitterのアカウント名が入力されるので、それでOKであればそのまま登録を押してください。

入力したアドレスにメールが届くので、そちらの「メールアドレスを認証する」を押してください。それで登録が完了します。

通常の場合

ニックネーム・メールアドレス・パスワードを入力するだけでOK。先程同様そのまま登録をクリックし、届いたメールの「メールアドレスを認証する」を押し、登録が完了します。

設定が完了したら口座情報などを登録しておくと良いでしょう。記事が購入され振り込まれる時がきたら必要になります。

導入方法(WordPress)

続いてWordPressのページでの導入方法になります。管理画面からプラグイン検索で「codoc」と入力。

インストールしたら「有効化」を押します。続いて管理画面左の「設定」→「codoc」を選択。

この辺は特にいじらなくて大丈夫。メインカラーがデフォルトで青になっていますが、ここを変更すればボタンなどの色を変える事ができます。

・記事購入ボタンのテキスト
・サブスクリプションボタンのテキスト
・サポートボタンのテキスト

などは入力しておくと良いでしょう。サブスクリプション形式での販売でなければ、入力しなくても特に問題はありません。

特段何もなければそのまま。

こちらも特にないでしょう。

万が一何かエラーが出た場合には「支障が出る処理を無効化」を「する」にチェックを入れると良いでしょう。

クリエイター情報に関してはcodoc側から編集すれば、ロゴや名前などがここに表示さるようになります。最後に「変更を保存」を押したら完了です。

記事の書き方

では早速記事を書いていきましょう。最初は無料部分を普通にいつも通りWordPressで書いていきます。無料部分を書き終わったら「ブロック」から「codoc」を選択します。

すでに入力しているので今は赤枠内の選択部分が薄くなっていますが、通常は濃くなっています。

するとこんな感じに。

赤枠部分を押すと右側から各種設定が可能です。

自由課金についての補足です。

有料パートはアクセス時に非表示となりますが、「自由課金で読む」をタップ後に表示されます。閲覧者は内容に応じて金額を自由に指定して購入できます。購入されない場合もあるのでご注意ください。

codoc

購入されない場合もあるので、使い時が限定されるとは思いますが…。

アフィリエイトの補足ですが、簡単に言うとアフィリエイトサービスの広告側になったイメージ。A8.netやafbなどのアフィリエイトサービスに登録している人が多いと思いますが、いつもは紹介する側ですよね。

サポート機能についてですが、この記事を良いと思ってくれた人が、メッセージを送れたり、100円～10000円の間で投げ銭する事もできます。チップのような感覚ですかね。

一通り設定ができましたら、有料部分をそのまま書いていきます。

書き終えたらいつも通り公開して問題ありません。プレビューを押すと何も変わりませんが、公開すればちゃんと変わっているのでそのまま進めてください。

こうなっていれば問題ありません。設定は完了です。実際にcodocの記事を貼っておきますので、どんな感じが参考にしてみて下さい。

自由気ままな映画感想ブログ

全国映画ロケ地マップ完全版！聖地巡礼や旅行の暇つぶし・観光やドライブなどにも 全国映画ロケ地マップ完全版！聖地巡礼したい人に向けて、作品ごとや都道府県ごとにロケ地をまとめました。これを使えば効率よくロケ地を周る事ができます。

codoc記事の購入方法

続いてcodocで作った記事の購入方法を解説。まずは「記事を購入する」をクリックします。

購入には会員登録が必要ですが、めんどくさい方は赤枠の「会員登録しないで決済」がおすすめ。後々簡単に会員登録が出来ます。

金額の下に「今すぐ支払う」という項目が出てくる場合があります（主にパソコン）。クロームに登録してあるクレジットカードの情報で購入できるので簡単です。

iPhoneを使っていれば「アップルペイ」の表示が出るので、それでも購入できます。

メールアドレスやクレジットカードの情報を入力。セキュリティコードはカードの裏に書いてある三桁の数字です。

最後に「支払う」を押して購入が完了します。購入するとメールが届きますが、パスワードの入力する画面が表示されます。登録を押すと会員登録が完了します。

これでログインして記事の続きを、記事上でそのまま読むことが可能です。

SWELLで見た目が崩れる

余談ですが私はSWELLというテーマを使っているのですが、なぜか購入ボタン上下の余白が勝手に詰まる現象が起きていました。気になったので追加CSSでカスタマイズしました。元はこんな感じ。

.codoc-more {
	padding-bottom: 16px!important;
}

.codoc-entry img {
	padding-top:16px;
}

.codoc-buy-title {
	padding-top:16px;
}

.codoc-buy {
	border:none!important;
}

important指定はあまりやりたくないですが、やらないと変わらなかったので指定してあります。SWELLだとおそらくデフォルトでそうなってしまうようです。カスタマイズ後はこんな感じ。

もし同じように困っている方がいたら参考までに。

関連記事

あわせて読みたい

0からブログを始める方法を解説！開設から運営まで全てがわかります 初心者向け！ブログの始め方を解説！開設から運営まで全てがわかります。必要最低限の項目を一つづつ紹介。これを見るだけでほとんどの事がわかります。