ヨメレバをカスタマイズしたけれどなぜかボタンがずれる。
CSSの追記で解決できました。。
同じ環境・症状の方は参考になるかも。
※当サイトはWordPressで運用、テンプレートはストークを利用しています。
ヨメレバを追加CSSでデザインをかっこよくする
Amazonや楽天ブックスのリンクを作る場合
『わかったブログ』のかん吉さんの作成したブログパーツ
ヨメレバを利用することが多いと思います。
https://www.wakatta-blog.com/
すごく便利ですが、正直、デザインがちょっと微妙・・？
とおもったんですけど（失礼）
WordPressやはてなブログを利用している方は、カスタムCSSに
ゆきひーさん運営の『yukihylife』で紹介されている
CSSを追記する事で
https://www.yukihy.com/entry/kaereba-yomereba-custom
けいろーさんの運営する
『ぐるりみち。』で使われているようなスッキリとした
紹介ボタンが作れます。
https://blog.gururimichi.com/entry/2017/07/02/192708
↑参考に。
すごく見やすい。
これやりたいですよね。
だけど、ゆきひー さんがシェアしてくれている
CSSを追加してみたところ、ボタンがずれてしまうんですよね。
※ちなみに、レスポンシブをコピペで追記しました。
こんな感じ↓
ずれたボタンを揃えるには？
で、調べたんですが
アズさんのミニマムコラムで改善方法が紹介されていました。
https://www.a-s-blog.com/entry/2017/03/03/200000
|
1 2 3 |
.shoplinkamazon img{display:none;} .shoplinkkindle img{display:none;} .shoplinkrakuten img{display:none;} |
上記を追加CSSのどこでもいいので追記するとオッケーでした。
追加CSSの一番下にいれておきました。
すると・・・
こんな感じ。
まだズレるよって人はチェック
まだズレが改善しないって方は
一応僕がヨメレバでリンク作成している画面貼りますので参考になるかもしれない。
まとめ
どうでしょうか？きちっと表示されましたか？
ヨメレバやカエレバ便利です。
ただ、htmlコードがすごく長くなってしまうので抵抗あるよ という人もいます。
僕もちょっと思ってました。
kindleなければ外せば多少短くなります。
楽天ってなんでか？いつの間にかポイントが溜まってませんか？
本とか端数ポイントでポチりたいとき有るので地味に便利だと思います。
Amazonだけのリンクの場合でも作業効率もかなり上がるので是非、ブログに導入してみてください。
▼ヨメレバ
https://yomereba.com/
導入に際して参考にさせていただきました
かん吉さん
ゆきひーさん
けいろーさん
アズさん
ありがとうございました。