ヨメレバ・カエレバのスマホ対応 ユーザーさんが考えてくれたカスタマイズまとめ

当ブログの記事に共感していただけたら、また読みに来ていただけると嬉しいです。読んでくれる方の数が多くなると、更新するヤル気に繋がります(^^)

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

ずっとほったらかしにしてあった、ヨメレバカエレバ系サービス。さすがに色々ガタが出始めているので、手を入れています。

当方ではスマホ対応を全くしていないのですが、ユーザーさんが色々なカスタマイズ方法を考えて、公開してくれています。本当に助かります。ありがとうございます。

スポンサーリンク

カスタマイズ方法

Amazlet風-2(cssカスタマイズ用)というデザインに、外部CSSを当てることで、ヨメレバ・カエレバ系サービスのデザインをカスタマイズできます。

WordPressやMovabletypeといったCMSでは、スタイルシートを簡単に編集できます。無料ブログサービスでも、スタイルシートを編集できるものが多いです。

なお、バリューコマースやもしものような、アフィリエイトコードの中にトラッキング用imgコードがあるタイプだと、表示が崩れてしまうケースが多いです。

先頭に入れてあげると、良いようです。

カスタマイズデザインの紹介

カエレバ、ヨメレバ両方に対応していて、レスポンシブデザインで使えるカスタマイズ例をリストアップさせていただきました。

スマホとPCで分かれているものでも、メディアクエリーで分岐すれば利用できます。その方法もメモしておきました。

#1 主婦ライフさん

主婦ライフさんのカスタマイズ。Stingerでの利用を前提に紹介されていますが、レスポンシブでも利用できます。「まずひとつめのコード記載」コードと、「2か所目の記載コード」の部分を

の中に書いたものを、style.cssに追記すれば機能します。

【参考】 コピペで完了!STINGER5でヨメレバ・カエレバのカスタマイズ

#2 mbdbさん

mbdbさんのカスタマイズ。シンプルなコードになっていて、お勧めです。

【参考】【カエレバ/ヨメレバ専用】レスポンシブな紹介リンクにするためのCSS

#3 Com2Blogさん

Com2Blogさんのカスタマイズ。

【参考】ヨメレバ・カエレバのCSSカスタマイズ 解説つき

#4 Yukihy Lifeさん

Yukihy Lifeさんのカスタマイズ。シンプルな感じ。

【参考】ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ!

#5 いつ俺さん

いつ俺さんのカスタマイズ。レスポンシブの場合、スマートフォン用CSSは、

の中に書けばOKです。

【参考】コピペ一発!はてなブログでカエレバ・ヨメレバをオシャレにカスタマイズ!

▼▼▼▼

もし「自分もオリジナルのCSSを公開している」という方がいましたら、@kankichiまでご連絡ください。追記させていただきます。(レスポンシブ対応、ヨメレバ・カエレバ両方に対応しているものに限ります)

外部のCSSを当てなくても、スマートフォン対応できるデザインを、公式デザインとして導入したいと考えています。技術的にできるのかな?

今日のわかった

公式デザイン対応もしたいけど、メディアクエリが使えないか……。やっぱり外部からCSSを当てるしかないのかな?

関連記事

関連記事

スポンサーリンク

当ブログの記事に共感していただけたら、また読みに来ていただけると嬉しいです。読んでくれる方の数が多くなると、更新するヤル気に繋がります(^^)

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローしていただけると、ブログ更新を見逃しません

push7 feedly
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です