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

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

投げ銭機能の導入方法
- codocですること
- はてなブログですること
カスタマイズ方法
- 注意点【!importantは消さない】

投げ銭機能の導入方法

codocですること

【1】codocに登録する

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

【2】投げ銭機能の設定①

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

【3】投げ銭機能の設定②

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

【4】タグをコピーしておく

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

はてなブログですること

【1】codocタグを貼り付ける

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

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

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

【2】ヘッダにScriptを貼り付ける

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

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

【3】反映されているか確認する

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

カスタマイズ方法

caution!

公開しているCSSコードは個人利用のコピペはOKですが、ブログなどでカスタマイズ方法を紹介する場合は、本記事をリンクして引用である旨の表記が必須です。
どうぞよろしくお願い致します。

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; /* ボタンのホバー時の背景色 */
}

コピペで簡単に設定できますが、各項目の説明を付けているので、お好みで色などを変えることが可能です。

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

参考になるカラーコードサイトwww.colordic.org

注意点【!importantは消さない】

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

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

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

yunico's fluffy life

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