少し前にcodocの投げ銭機能を導入したことについて記事を書きました。yunico-fluffylife.com
投げ銭機能のデザインを変えたかったのですが、なかなかやり方がわからず…試行錯誤の結果、やっとカスタマイズすることができました🙌🏻
今回はcodocの投げ銭機能のカスタマイズ方法をまとめていきますᝰ✍️
- codocの投げ銭機能の導入方法
- デザインのカスタマイズ方法
「導入方法は知ってるから、カスタマイズ方法だけ知りたい」という方は、目次から【カスタマイズ方法】まで飛んでくださいね☺
投げ銭機能の導入方法
codocですること
| 【1】codocに登録する codoc | WEBメディアのためのコンテンツ販売サービス コードクにアクセスし、必要項目を記入して登録をする（スマホ・パソコン、どちらからでも利用可能）。 |  |
| 【2】投げ銭機能の設定① 登録が完了するとダッシュボードが表示されるのでサポート機能（投げ銭）の設置→デザインにアクセスする。 |  |
| 【3】投げ銭機能の設定② お好みの【テーマカラー】と【ボタンの形状】を選びます。 テーマカラーはカスタマイズ方法で、より好みの色に変更できますので、お好みの色がなければそのままでOKです。 ページを下にスクロールさせると【サポートボタンのテキスト】【サポート説明のテキスト】という項目が出てくるので、表示したい文言をここを記入して、保存を押します。 |   |
| 【4】タグをコピーしておく ダッシュボードの【サポート】ページにある、＜＞貼り付けタグを表示から要素のみと書いてあるタグをコピーしておく。 |   |
はてなブログですること
| 【1】codocタグを貼り付ける codocですること【4】でコピーしたタグを、投げ銭機能を載せたい場所に貼り付けます。 ここでは記事本文末尾に載せる方法を書いていきます。 デザイン設定→記事本文末尾→＋モジュールを追加 モジュールの追加の＜／＞HTMLにコピーしたタグを貼り付けて適用を押して設定します。 |   |
| 【2】ヘッダにScriptを貼り付ける この説明表の下外にあるScriptコードをコピーして、ヘッダ→ブログタイトル下に貼り付け、変更を保存します。 |  |
| 【3】反映されているか確認する 貼り付けたい場所に投げ銭機能が反映されていれば、導入設定は完了です！ |  |
Scriptコード
<script src="https://codoc.jp/js/paywall.js" defer></script>
このコードを、はてなブログのデザイン設定ページのヘッダ・ブログタイトル下に貼り付けてください。
このコードは、みんな同じものなので、そのままコピペして問題ありません☺
カスタマイズ方法
以下のCSSコードを、はてなブログのデザイン設定ページの｛｝デザイン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 2px #555!important; /* 枠線 */
background: #F5EDEB!important; /* 背景色 */
}
.codoc-entry .codoc-support .codoc-btn:hover {
color: #555!important; /* ボタンのホバー時の文字色 */
background: #DCD5D3!important; /* ボタンのホバー時の背景色 */
}
/*** 投げ銭カスタマイズここまで ***/コピペで簡単に設定できますが、各項目の説明を付けているので、お好みで色を変えることが可能です。
みなさまのブログにあうカラーリングにしてみてくださいね。（このまま使うと、こことお揃いになります😙）
▼参考になるカラーコードサイトwww.colordic.org
CSSコードの補足点
不要な部分は消してOK
例えば、「ホバー時の色は設定しなくてよい」という場合は、.codoc-entry .codoc-support .codoc-btn:hover {～～の部分は消してしまって構いません。
!importantは消さない
『 !important 』とは、『 !important 』がついているプロパティを最優先で使用するように命令するコードです。
これを消してしまうと、codoc側で設定されているものが表示されるようになるので、カラーコードなどを変更する場合は必ず、ビックリマークより前の部分を変えてくださいね。
おわりに
codocの投げ銭機能の導入方法と、デザインのカスタマイズ方法についてご紹介しました。
公式サイト内での設定では背景などが好みの色にできなかったので、無事に設定できてよかったです☺
同じように「ここの色変えたいんだけどなぁ…」みたいに思っていた方のお役に立てれば嬉しいです！
また冒頭でも書きましたが、このカスタマイズ方法をブログ記事にまとめようかな？と思っている方がおりましたら、この記事のリンクを貼り付けて紹介してくださいますようお願いいたします。
ご質問等ありましたら、お気軽にコメントくださいね。
お読みいただき、ありがとうございます。
それではまたね🧸◌𓈒𓐍
