ヨメレバで思った通りの電子書籍ストアが並べられなかったため代替手段を作成しました。
楽天kobo、ebookjapan、hontoだけではなく、booklive!、DMMブックスなどなんでも好きなストアが並べられます。
目次
ヨメレバの代替の完成版!ヨメレバは使用せずカエレバとWordPress(ワードプレス)のカスタマイズで対応!
まず完成形です。
電子書籍だけにしたかったため、楽天ブックスや図書館などは外しています。
ヨメレバの代替に関する解説
実はリンクで飛ばしているだけなので、やっていることは大したことありません。ある意味くらだないですね^^;
urlはサイトに応じて書き換えてください。この方が管理が楽なのかな、と思いまして、ね。
この方法を採用する経緯やメリットは以下のとおりです。
- ヨメレバがもうあまり積極的に更新している状態ではない。
- 管理が楽。
- 電子書籍ストアは実はいろいろあるので好きなものを選びたい。
- ssl化(https)したとき、全置換も必要はない。
- 内部リンクで循環してくれる。
あと個人的な本の買い方がアマゾンでレビューをみたのち、どこのストアで買うのか決める、という流れなので、流れどおりの構造がいい気がしました。
WordPressのプラグインなども探しましたが、思った通りの仕様ではなく、ショートコードはプラグインの更新が止まったりトラブったりするとき嫌だなあ、と理由で採用しませんでした。そもそもカエレバの代替プラグインが多いです。
数年後もトラブルがなさそうなこの地味な方法を採用しました。
実は、昔、作成したsnsのボタンを適当に5分で改造しただけです。みてわかるようにpockets、google plus、twitter、facebookです^^;。色は適当に変えてください。
DMMブックスはロゴが黒なので黒でもいいかも。
楽天koboとebookjapanはどっちもロゴが赤なのでとりあえず一緒です。^^;
アマゾン(kindle)のレビューは一番参考になるため、カエレバで直リンクで飛ばしています。カエレバとヨメレバ両方使わなくてよくなりますね。ちなみに、カエレバはブックマークレットで使うと便利ですよ。
カエレバには感謝しながらこのまま使わせてもらいます。
開発するにあたり電子書籍ストアの規約変更や仕様変更に悩まされることもありません。不具合も考えにくいでしょう。
お遊びでホバーアニメーションさせておきました!
こういうのはちょっとした発想ですね。
ヨメレバの代替、電子書籍一覧のhtmlのコード
ヨメレバが使えない、うまく使いこなせない、楽天koboが表示されない人もお試しください。
htmlのサンプルコードは以下のとおりです。urlは自サイトのものに書き換えてください。
<!-- 電子書籍ストア一覧 --> <div class="ebooksArea"> <!-- rakutenkobo --> <div class="btn-rakutenkobo"><a href="https://ebookbrain.net/" target="_blank">楽天kobo</a></div> <!-- booklive! --> <div class="btn-booklive"><a href="https://ebookbrain.net/" target="_blank">BookLive!</a></div> <!-- honto --> <div class="btn-honto"><a href="https://ebookbrain.net/" target="_blank">honto</a></div> <!-- DMMブックス --> <div class="btn-dmmebooks"><a href="https://ebookbrain.net/" target="_blank">DMMブックス</a></div> <!-- ebookjapan --> <div class="btn-ebookjapan"><a href="https://ebookbrain.net/" target="_blank">eBookJapan</a></div> <div class="clearfix"></div> </div>
個人的にはそうしませんでしたが、バリューコマースやa8やもしもアフィリエイトなど好きなアフィリエイトリンクで直に飛ばしてもいいかもしれません。
ヨメレバの代替、電子書籍一覧のcssデザインのコード、ボタンのカスタマイズ、テーマはsimplicity
cssのコードは以下のとおりです。
/* 電子書籍ストア一覧 */
.ebooksArea{
margin:10px 0;
background: #f2f2f2;
}
.ebooksArea a{
float: left;
margin: 1%;
/*padding: 10px;*/
height: 34px;
line-height: 34px;
width: 30%;
font-size: 14px;
border-radius:6px;
color:white;
text-align:center;
text-decoration: none;
}
.ebooksArea a:hover {
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
text-decoration: none;
}
.btn-rakutenkobo a{
background: #ee4056;
box-shadow:0 5px 0 #c0392b;
}
.btn-rakutenkobo a:hover{
background: #ee4056;
box-shadow:none;
}
.btn-booklive a{
background: #dd4b39;
box-shadow:0 5px 0 #ad3a2d;
}
.btn-booklive a:hover{
background: #dd4b39;
box-shadow:none;
}
.btn-honto a{
background: #55acee;
box-shadow:0 5px 0 #0092ca;
}
.btn-honto a:hover{
background: #55acee;
box-shadow:none;
}
.btn-dmmebooks a{
background: #3b5998;
box-shadow:0 5px 0 #2c4373;
}
.btn-dmmebooks a:hover{
background: #3b5998;
box-shadow:none;
}
.btn-ebookjapan a{
background: #ee4056;
box-shadow:0 5px 0 #c0392b;
}
.btn-ebookjapan a:hover{
background: #ee4056;
box-shadow:none;
}
.clearfix{
clear:both;
}
ちなみに、テーマは無料のsimplicity2です。
cssの改造：プログラミングの解説
cssで少しだけ注意する点を書いておきますね。
Using width with padding can sometimes make elements larger than you expect
ソースをみればわかるとおり、最終的にpaddingをコメントアウトしましたが、paddingをいれたら、Wordpressの管理画面でエラーがでました。
WordPressは新しいバージョンにしたらエラーがでるようになりましたね。いい感じです。やっとこの状態になったかという感じもしますが。。
最初paddingを利用してしまったのです。そしたら次の警告がでていました。
Using width with padding can sometimes make elements larger than you expect
paddingとwidthを一緒に使うとエラーがでますね。。今回は次のように書き換えて、ボタンの上下の余白を取りながら、上下の中央合わせをしました。
/*padding: 10px;*/ height: 34px; line-height: 34px; font-size: 14px;
floatした際にclearしないと背景(background)が表示されない
テクニカルな点としては、floatした際にclearしないと背景(今回はbackground: #f2f2f2;)が消えます(効かない)ので忘れないでください。
AddQuicktagで呼び出しできるようにする
あとは、プラグインAddQuicktagを使って簡単に呼び出せるようにしればいいですかね。コメントは解説するためにつけたので削ってしまっても大丈夫です。
つまらない記事ではありましたが、ご参考になれば幸いです。
(追記)カエレバ・ヨメレバの代替、Wordpressのプラグイン
カエレバの代替、Wordpressのプラグインも調べたので覚書として残しておきます。
- WP Associate Post R2
- Rinker（リンカー）
- カッテネ
使い方は簡単そうですが、ショートコードは使いたくなかったのと、カエレバでなれてしまっているのもあり、今回はリサーチで止めました。amp化の問題も調べないといけません。
まあ、Wordpressの方が便利そうな気もするんですけど、とりあえずこれで様子見します。
コメント