こんにちは、シンプルライフナビです。
はてなブログは、codoc（コードク）との連携により有料記事の販売 が可能です。
そして、実際にかなりの人が、記事の有料販売を始めています。
ところで、
簡単に有料記事の掲載ができる、codocのボタン表示をカスタマイズする方法を知りたい人もいるのではないでしょうか？
例えば、
- codocの標準ボタンの色（青）がダサい
- codocボタンの色をブログのイメージカラーに合わせたい
- codocボタンの表示文字の大きさを変更したい
などなど。
codocのボタンの色をカスタマイズ
CSSやHTMLが多少わかるようになると、Chromeの検証機能を使って自分でCSSを確認してcodocボタンの表示色などをカスタマイズするヒントが得られます。
本記事は、そうやって調べて作成したcodocボタンの表示カスタマイズ用のCSSコードの自分用の備忘録を、
- Chromeの検証機能で調べるのは面倒
- コピペできるコードで簡単に色を変更したい
という人向けの記事としてまとめたものです。
調べる時間を節約したい人向けの有料記事となりますのでご了承ください。
はてなブログ,codoc連携の表示ボタンはCSSでカスタマイズ可能！
結論から言うと、はてなブログと codoc連携機能を使った、codocボタンの表示はCSSでカスタマイズ可能です。
実際の表示イメージを比較したものがこちら。
codoc標準のボタンは、割とどぎつい、目立つ青色ですが…
- 表示カスタマイズ前
codocボタンの標準表示（無加工） - 表示カスタマイズ後
参考：https://simplelifenavigation.com/entry/blog-codoc
このように、codocボタンの色を、ブログのメインカラーに合うように変更することができます。
はてなブログでcodocのボタン表示色などを変更、カスタマイズするCSSコード
codocのボタン表示色などをカスタマイズするCSSコードは下記に記載のとおりです。コピペして使うことができます。
CSSの色コードの部分（例：#ffffff ）を、ご自身のブログのイメージカラーの色コード（参照：HTMLカラーコード）に変更して利用してください。（ピンクなら #ffc0cb にする）
なお、カスタマイズ（バックアップ含む）は自己責任で行ってください。
はてなブログの管理画面を表示し、
ブログの管理画面から、 ダッシュボード＞ デザイン＞ カスタマイズ＞ デザインCSS に進んでください。
そして、次のコードを既存のコードの下部に追記してください。
