ずっとほったらかしにしてあった、ヨメレバ・カエレバ系サービス。さすがに色々ガタが出始めているので、手を入れています。
当方ではスマホ対応を全くしていないのですが、ユーザーさんが色々なカスタマイズ方法を考えて、公開してくれています。本当に助かります。ありがとうございます。
カスタマイズ方法
Amazlet風-2(cssカスタマイズ用)というデザインに、外部CSSを当てることで、ヨメレバ・カエレバ系サービスのデザインをカスタマイズできます。
WordPressやMovabletypeといったCMSでは、スタイルシートを簡単に編集できます。無料ブログサービスでも、スタイルシートを編集できるものが多いです。
なお、バリューコマースやもしものような、アフィリエイトコードの中にトラッキング用imgコードがあるタイプだと、表示が崩れてしまうケースが多いです。
|
1 |
.kaerebalink-link1 img, .booklink-link2 img{display:none;} |
を、先頭に入れてあげると、良いようです。
カスタマイズデザインの紹介
カエレバ、ヨメレバ両方に対応していて、レスポンシブデザインで使えるカスタマイズ例をリストアップさせていただきました。
スマホとPCで分かれているものでも、メディアクエリーで分岐すれば利用できます。その方法もメモしておきました。
#1 主婦ライフさん
主婦ライフさんのカスタマイズ。Stingerでの利用を前提に紹介されていますが、レスポンシブでも利用できます。「まずひとつめのコード記載」コードと、「2か所目の記載コード」の部分を
|
1 2 3 |
@media only screen and (min-width: 599px) { } |
の中に書いたものを、style.cssに追記すれば機能します。
【参考】 コピペで完了！STINGER5でヨメレバ・カエレバのカスタマイズ
#2 mbdbさん
mbdbさんのカスタマイズ。シンプルなコードになっていて、お勧めです。
【参考】【カエレバ/ヨメレバ専用】レスポンシブな紹介リンクにするためのCSS
#3 Com2Blogさん
Com2Blogさんのカスタマイズ。
#4 Yukihy Lifeさん
Yukihy Lifeさんのカスタマイズ。シンプルな感じ。
【参考】ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！
#5 いつ俺さん
いつ俺さんのカスタマイズ。レスポンシブの場合、スマートフォン用CSSは、
|
1 2 3 |
@media screen and (max-width: 599px) { } |
の中に書けばOKです。
【参考】コピペ一発！はてなブログでカエレバ・ヨメレバをオシャレにカスタマイズ！
▼▼▼▼
もし「自分もオリジナルのCSSを公開している」という方がいましたら、@kankichiまでご連絡ください。追記させていただきます。(レスポンシブ対応、ヨメレバ・カエレバ両方に対応しているものに限ります)
外部のCSSを当てなくても、スマートフォン対応できるデザインを、公式デザインとして導入したいと考えています。技術的にできるのかな？
コメント