こんにちは、つばさ（@tsubasa123）です。
年明けから暇な時間を利用してちょっと遊び心のあるページを作成しました。とりあえず完成としましたが、もうちょっとだけ機能にこだわりたいなと思っています。カエレバ・ヨメレバを利用している方、もしよければ遊んでいってください。
まず最初におことわりが
本記事投稿時点で、IEでは意図したとおりに動かないことを確認しています。推奨環境はGoogle Chromeの最新版となっております。遊んでいただける方はChromeで閲覧していただけますようお願いします。Fire Foxも多分大丈夫だと思います。Operaは確認していません。
本サービスはPCブラウザから閲覧されることを想定しています。スマホでも見れなくはないかもしれませんが、めちゃくちゃ使いにくいんじゃないかと思います。PCからご利用いただけますようお願いします。
本サービスで生成したCSSを利用してカスタマイズを行う際にはバックアップを事前に取っておくことをおススメします。戻せなくならないようにお気を付けください。
カスタマイズCSSをカスタマイズしよう！
本サービスの特徴ですが、カエレバのカスタマイズCSSをさらにカスタマイズすることができるようになっております。
具体的には、
- 囲みの枠線の色の変更
- 囲みの枠線の種類の変更
- 囲みの枠線の太さの変更
- 商品名のテキスト色の変更
- 商品名のフォントサイズの変更
- 詳細情報のテキスト色の変更
- デフォルトで用意したボタンデザイン4種から選択
- 各ボタンの枠線・文字・背景の色の変更
- PC、スマホ、レスポンシブの3パターン対応
こんな感じの機能を盛り込みました。ちょっとだけボタンの色を変えたい、枠線の色や太さを変えたい、でもCSSとかよくわかんない！って人がターゲットとなっています。
このままでもいいよ、って方はそのままページ右側にあるエリアからCSSをコピーしていただければ選択したボタンのデザインが適用されるようになると思います。
ご利用中のアフィリエイトサービスごとにボタンのデザインを変更できるようにしていますので、お好きなものだけ変更していただくことも可能です。色々試してお気に入りのボタンデザインを作成してみてください。
使い方
特に難しいことはないと思いますが、簡単に説明を。例えば枠線のデザインをカスタマイズするとします。枠線の種類と太さは特に説明はいらないと思います。それぞれプルダウンのメニューからお好みの値を指定してください。
色の変更ですが、「色」の横にある こんなボタンをクリックしてください。すると、
こんな感じのボップアップダイアログがでてくると思います。左側にはデフォルトで何色か用意されていますので、そちらを選択してもいいですし、さらに右側のパレットから詳細に色味を調整していただくこともできます。
選択した色は真ん中やや下のエリアに反映されます。
お好みの色が決まりましたら、左下の『OK』ボタンを選択してください。すると、
ページ下部にある商品プレビューの枠線に選択した色が反映されるようになっています。他の項目に関しても変更するとプレビューに反映されるようになっていますので、直感的にカスタマイズしていただけると思います。
もちろん、ページ右側のカスタムCSSにも反映されますので、コピペで導入していただければプレビューと同じように表示されます。簡単ですよね。
同じような操作で、各アフィリエイトサービスのボタンの色も変更していただけます。
ここをクリックすると各ボタンの色を変更する画面がでてきますので、お好みでカスタマイズしまくってみてください。リセットしたいときはページをリロードしていただければ最初からやり直すことができます。
あと、とりあえず4種類のボタンデザインを用意しましたが、グラデがかかっている3つ目と4つ目のデザインに関しては色の変更機能は持たせていません。グラデまで指定するとかなり複雑になって使いにくかったので止めました。
デフォルトのデザインは需要がありそうなら増やそうかな、といったところです。
なぜこのサービスを作ったのか
完全なる暇つぶしですね。カエレバ・ヨメレバのデザインCSSコードを公開している方はたくさんいますが、カスタマイズコードをさらにカスタマイズできるサービスはあんまり見かけたことがなかったので作ってみました。
あと「カエレバカスタマイズのブログ」みたいな印象を持ってもらえればうれしいです。ブランディング成功。
懸念している問題
テーマによってはデフォルトでカエレバのデザインが組み込まれているものもあると思いますが、その辺と干渉したらどうなるかを試していません。当ブログではシロマティさんの「Brooklyn」を利用していますが、こちらのテーマでは特に問題は起きませんでした。
もし、遊んでみたけどなんか崩れた、って方がいましたら速やかに戻してください。で、それでもこちらのデザインを使いたいと言っていただける場合はコメント、ブコメ、TwitterのDM等、なんでもいいのでご連絡ください。対応できそうであれば確認して修正方法を考えます。私に対応できる範囲になりますが。
今後の展望
ノープランです。需要がありそうであれば追加の機能拡張を行いますし、需要がなさそうなら次は読者登録ボタンやシェアボタンのジェネレーターを作って様子を見てみようかと思っています。作り方のコツは掴みました、次はもうちょっとキレイに書きたいですね。
あと、プレビューのHTMLも任意の商品で確認できるようにしたらもっと使いやすいかなーと作ってる途中で思ったんですが、結構難しそうなので今回は見送りました。需要があるならがんばります。
さいごに
久しぶりにそこそこな量の自己満コードを書きましたが、やっぱり書いていて気持ちがいいですね。動作保証を最新のChromeに限定しているので暇をみつけてES2015で書き直そうかな。
本当はサブドメにして別サーバで運用しようかと考えたんですが、アクセス解析とかシェアボタンとかOGタグとか自分で用意するのがめんどくさかったのでこのブログに取り込んでみました。HTML編集モードが思ったように動かず苦戦しましたがとりあえずリリースです。試してみてね。
ではでは、最後までお付き合いいただきありがとうございました。
コメント