僕のブログでもちょこちょこ紹介した商品が売れているのですが、商品を紹介した時のデザインがいまいち好みじゃなかったので変更することにしました。
デザインのビフォーアフター
before
after
写真が小さくて少し見づらいですが、見栄えの良さが全然違いますね。デザイン性が高まりました。よかったよかった。
変更方法
こちらのサイトを参考にさせていただきました。
コピペで完了！STINGER5でヨメレバ・カエレバのカスタマイズ
もともとはブログのテンプレがSTINGER5を使用していることが前提でしたが、僕が使用しているブログもSTINGER5から派生したものなので大きな問題はなく変更できました。
１、管理画面→外観→テーマの編集→スタイルシート (style.css)を開く。今回も万が一のためにページを複製して開いておく。
２、文字に起こすのが難しいのであれですが、上記のリンクに従いコードを指定の箇所に貼り付けていく。
３、完了！
こうして文字にしてみると簡単ですね。
１点引っかかった落とし穴があるのですが、作業完了後デザインが反映されたか確認していると、PCでは問題なく表示されているのに僕のスマホでは反映されていません。beforeの画像の状態のままです。
コードを貼る位置を間違えたかとか、コードが完全にコピペできていなかったかとか色々悩んで１時間くらい修正に格闘していたのですが、原因はスマホのキャッシュが残っていたことでした。
なのでスマホの設定からストレージ→キャッシュを削除で完了。
無事にスマホでも綺麗なデザインで見ることができました。よかったよかった。
実際の商品紹介がこんな感じ。
今回、概ね満足のいく修正結果になったんですが、スマホで見た時に商品の画像が端っこに寄ってしまうのが唯一残念。多分コードに間違いはないからどっか他のところを直せば画像も真ん中にいくと思うのですが原因が掴めない！奥が深いですね！なかなか楽しい！
2017/4/20追記：先日4/12に追記した方のコードを設置したところいい感じに修正ができました。今後はそっちの方が良いです。
他にも参考にさせてもらったサイト
カエレバの基本的な使いかたが載ってる。
ブログパーツ【カエレバ】の基本的な使い方
「カエレバ カスタマイズ」で検索すると１番上に出てくる。今回コードを頂いたサイトはこちらのリンクから辿り着けました。
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！
まとめ
キャッシュは曲者。
今回の作業をしていると時間があっという間に過ぎた。さっきのアドセンスの作業と合わせてなんやかんや４時間くらいずっと作業をしてましたがあっという間でした。気づいたら時間が過ぎてた。これが夢中になっているということでしょうか。まあ良いことです！
ということでもう日が変わりそうなのでこの辺でおしまいとします。
おしまい！
追記2017/4/12
新しく制作した友人のブログで、カエレバのカスタマイズをしようとしたところなかなか上手くいかなかったのですが、解決したのでメモ。ジラフがインストールする時期によって少しずつアップデートされてるみたい。もしくは前回の方法を施工した後にキャッシュを削除しずに新しいコードを使用したので、キャッシュ削除してたら前回の方法でもできたかもしれんです。
今回は上記でもリンクを貼ったこちらのページのコードを使用させていただきました。
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！
ジラフはレスポンシブのテーマなので、リンク先の下の方にある「レスポンシブ」用のコードをコピペします。
コピペする位置は、
「外観」「テーマの編集」「スタイルシート（style.css）」の上の方、領域１に入れます。
/***************************************************
↓ 領域1 ここからすべての端末で適用 ↓
****************************************************/
と書いてあるのでこれのすぐ下に貼ればオッケーです。PCもスマホもキャッシュを削除してから確認すればカスタマイズ完了です。
コメント