MENU
ふぃる
会社員として働きながら、ブログを始めたい人に向けて記事を書いています。映画ブログもやってます。

サイトで使用中のテーマ
シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
WordPressのテーマはSWELLがおすすめ

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

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

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

目次

導入方法(codoc)

STEP
codocのサイトにアクセス
STEP
無料で始めるを選択

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

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

STEP
codocに登録

Twitter・Facebookの場合

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

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

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

通常の場合

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

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

導入方法(WordPress)

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

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

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

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

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

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

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

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

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

記事の書き方

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

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

するとこんな感じに。

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

単体販売単体(買い切り)で販売する場合に選択します。
価格価格を設定。100円~50000円まで設定できます。
自由課金購入者が購入価格を決める事ができます。
数量限定販売販売数を決められます。残り部数が購入時に表示されます。
アフィリエイトこの記事を誰かに紹介して購入してもらうと、紹介した人に何%か支払われる仕組み。
サポート投げ銭機能の事。
限定公開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だとおそらくデフォルトでそうなってしまうようです。カスタマイズ後はこんな感じ。

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

関連記事

よかったらシェアしてね!

コメント

コメントする

目次
閉じる