CSS初心者でも気合いで完成!カエレバ・ヨメレバのCSSカスタマイズ!アルバトロステーマで使用したCSSはこれ!

2015-11-07_17h12_03-vert

どうもNon太(@LoveWifeLives)です。

ブログを始めて数ヶ月。アフィリエイトリンクで使用させてもらってるカエレバヨメレバ。こんなにすごいサービスを提供してくれているのはわかったブログを運営しているかん吉さんです。(もちろん僕なんか面識はありませんが。)

このカエレバとヨメレバを使い始めて間もなくカスタマイズが出来ることを知ったものの、CSSやらhtmlやらと言われてもさっぱり分からないので、したい気持ちはあるものの出来ないままで放置する事3ヶ月。

ついに今回カスタマイズに挑戦してみました。

終わってみれば、出来る人にしてみればものの5分ぐらいで出来そうなカスタマイズでしたが、初めてのことだったので超時間がかかり7時間でやっと納得のいくカスタマイズが出来ました。(一部出来ないままのところがあるのですが、そんなに見栄えが悪いわけではないので、とりあえずこのままでいいと思ってます。)

この記事を書いた当時は、CSSコードのことが良く分からないままに書いていたため、お見苦しい文章があるかもしれません。

笑いながら読んでもらえれば幸いです。

それぞれの見出しの最後に、追記として付加説明したりコードを表示しています

スポンサーリンク

参考にしたカエレバ・ヨメレバカスタマイズのブログ

色んなブログでカスタマイズの方法が記事にされているのですが、一番最初に目にしたのはこちらでした。

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

ちゅんこさんが書いているShufulifeというブログで書かれた記事です。

実際、この記事を参考にしてカスタマイズされている方も多いと思うのですが、WordPressのテーマがSTINGER5のカスタマイズになっているようで、僕のテーマであるアルバトロスではなかなかコピペだけではうまくいきませんでした。

2015-11-07_16h11_52

とShufulifeに書かれているのを見て、『めっちゃシンプルでいいやん!』と思い、分からないながらCSSをコピペして、自分のスタイルシートに書いてみたんです。

書かれていたCSSはこちらでした↓↓↓

/*————————————–
ヨメレバ・カエレバ
————————————–*/
.booklink-box, .kaerebalink-box{
width:85%;
margin: 1em 0 1em;
padding: 5%;
border:double #d2d7e6;
overflow: hidden;
font-size:small;
border-radius:2px;
}

.booklink-image, .kaerebalink-image{
margin:0 0 15px 0;
}
.booklink-image img, .kaerebalink-image img{
display:block;
margin:0 auto;
text-align:center;
}

.booklink-info, .kaerebalink-info{
text-align:center;
line-height:120%;
overflow: hidden;
}

.booklink-name, .kaerebalink-name{
font-size:16px;
margin-bottom:14px;
line-height:1.2em;
}

.booklink-powered-date, .kaerebalink-powered-date{
font-size:8pt;
     margin-top:10px;
line-height:120%;
}
.booklink-powered-date, .kaerebalink-detail{
margin-bottom:15px;
}

.booklink-link2, .kaerebalink-link1{
margin-top:20px;
}

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom{
width:90%;
height:15px;
overflow:hidden;
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color:#ffffff;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
margin:0 auto 5px auto;
padding:10px 0px;
text-align:center;
}

.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover{
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
}

.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active{
position:relative;
top:1px;
}

.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom a{
display:block;
cursor:pointer;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
}

.shoplinkamazon a{
color:#FF9901;
}

.shoplinkrakuten a{
color:#c20004;
}

.shoplinkkindle a{
color:#007dcd;
}

.shoplinkyahoo a{
color:#7b0099;
}

.booklink-footer{
clear:left;
}

CSSの上の方にコピペするようにと書かれているので、あんまり良く分からないまま適当な位置に貼り付けてみたら、今まであった記事がこんな風になってしまいました。

2015-11-07_16h16_02

Amazonや楽天市場の文字が切れてるし、縦にリンクが並ぶという…。僕は横にリンクを並べたいんです!

多分貼り付けた位置が悪い気がするのですが、どこだったら大丈夫なのかが分かりませんでした。なので諦めました。

次に見つけたのがこちら。

ヨメレバの見た目をカスタマイズしてボタンっぽくしたからクリック率上がるかな[CSS紹介]

えむ氏さんが書いているえむ氏のログに書かれていた記事です。

こちらはヨメレバとカエレバが別々にカスタマイズされてて、干渉したからさらにCSSをカスタマイズしてその干渉も抑えられたとのことで、『おぉ!』と思ったのですが、Amazonや楽天のリンクがこんな風に表示されてました。

2015-11-07_16h52_36

3つが綺麗に並んでるんですが、ちゅんこさんShufulifeで書いているように、リンクボタンの背景は白抜きに色文字が良かったんです。なので、こちらも諦めました。

カスタマイズされたものをカスタマイズする力は僕にはないんです…。

というか、この時はカエレバとヨメレバを別々にカスタマイズしていくってどうやったらいいねん?という事態になってました。

さらに、次に見つけたのがこちら。

カエレバをCSSで装飾してみた

okutaniさんが書いているvdeepに書かれていた記事です。

こちらに書かれているのは、カエレバのカスタマイズでAmazonと楽天市場の2つに絞って書かれています。

見てみるとボタンもシンプルだし、Amazonはグレーで楽天は赤色の文字。僕好みになってました!ということで、okutaniさんが公表してくれているCSSをコピペしてみました。

とりあえずまた場所が分からないまま、同様にコピペをしてみましたが、今までがレイアウトがグチャグチャになってしまってばっかりだったのであまり期待はしてませんでした。

が、このokutaniさんのCSSは、まさかのAmazonと楽天は綺麗なボタンになり、Yahoo!だけがはみ出るというレイアウトになりました。

こんな感じ↓↓↓(僕が今欲しいエルゴトロン…)2015-11-07_17h09_30

ここでやっとCSSはいじればちゃんと反応するんだ!と手応えを感じられた瞬間です。

今まで僕がカエレバを使う時は、Amazon・楽天・Yahoo!ショッピングの3つでやっていたのですが、実際Yahoo!ショッピングでクリックされることってほっとんどなかったんです。

このレイアウトになったのを見て、もしYahoo!ショッピングを外せばAmazonと楽天で綺麗なカエレバになるんじゃないか?と思いました。なので、この機会にYahoo!ショッピングはカエレバのリンクに入れない事に決めました。

そして再度リンクを作ってみると…2015-11-07_17h12_03はい!綺麗に並びました。

ただ…上記のCSSを一体どこに貼り付ければいいのやら…という状態。貼り付けたは良いものの、ホントにその場所で合っているのか?状態。

【外観】⇒【テーマの編集】と進み、スタイルシート(style.css)と呼ばれるところの上部の適当なところにCSSをペーストしていたのですが、カエレバリンクはうまく機能している状態でした。

しかしTOPページに戻ってみると、まさかのヘッダーがバクっている事態に!

一番最初のスタイルシート(style.css)はコピーしていたので、とりあえず一度戻すことにしました。

これでまた振り出しに戻りました。

スポンサーリンク

スタイルシートで貼り付けた場所

もう僕の中ではokutaniさんが作っているCSSしか目に入らず、後はどこに貼り付ければいいのかを調べていました。

調べて行くうちに、PC上での表示とスマホ表示として、それぞれでカスタマイズしないといけない事もわかり、特にスマホの場合は

@media only screen and (max-width: 480px){

と書かれているところよりも下部に、スマホ用のコードを書けと書かれているじゃありませんか! そうすることで、スマホで見た場合も綺麗に表示されるようになるとのこと。

これをヒントにアルバトロスのスタイルシート(style.css)をひたすらじっくり見て行きました。 すると出てきたコード。

/*********************
DESKTOP ONLY
*********************/
@media only screen and (min-width: 1100px)

ここがデスクトップ用なんじゃないか?と思いつつ、ここの下部にokutaniさん仕様のCSSコードをコピペしてみました。

すると、ヘッダーもバクることなく、綺麗にカエレバのリンクもうまくいくようになりました。

これでカエレバは完成です。

ですが、最初の頃に思ってたように、カエレバが出来てもヨメレバが出来てなければカスタマイズが完成しないのに、カエレバだけ出来てしまった…どうしよー!と思ってたのですが、まさかのオリジナルで解決してみました。

2016年5月追記

僕が使用しているアルバトロスには子テーマが用意されています。

子テーマ内のスタイルシート(style.css)に以下を記述すればPC上の表示は問題ありません。(スマホ用のためのコードは後述)

親テーマと子テーマの意味も分かっていなかったので、親テーマのスタイルシートのどこに書こう…と悩んでましたが、子テーマがあれば記述するだけでOKなのでありがたいですね。

ヨメレバのCSSはこちらで解決!

カエレバは何とか解決しました。次にカスタマイズしないといけなかったのはヨメレバ

カエレバでコピペしたCSSのままでヨメレバを試すと…(僕が次読もうと思ってる本)2015-11-07_17h47_00

こんな風にレイアウトがグチャグチャなんです。

やはりカエレバと同時にヨメレバもカスタマイズ出来るCSSにしておけば良かったと思いました。が、ここであることに一つ気が付きました。

カエレバのCSSは【kaerebalink】というコードが多用されているんですが、一方ヨメレバのCSSには【booklink】というコードが使われているんです。

ということは、

『これはもしかして、【kaerebalink】と書かれているコードを全て【booklink】に書き換えればいけるんじゃないか?』

という考えに至りました。

さらには、カエレバはAmazon・楽天の2つでしたが、ヨメレバはAmazon・楽天ブックス・kindleの3つ。ということで、

『コードの下の方にAmazonと楽天ブックスの記述があるから、その後ろにkindleを付けたらいけるのではないか?』

という仮説が立ちました。そして実践してみました。

2015-11-07_17h48_07

まさかのビンゴでした。

残念ながら、Amazon・kindle・楽天ブックスと3つ一緒には並びませんでしたが、以前よりもかなり綺麗に見栄え良く出来たのでこれで良しとします。

今のところ、このCSSコードでヘッダーが壊れたりもしていませんし、カエレバもヨメレバも綺麗にレイアウトされています。

2016年5月追記

こちらも子テーマのスタイルシートに記述するだけでOKでした。

コードはこちら▼

ヨメレバのコードもカエレバで書いたコードの下にそのまま貼り付けてOKです。

スマホ用CSSコード

これでカエレバもヨメレバもPC上の表示は何とかうまく収まりました。

次はスマホ用でも綺麗に見れないと意味がありません。スマホコードを入力しないままの表示はこんな風に表示されてました。

IMG_4544a

Amazonや楽天リンクに枠は出来ているものの、縦に並んじゃってるし不細工極まりなかったです。

okutaniさんのカエレバをCSSで装飾してみたの記事内にもこう書かれてます。

2015-11-07_18h00_50

と、言うようにそのままだとスマホ用レイアウトが壊れちゃうんです。

なので、自分のスタイルシートの中で、【@media only screen and (max-width: 480px) {】と書かれている場所を探しました。

するとちゃんとありました。スタイルシートのだいぶ下の方に。そして、okutaniさんが記述してくれているCSSをそのままコピペします。すると、簡単にレイアウトが綺麗になりました。

IMG_4545a

さらに、先ほどのスマホコードはカエレバ用なので、同じようにヨメレバ用のコードも作って貼り付けます。

先程の要領で、【kaerebalink】と書かれているコードを全て【booklink】に書き換えて、kindleのコードを付け加えるだけです。

このコードをカエレバのスマホ用コードの後ろに貼り付けると、ヨメレバも綺麗にレイアウトされて表示されました。

IMG_4546a

こちらは綺麗に縦に3つ並ぶんですね。笑

これで完成です。

2016年5月追記

上記は親テーマで記述する時に【@media only screen and (max-width: 480px) {】を探していたわけです。

ですが、子テーマでもコードを指定してスイタルシートに貼り付ければうまく機能してくれます。

子テーマのスタイルシートに記述したコードはこちら▼

簡単に言うと、子テーマのスタイルシートに【@media only screen and (max-width: 480px) {】を書いて、さらにその下にカエレバ・ヨメレバのコードを書くことで、幅が480pxまでの時はこの表示にしてねと言っている感じです。

だから、通常のコードの場合は最後の【}】が一つなのに対して、今回のコードは【@media only screen and (max-width: 480px) {】を閉じるための【}】と、カエレバ・ヨメレバのコードを閉じるための【}】と2つ並んでいるのが分かります。

言葉にすると難しいですが、オリジナルでカスタマイズをしながら半年ぐらいかかってこの辺の意味を知りました。w

カエレバ・ヨメレバCSSカスタマイズ / まとめ

今回覚えてみれば簡単だったものの、このカスタマイズだけで7時間もかかってしまいました。ですが、自分の納得のいくレイアウトになったので良かったです。

僕はPC関係の仕事についたことがなかったので、CSSにしてもhtmlやらいまだに良く分かっていない事の方が多いです。俗に言う全くの素人です。

そんな僕でも出来たのは、先人の方々のブログがあったからにほかなりません。

特にokutaniさんのブログがなかったらこのカスタマイズも諦めてたと思うので、勝手に感謝の気持ちを持ってます。

こうやって一つずつブログにしても階段を登っていけたらいいなと思います。

次に書いた記事はこちら⇒旅行やホテルのリンク作成に便利な「トマレバ」をカスタマイズしてみた!リンクボタンの見栄えが良くなるCSSはコレ!

旅行やホテルのリンク作成に便利な「トマレバ」をカスタマイズしてみた!リンクボタンの見栄えが良くなるCSSはコレ!

2015.12.01
スポンサーリンク

4 件のコメント

  • 以前僕はSTINGER5をテーマにしていた時に、やはりちゅんこさんの記事を参考にしてカスタマイズしていたのですが、つい最近テーマをアルバトロスにしてからはカスタマイズのやり方がわからず諦めていました。
    そんな中調べているとこちらのページにたどり着き、無事カスタマイズすることができ、大変助かりました。
    ありがとうございます。

    • カスタマイズって難しいですよね…
      でも、少しでもお役に立てたようで良かったです!
      コメントありがとうございます!

  • めっちゃ役に立ちました!
    失敗談も書いてくれてたおかげで
    順を追って作ることができたのでこういう手順は勉強になりますね!
    ありがとうございました!

    • 少しでもお役に立っていたなら嬉しい限りです!
      コメントありがとうございます!

  • コメントを残す

    メールアドレスが公開されることはありません。