本サイトのコンテンツにはプロモーションコードを含みます

はてなブログに投げ銭機能を設置したよ!codocを使って設置する方法を紹介

f:id:CNwriting:20240803125045p:image

はてなブログにも、noteみたいに投げ銭機能があったらいいのになーと思っている方、「codoc(コードク)」を使うと、noteのような投げ銭機能が設置できます。

codocを使ってはてなブログに投げ銭機能を設置するやりかたを紹介します。

 

codocとは?

「codoc(コードク)」とは、有料コンテンツを販売できるサービスです。はてなブログは、2023年6月28日よりcodocと連携して、有料記事を販売できるようになりました。

 

codocには「サポート(投げ銭)」機能というものがあり、投げ銭の設定もできるんです。codocは無料で登録でき、読者はcodocに登録していなくても100円〜10,000円の範囲で投げ銭をすることができます。 

 

codocを使ってはてなブログに投げ銭機能を設置する流れ

まず、codocを開いて、「無料ではじめる」をクリックします。

「クリエイターとして」を選んでアカウント登録をします。

ホーム画面から、「サポート機能(投げ銭)の設置」をひらきます。

「デザイン」タブを開いて、投げ銭ボタンの色と形状を選びます。

下にスクロールします。サポートボタンのテキストと、サポート説明のテキスト(ボタンの上に入るテキスト)を入力して、保存します。

「サポート」タブを開くと、作成した投げ銭ボタンのデザインが表示されます。デザインを確認して、OKであれば「貼り付けタグを表示」をクリックします。


「JS+要素」「要素のみ」の2つが出てくるので、「JS+要素」を選んでコピーします。

 

はてなブログでデザインを開きます。ヘッダ→ブログタイトル下に、先ほどコピーした中のJSの部分だけ(最初の<script src=から</script>まで)を貼り付けます。

次に、記事本文末尾→+モジュールを追加→HTMLを選びます。

そこに、先ほどのコードの要素の部分(<div id=から</div>まで)を貼り付けます。

これで完成です。

 

まとめ

codocを使ってはてなブログに投げ銭機能を設置するやりかたを紹介しました。ブログに投げ銭機能をつけたい人は、参考にしてみてくださいね。