ヨメレバ・カエレバのスマホ対応 ユーザーさんが考えてくれたカスタマイズまとめ
ヨメレバ・カエレバ・ポチレバ
ずっとほったらかしにしてあった、ヨメレバ・カエレバ系サービス。さすがに色々ガタが出始めているので、手を入れています。
当方ではスマホ対応を全くしていないのですが、ユーザーさんが色々なカスタマイズ方法を考えて、公開してくれています。本当に助かります。ありがとうございます。
カスタマイズ方法
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を当てなくても、スマートフォン対応できるデザインを、公式デザインとして導入したいと考えています。技術的にできるのかな？
関連記事
ヨメレバ・カエレバ・ポチレバカエレバ系 セブンネット×もしも対応、rel=”nofollow”など
ヨメレバ・カエレバ・ポチレバヨメレバでKindle版書籍を紹介できるようになりました
ヨメレバ・カエレバ・ポチレバカエレバ風にプログラムミス リンク作り直しをお願いします。
ヨメレバ・カエレバ・ポチレバ2016/6/23 11時-21時に生成したアマゾン・アソシエイトリンクに、商品番号(ASIN)が入っていない可能性があります。差し替えをお願いします #kaereba
ヨメレバ・カエレバ・ポチレバ【お詫び】ヨメレバ・カエレバのユーザーデータが消えてしまう件
ヨメレバ・カエレバ・ポチレバ
