WordPress、Mac、その他日常で覚えておくべきことを備忘録としてメモしています。

saketorock

css WordPress

カエレバ、ヨメレバ、トマレバのレイアウトデザインをレスポンシブ対応する方法

投稿日:

スマホで閲覧した時、カエレバのレイアウトが崩れる時があります。
たとえばこんな感じに商品の画像が極端に小さくなります。

そこで、カエレバのCSSをレスポンシブデザインに変更しました。
対応すると次のようなレイアウトになります。

今回はその設置方法について備忘録です。
ちなみにカエレバ以外にも、ヨメレバ、トマレバにも対応可能です。

淡々とやり方だけをメモしておきます。

スポンサーリンク

GoogleAdSense

手順1:CSSの変更

CyberduckなどFTPアプリで、自分のサーバーにログイン。
「wp-content」 > 「themes」フォルダと進み、適用中のテーマフォルダを開く。

子テーマを採用していれば、そちらのフォルダを開く。
フォルダ内に「style.css」ファイルがあるはずなのでダウンロードする。
この時、バックアップを必ずとっておく。

「style.css」を開いて、末尾にWordPressテーマのスタイルシートに以下ソースを追記して再び上書きアップロードする。

手順2:カエレバの設定

カエレバ上でのデザイン設定は以下のとおりにする。

  • デザイン:amazlet風-2(cssカスタマイズ用)
  • 画像サイズ:小(トマレバは150px)
  • 「で購入」「で探す」「で予約する」などの文言:なし
  • rel:nofollow(任意)

まとめ

自分用のメモなので、ちょっとここの説明だけではわかりにくいかも。
とにかく早く対応しておけばよかったです。

このサイトさんを参考にしました。ありがとうございます。

GoogleAdSense

GoogleAdSense

-css, WordPress

Copyright© saketorock , 2017 All Rights Reserved.