はてなブログにcodoc（コードク）の投げ銭機能の導入方法と、デザインのカスタマイズ┃コピペでOK！

少し前に「codocの投げ銭機能」を導入して、やっとデザインのカスタマイズもできたので、導入方法とカスタマイズ方法をご紹介します。

投げ銭機能の導入方法
- codocでの設定手順
- はてなブログでの設定手順
カスタマイズ方法（css）
- 注意点：『!important』は消さない

投げ銭機能の導入方法

codocでの設定手順

codoc | WEBメディアのためのコンテンツ販売サービスコードクにアクセスし、必要項目を記入して登録をする（スマホ・パソコン、どちらからでも利用可能）。

登録が完了するとダッシュボードが表示されるのでサポート機能（投げ銭）の設置→デザインにアクセスする。

お好みの【テーマカラー】と【ボタンの形状】を選ぶ。テーマカラーはカスタマイズ方法で、より好みの色に変更できますので、ここに好みの色がなければそのままでOK。
　
ページを下にスクロールさせると【サポートボタンのテキスト】【サポート説明のテキスト】という項目が出てくるので、表示したい文言をここを記入して、「保存」を押す。

ダッシュボードの【サポート】ページにある〈〉貼り付けタグを表示の、要素のみをコピーしておく。

はてなブログでの設定手順

codocですること【4】でコピーしたコードを、投げ銭を載せたい場所に貼り付ける。
　
ここでは「記事本文末尾」に載せる方法を書いていきます。

デザイン設定
記事本文末尾
＋モジュールを追加
HTML

【HTML】にコピーしたタグを貼り付けて適用を押す。

<script src="https://codoc.jp/js/paywall.js" defer></script>

上記スクリプトを、ヘッダ→ブログタイトル下に貼り付け、変更を保存する（共通のコードなのでそのままコピペでOKです）。

貼り付けたい場所に投げ銭機能が反映されていれば、導入は完了。

カスタマイズ方法（css）

caution!

公開しているコードは個人利用でのコピペ、ご自身でのカスタマイズはご自由にどうぞ。
カスタマイズ方法をブログなどで紹介する場合は本記事をリンクして、引用である旨の表記をしていただきますようお願い致します。

setting

はてなブログのトップページ（PC版）から【デザイン】へアクセスする。
上記画像①→②→の順番に選択して、③にCSSコードを貼り付ける。
【変更を保存する】を押して完了。

/*** 投げ銭カスタマイズ ***/
/* 全体の背景色 */
.codoc-support { 
  background: #F5EDEB !important; 
}

/* メッセージ部分 */
.codoc-support .codoc-support-title { 
  text-align: left !important; /* 文字を左寄せ */
  color: #555 !important; /* 文字色 */
  letter-spacing: 1px !important; /* 文字間隔 */
  font-size: 18px !important; /* 文字サイズ */
  margin: -0.3em 0 1em 0 !important; /* 余白の調整 */
}

/* サポートボタン */
.codoc-entry .codoc-support .codoc-btn { 
  color: #555 !important; /* 文字色 */
  border: solid 1px #555 !important; /* 枠線 */
  background: #FFF !important; /* 背景色 */
}

/* サポートボタンのホバー時のスタイル */
.codoc-entry .codoc-support .codoc-btn:hover {
  color: #555 !important; /* ボタンのホバー時の文字色 */
  background: #DCD5D3 !important; /* ボタンのホバー時の背景色 */
}

もくもく

コピペで簡単に設定できるね。各項目の説明を参考に、お好みで色などを変えてみるといいね！

yunico

そうそう。ぜひ、ブログにあうデザインにしてみてくださいね。
このまま使うと、色はピンクベージュ系です。

www.colordic.org
　

注意点：『!important』は消さない

『 !important（重要宣言）』とは、 !importantがついている要素を最優先で使用するように命令するコードです。

これを消してしまうと、codoc側で設定されているものが表示されるようになるので、カラーコードなどを変更する場合は必ず、ビックリマークより前の部分を変えてください。

codocの投げ銭機能の導入とカスタマイズ方法についてご紹介しました。ご不明点がありましたら、お気軽にコメントくださいね。

yunico's fluffy life

横着主婦の暮らしの詰め合わせ

記事タイトル