THE EASY-GOING LIFE★★

THE EASY-GOING LIFE★★

気ままな穏やかな毎日を過ごしたいニャー子の日記

【スポンサーリンク】

ヨメレバ・カエレバの導入とカスタマイズが完成~♪

こんばんは!ニャー子です(*゚▽゚)ノ

 

先日ハゲちゃんがテーブルからどいてくれたあと、3時間ほど掛けてヨメレバとカエレバのカスタマイズが完成しました+゚(⊃ω・`)゚

 

すでにここ何日かでヨメレバ・カエレバの導入はしてみていたのですが・・・

 

CCSとかよくわからんし、カスタマイズはしなくていいかなぁ~と思っていたのですが、いろいろな方のブログを拝見していると、やっぱりカスタマイズしておいたほうが見やすいなぁ~と思って、昨日ちまちまと作業しておりました。

 

カスタマイズのコード?を公開してくださっているブログはたくさんあったのですが、

私はこのブログを書き始めたときに、PCのデザインを自動的にスマホにも適応してくれるレスポンシブデザインというやつにはしていなくて・・・

 

PCはPC、スマホはスマホでデザインのカスタムしてしまっていたので、この方のブログを参考にさせて頂いてヨメレバ・カエレバのカスタマイズをしました。

シンプルで可愛いデザインも気に入っています♪

 

www.yukihy.com

 

レスポンシブにしなかったのをすっかり忘れていたので、レスポンシブのコードを入力して、コードがそのまま本文に出てきちゃったりとか・・・、スマホのほうが変わらないなぁ・・・とか30分くらいやってしまった。笑

 

というか、まずはすでに挿入してしまっていたヨメレバ・カエレバの商品リンクを、CCSカスタマイズに対応できる『amazlet風-2(ccsカスタマイズ用)』というデザインのコードに直して挿入しなおさなきゃいけなかったので・・・

 

この修正作業が一番しんどかったです。。。

 

 

一通り修正し終わって、早速ヨメレバ・カエレバのカスタマイズ!

こちらは、カスタマイズのコードを公開してくれている心優しいブロガーさんの記事からコピペするだけなので楽チンです★

 

ゆきひーさんのブログからコードをコピーして使用してみると・・・

f:id:yu-ko-simpleandlovely:20170526012601p:plain

やったぁ!

可愛くなったヽ(=´▽`=)ノ

感動ぉぉぉお!!

 

・・・でもなんかリンクがナナメになってしまいました。笑

 

またまたネットサーフィンして色々見てみると、同じように崩れてしまうかたもチラホラいらっしゃる様子。。。

デザインとかで使用しているコードが影響しちゃったりするんでしょうか?

 

まあ、良くわからなかったんですが・・・

f:id:yu-ko-simpleandlovely:20170526012642p:plain

上の赤い四角のところに、

..shoplinkrakuten img{display:none;}
.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}

というコードを追加。

 


.shoplinkyahoo img{display:none;}
.shoplinkrakuten img{display:none;}
.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

  ↑こんな感じになるようにしました。

 

 

そうすると・・・

f:id:yu-ko-simpleandlovely:20170526012614p:plain

 うおぉぉぉぉー!

綺麗に並んでる!!

 

ナナメにずれてるのも可愛いと言えば可愛いですが、やっぱり真っ直ぐのほうが見やすくっていいですね。笑

 

 

あとは、わたしは『もしもアフィリエイト』のヤツで商品リンクを作っているので、7net使えるので、せっかくだから7netのリンクも貼りたくて・・・

 

でもこのコードのままだと、7netだけリンクが反映されない?というか、7netだけ外枠ないしぼんやりしてるし・・・みたいな悲しい感じになってしまっていたので、こちらも少しコードを変更しました。

 

f:id:yu-ko-simpleandlovely:20170526012749p:plain

 デフォルトだとヤフーか価格コムになっています。

 

f:id:yu-ko-simpleandlovely:20170526012824p:plain

紫よりも青が良かったので、四角で囲った価格コムのところを、

 .shoplinkseven

に変更しました。

 

これで、上の画像みたいに、7netも外枠つきのリンクになるようになりました♪

 

 

スマホのカスタマイズのほうは、商品リンクは横並びではなくて縦に並ぶので、7netのところだけPC版と同じように変更しました。

f:id:yu-ko-simpleandlovely:20170526012844p:plain

.shoplinksevenに変更!!

 

 

時間掛かってしまったけど、私のブログもなんとかヨメレバ・カエレバのカスタマイズ完成!!

 

ccsだとかHTMLだとか、全くよくわかっていないんですけど、今の時代ネットで殆ど何でも検索して解決できるので、下手の横好きですが、『私もWEBデザインしちゃってるぜ!』みたいな気分にほんのり浸ることができて嬉しいです。笑

 

無料で貴重な情報を公開してくださっているブロガーさんたちに感謝ですね!

 

ゆきひーさん、本当にありがとうございました♪

 

ゆきひーさんのブログ、Yukihy Life では、他にもはてなブログのカスタマイズをわかりやすくまとめてくださっています!

私もこれからも参考にさせていただきたいと思います★

www.yukihy.com

【スポンサーリンク】