カエレバの使い方とCSSをいじる前の基礎知識。初心者がカエレバCSSカスタマイズに挑戦。

カエレバの使い方とCSSをいじる前の基礎知識。初心者がカエレバCSSカスタマイズに挑戦。

やあ、カエレバ挑戦者諸君。

もともとCSSとかに詳しいのかい?
だったらすぐ他のページに飛んだほうがいい。

とても無駄な時間になってしまうからね。

「しーえすえす…?かえれば…?」って言う人は見たほうがいいかもね。
もしかしたら何か役に立つかもしれないからね。


 

ども、カエレバ初心者のシゲ(@piece_hairworks)です。

▼実は先日このような事件が起きました。


商品紹介ブログパーツでおなじみの、かん吉さん(@kankichi)が運営するWebサービス「カエレバ」

「カエレバ」ってのはこういうサイトです。

スクリーンショット 2015-07-11 19.06.40

 

他にも書籍紹介のヨメレバ、iPhoneアプリ紹介のポチレバ、宿やホテルを紹介するトマレバがあります。

かん吉さん(@kankichi)いつもお世話になっております。ありがとうございますm(_ _)m

普通に使うくらいだと難しいことはそうないのですが、今回の事件はオリジナルにカスタマイズしようとして大失敗したパターンです。おくたにさまーには本当にお世話になりました。無事にカエレバを利用できています。

使えるようになったからといって「あーよかったよかった」なんて安心して、また同じことが起こった時に対処できるよう自分なりにまとめておこうと思いました。

今回のことで僕なりにまとめた「カエレバ」の使い方から、CSSのカスタマイズ方法です。

まずはカエレバの前にアフィリエイト登録

「カエレバ」は商品を紹介するためのブログパーツなので、事前に楽天アフィリエイト・Amazonアソシエイトのアフィリエイトパートナー登録が必要です。

アカウントをお持ちでない方は必須なので、まずは登録からどうぞ。またもやおくたにさまー( @okutani_t )の記事を利用させていただきました。


コレがすんでないと「カエレバ」ってなんじゃい!ってなるので、まずはこれを完了させてください。

続いてカエレバをつかって商品を紹介する方法

アフィリエイト登録がすんだら、そのIDをつかって「カエレバ」でブログで商品を紹介する方法です。

…これもおくたにさまーにお任せw

Avatar image
ワイフ
っていうか自分でやるんじゃなかったんかい!
Avatar image
シゲ
いや、おくたにさまーのほうが詳しいから。これみたら基本的なところはわかると思う。
Avatar image
偶然の産物
やはりパクリメディア…。

カエレバを利用する際の注意点

ここからが注意するところ。

そもそも僕は「カスタマイズなんてしないよー、素人だもん」と思っていたので、ずっと「カエレバ」のデザインをいつも【amazlet風(改)-1】に設定してました。

▼こんな感じで。

スクリーンショット_2015-07-11_8_31_42

これでやっても特に問題はありません。

▼こんな表示になるだけなので、使用上問題はございません。

スクリーンショット 2015-07-11 19.06.11

でも今回おくたにさまーの記事を元に、カエレバをCSS装飾するに当たって大きな問題が…。

まずはデフォルトのカエレバのレイアウトを確認してみます。デザインは「amazlet風-2(cssカスタマイズ用)」を選択しています。

引用元:カエレバをCSSで装飾してみた | vdeep

マジか!これは結構事件です!

Avatar image
ワイフ
何が問題なの?
Avatar image
シゲ
今までamazlet風(改)-1でやっていた僕は、おくたにさまーのCSSカスタマイズがうまく反映されないのだ!今までのリンクを全て貼り直し…。
Avatar image
偶然の産物
それ、結構めんどくさい奴じゃ…。

そうなんです。他にも方法があるのかもしれませんが、僕は素人なんでわかりません。昨日1日かけて全ての記事のカエレバのリンクをamazlet風(改)-1から「amazlet風-2(cssカスタマイズ用)」へ貼り直しました。

記事数が少ないのでまだ良かったですが、コレが何百記事にもなると相当骨が折れる作業だと。

これからカエレバのリンクを貼っていくつもりの方は、必ず「amazlet風-2(cssカスタマイズ用)」の方を選択してリンクを貼っていくことをオススメします。

そうすればCSSを書き換えただけで、全てのカエレバリンクがオリジナルのリンクになるので、張替えの必要がありません。

他にも方法があるかもしれませんが、僕は知らないのでコレを最初にやっておいたほうがいいのではないかと思いました。

ポイント!

「amazlet風-2(cssカスタマイズ用)」の方を選択してリンクを貼っていく。

なんかうまいやり方を知っている人は教えて下さいw

そしてカスタマイズするときはバックアップを取ったほうがいいです。そうしないとおかしなことになった時に直せなくなってしまいます。ってまろさんが言ってましたw

おくたにさまーのカスタマイズのコピペ

おくたにさまーの記事のコードをそのまま使うとこうなります。

▼おくたにさまーの記事で紹介されてる、カエレバCSSカスタマイズはこんな感じ。

kaereba-css2-580x203

▼スマホの見え方はこんな感じ。

kaereba-css3

こんなカスタマイズがシンプルで素敵ー!おくたにさま最高〜!って人は以下のコードをコピーして、【ダッシュボード】→【外観】→【CSS編集】から丸々コピペすればオッケー。

▼僕がやったようにこんな感じに。

スクリーンショット 2015-07-08 18.25.59

▼このコードを丸々コピーします。スマホも足してありますし、幅も変えてあるのでこれだけコピペでオッケー。

.kaerebalink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 15px;
  overflow: hidden; /* float解除用 */
  margin-bottom: 20px;
}
.kaerebalink-image {
  margin-right: 18px;
  float:left;
}
.kaerebalink-image img {
  box-shadow: 0 0 1px 1px #ccc;
}
.kaerebalink-info {
  font-size: 14px;
  margin: 0;
  overflow: hidden; /* float解除用 */
}
.kaerebalink-name {
  font-size: 18px;
  margin-top: 2px;
}
.kaerebalink-detail {
  margin-top: 5px;
}
.kaerebalink-powered-date {
  font-size: 12px;
  margin-top: 5px;
}
.kaerebalink-link1 {
  font-size: 16px;
}
.shoplinkamazon, .shoplinkrakuten {
  float: left;
  width: 40%;
  text-align: center;
  margin: 17px 10px 0;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-shadow:1px 1px 1px rgba(0,0,0,0.3);
  background: -moz-linear-gradient(top,#FFF 0%,#EEE);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
}
.shoplinkamazon a{
  color: #565656;
}
.shoplinkrakuten a{
  color: #FF0040;
}
.shoplinkamazon a, .shoplinkrakuten a {
  text-decoration: none;
  display: block;
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover {
  opacity: 0.7;
  background: -moz-linear-gradient(top,#FFF 80%,#EEE);
}
@media only screen and (max-width: 580px) {
  .kaerebalink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 10px 15px;
}
.kaerebalink-image {
  margin: 0 0 10px 0;
  float: none;
}
.kaerebalink-image img {
  margin: 0 auto;
}
.kaerebalink-info {
  font-size: 12px;
  margin: 0;
}
.kaerebalink-name {
  font-size: 15px;
  margin-top: 2px;
}
.kaerebalink-detail {
  margin-top: 5px;
}
.kaerebalink-powered-date {
  font-size: 11px;
  margin-top: 5px;
}
.kaerebalink-link1 {
  font-size: 14px;
}
.shoplinkamazon, .shoplinkrakuten {
  float: none;
  width: 96%;
  margin: 10px 0;
  padding: 5px 0;
}
}

▼コードの右上の【コピー】を押すと自動的にコピーされます。

スクリーンショット 2015-07-11 16.47.15

これをコピペすると、おくたにさまーのようなデザインのカエレバにカスタマイズが可能ですぜ。

ブログがシンプルでおしゃれなら、ぜひおくたにさまーカスタマイズしたほうがカエレバも魅力的になるぜ!

僕も自分のブログにあったオリジナルなCSSカスタマイズを

でもどうせならオリジナルなカエレバにしたいので、初心者ながらおそるおそる変えてみた。僕のブログのカラーは黄色がメインになっているので、そっち寄りに変えてみた。

▼おくたにさまーの記事にもあったこの記事を参考にして作ってみました。
スクリーンショット 2015-07-11 16.57.55

かなり時間がかかりましたけど、CSSのコードを入れて確認しながらなんとか形になったのがこれ。

CSSの知識がある方からしたら、大したカスタマイズでもないと思います。ですが、初心者の僕にとってはゼロから始めた初めてのCSSカスタマイズです。線の太さとか、ボタンの大きさや色もこうやってみんな変えてるのか!と少し成長した気がします。

もっとオシャレなデザインに変えるには勉強が必要なんだと思いますけど、暇な時間を見つけてちょくちょくいじってみようと思います。

▼いらないとは思いますけど、一応僕のもコードを乗っけてみますw(ちょっと自慢)

.kaerebalink-box {
	border: 5px solid #f9e111;
	box-shadow: 2px 2px 3px 1px #666;
	-moz-box-shadow: 2px 2px 3px 1px #666;
	-webkit-box-shadow: 2px 2px 3px 1px #666;
	border-radius: 4px;
	padding: 10px;
	overflow: hidden;
/* float解除用 */
	margin-bottom: 20px;
}
 
.kaerebalink-image {
	margin-right: 18px;
	float: left;
}
 
.kaerebalink-image img {
	box-shadow: 0 0 1px 1px #ccc;
}
 
.kaerebalink-info {
	font-size: 14px;
	margin: 0;
	overflow: hidden;
/* float解除用 */
}
 
.kaerebalink-name {
	font-size: 18px;
	margin-top: 2px;
}
 
.kaerebalink-detail {
	margin-top: 5px;
}
 
.kaerebalink-powered-date {
	font-size: 12px;
	margin-top: 5px;
}
 
.kaerebalink-link1 {
	font-size: 18px;
}
 
.shoplinkamazon {
	float: left;
	width: 40%;
	text-align: center;
	margin: 17px 10px 0;
	padding: 1px 0;
	border: 5px solid #436abf;
	border-radius: 8px;
	background: -moz-linear-gradient(top,#FFF 0%,#EEE);
	background: -webkit-gradient(linear,left top,left bottom,from(#436abf),to(#436abf));
	font-weight: bold;
}
 
.shoplinkrakuten {
	float: left;
	width: 40%;
	text-align: center;
	margin: 17px 10px 0;
	padding: 1px 0;
	border: 5px solid #ca3232;
	border-radius: 8px;
	background: -moz-linear-gradient(top,#FFF 0%,#EEE);
	background: -webkit-gradient(linear,left top,left bottom,from(#ca3232),to(#ca3232));
	font-weight: bold;
}
 
.shoplinkamazon a {
	color: #f9e111;
}
 
.shoplinkrakuten a {
	color: #f9e111;
}
 
.shoplinkamazon a, .shoplinkrakuten a {
	text-decoration: none;
	display: block;
}
 
.shoplinkamazon a:hover, .shoplinkrakuten a:hover {
	opacity: .7;
	background: -moz-linear-gradient(top,#FFF 80%,#EEE);
}
 
@media only screen and (max-width: 580px) {
	.kaerebalink-box {
		border: 3px solid #f9e111;
		border-radius: 4px;
		padding: 10px 15px;
	}
	
	.kaerebalink-image {
		margin: 10px auto;
		float: none;
	}
	
	.kaerebalink-image img {
		margin: 0 auto;
	}
	
	.kaerebalink-info {
		font-size: 12px;
		margin: 0;
	}
	
	.kaerebalink-name {
		font-size: 19px;
		margin-top: 2px;
	}
	
	.kaerebalink-detail {
		margin-top: 5px;
	}
	
	.kaerebalink-powered-date {
		font-size: 11px;
		margin-top: 5px;
	}
	
	.kaerebalink-link1 {
		font-size: 18px;
	}
	
	.shoplinkamazon, .shoplinkrakuten {
		float: none;
		width: 96%;
		margin: 10px 0;
		padding: 1px 0;
		font-weight: bold;
	}
}
Avatar image
ワイフ
こんな派手なやつ誰もつかわないよー。
Avatar image
シゲ
そうだよねー。でも僕は気に入ってるんだ!
Avatar image
偶然の産物
それこそオリジナルですねー

ちなみに、このコード挿入はNaifixのエローラさん(@uszero800)のこの記事のプラグインでできました。ありがとうございました!

▼僕は他のプラグインFancier Author Boxと干渉したのでダメでしたが、おくたにさまーのこちらもおすすめ!

どちらでもCSSコードがブログに載せられます。

Avatar image
ワイフ
なんかプログラマーみたいだね!すごい!
Avatar image
シゲ
フッ、僕は大したことないさ。
Avatar image
偶然の産物
すごいのはおくたにさまーですよね。

あとがき!

今回CSSのカスタマイズという、初心者にはかなりハードルの高いものに挑戦しました。全くの知識のない初心者の僕でもなんとかカスタマイズできたのは、他のブロガーさんの記事やコミュニケーションからだと思います。

初心者でも色々な人にTwitterで絡むだけで、できなかったことができるようになるので挑戦してみる価値ありです。

もちろんバックアップは忘れないように!大事なブログが時空の狭間に消えてしまいますよw

カエレバをカスタマイズしたい!という初心者の方の参考、および僕自身の備忘録として記事にしておきましたとさー。

ははは、じゃあねー!( ´ ▽ ` )ノ

この記事が気に入ったら
『いいね!』してね

Twitter でシゲを

コメント & トラックバック

  • Comments ( 4 )
  • Trackbacks ( 6 )
  1. By kk

    初めまして。

    とても役に立つ記事でした

    おもいっきりコピペさせてもらいました

    ありがとうございます!

    • By シゲ

      k kさんコメントありがとうございます( ´ ▽ ` )ノ
      とは言っても僕よりもおくたにサマーの方が詳しいので、僕は素人ですよ(;^_^A
      でもお役に立ててよかったです!
      ブログを楽しみましょうねー!( ^ω^ )

  2. By 木村

    参考になりました!
    カエレバの楽天リンクにバグがあるとのことで、似たようなサービスでカイモモを使っています。
    参考まで)http://www.kaimomo.com

    • By シゲ

      木村さんコメントありがとうございます( ´ ▽ ` )
      なんと!こんなブログパーツもあるんですね!シンプルで良さそう。
      教えていただいてありがとうございます〜!

  1. […] す。今回はこちらの記事を参考にさせていただきました。 […]

  2. […]  ピスログ  7 shares 3 usersカエレバの使い方とCSSをいじる前の基礎知識。初心者がカエレバCSSカスタマイズに挑戦。http://www.piece-hairworks.link/kaereba-costum-cssやあ、カエレバ挑戦 […]

  3. […] 「カエレバ」のカスタマイズは ここ を参考にした。 […]

コメントをどうぞ!

*
*
* (公開されません)