【WordPress】Simplicity2からCocoonに変更する時にやったことまとめ

シンプルながらSEO、SNS、各レイアウトなど広範囲にわたり柔軟な設定ができ、非常に高性能・高機能でありつつも無料のWordPressテーマとして「Simplicity2」は人気のあるテーマの一つです。

しかし、製作者のわいひらさん曰く、Simplicity2は初めて製作したWordPressテーマであり、製作当時と現在とではいろいろ事情が変わってきているとのこと。

そのため、Simplicity2を現在の事情にマッチさせるよりも、一から新しくテーマを作ろうと、Simplicity2の概念を継承したWordPressテーマ「Cocoon」が誕生しました。

「Cocoon」はSimplicity2の設計思想に加え、Simplicity2のフォーラムに投稿された意見を参考にして作成されており、Simplicity2に無い新たな機能はもちろん、さらには

ブラウザキャッシュ、HTML・CSS・JavaScript縮小化機能で高速化
モバイルフレンドリー化
AMP対応

といった、Googleが評価し、力を注いでいる要素を取り入れている点にも注目。

そのほか、200を超えるCocoon独自の機能や仕様があり、前任のSimplicity2同様に多くのWordPressユーザーのニーズにこたえたテーマと言えるでしょう。

私も無料でありながら非常に多機能かつ高性能なSimplicity2のテーマを愛用していた一人で、（物凄く迷いましたが）WordPressテーマをSimplicity2からCocoonに切り替えることにしました。

…さて、前置きが長くなりましたが、この記事では

WordPressテーマをSimplicity2からCocoonに切り替える際にやったこと

についてまとめてみました。

先述の通り、Simplicity2は無料でありながら有料のWordPressテーマに一切引けを取らない素晴らしいテーマです。それだけに多くの人が利用していると思います。

同時に、そんなSimplicity2の発展型である「Cocoon」も現在はまだテスト段階ではあるものの、注目すべきテーマであることは間違いなく、Simplicity2のままかCocoonに切り替えるか迷ってる方もいるはず。

そして迷う理由の一つに、テーマ移行に伴う諸々の設定の手間がかかる点にあると思います。

なのでそういった人のお役に立てればいいなと、テーマを移行する際にやったことを備忘録として記事にしてみました。

Simplicity2からCocoonへの移行についての内容ではありますが、ここに記載するものは「テーマ移行」において”当たり前レベル”でやっておくべきことばかりです。

Cocoonに切り替える前にやったこと
1. 旧テーマ時代に設定した内容を控えておく
  1. 各種コードやIDなどを控える
  2. スタイルシートはファイル単位で保存
Cocoonに移行してからやったこと
カエレバ・ヨメレバのデザインを変えてみた
まとめ

Cocoonに切り替える前にやったこと

「なるほど。Cocoonは神テーマだな。よし切り替えよう」

…となるくらい素晴らしいWordPressテーマですが、だからといって何の準備もなしにいきなりテーマ切り替えると痛い目にあいます。当たり前ですが。

もちろんCocoonに限った話ではありません。

なので、テーマを切り替えた後に「あれれ？この設定どうだったっけ？？？」とならないように、Simplicity2時代に行ったカスタマイズや各種設定をバックアップすることからスタート。

…バックアップいうと聞こえが良いですが、何のことはなく単に各種設定、IDやコードなどをメモ帳に雑多にまとめただけです。

旧テーマ時代に設定した内容を控えておく

Simplicity2を無改造（テーマ内のカスタマイザーの設定程度）で使っている人ならば問題ないとは思いますが、製作者も言うようにSimplicity2はカスタマイズの土台として最適なテーマです。

それだけに、スタイルやPHPをいじって独自のレイアウト、独自の機能を追加している方が多いと思います。かくいう私もその一人です。

ただ、それらのカスタマイズした設定は、テーマを変更することでリセットされてしまいます。

残念ながらSimplicity2時代の設定やカスタマイズ内容をCocoonに紐付けることは出来ません。ですが、そのカスタマイズ内容をエディタなどに控えておくことで、テーマ変更後に時間をかけずに再構築することができます。

Simplicity2時代に行ったカスタマイズの全てをCocoonでも使うとは限りませんが、内容を記録しておくことで

Cocoon移行後に素早く設定が出来る
各要素の数値（ピクセル値など）や色（カラーコード）を把握できる
万が一前のテーマに戻すことがあった場合の命綱になる

などなど良いことばかり。控えておいて損はないでしょう。

そういうわけで、いきなりCocoonをインストールするのではなく、まずSimplicity2時代の設定・カスタマイズ内容をエディターに残すことから始めました。

以前使ってたテーマがSimplicity2だったのでSimplicity2での話になりますが、Simplicity2以外のテーマを使ってた人にも当てはまります。

各種コードやIDなどを控える

ヘッダーや背景、テキストリンクなどのカラーコード
SNSや広告、GoogleアナリティクスなどのIDやコード
CSSファイル
ウィジェットやフッターのコンテンツの配置や内容

私の場合、テーマはCocoonでも外観はSimplicity2時代の雰囲気を残したかった。なのでヘッダーとか背景といったデザインの中核となる部分はSimplicity2時代に設定したものを使っています。

そのため、Simplicity2のテーマカスタマイザーで設定していたカラーコードやアナリティクス、広告などの各種コードを全てエディタにメモしておきました。

こんな具合に雑多にまとめてます

Simplicity2の設定画面では

Googleアナリティクス、Google サーチコンソール
Googleアドセンスのコード
各種SNSのID

などを入力する項目がありますが、Simplicity2を継承したCocoonにも同様の入力フォームがあります。

そのため、Simplicity2の設定画面に入力したIDなどをメモ帳にコピペしておけば、各種IDやコードを取得するためにいちいちページを開かなくても済みます。

Cocoonは「テーマカスタマイザー」ではなく、より表示速度の早い「Cocoon設定」と呼ばれる独自の設定画面が用意されており、そちらで諸々のカスタマイズが行えるようになってます。

スタイルシートはファイル単位で保存

ブログの記事内で使われる各種スタイルもSimplicity2デフォルトのものではなく、それを独自に設定したものを使っていました。

本文（p）
画像やキャプション（.entery-content img , wp-caption）
見出し（.entry-content h2）
引用文（.entry-content blockquote）
リストタグ（ul , ol , li）
カエレバ・ヨメレバ（.kaerebalink-box , .booklink-box）
ブログカード（.blogcard.internal-blogcard , .blogcard.external-blogcard）

などなど、記事でよく使うものを優先的に設定。大きさとか色とか余白とかを色々設定しているので、これらを一つ一つ手打ちで変更となるとなかなか面倒な作業です。

参考までに私がSimplicity2においてコードを追加したりいじったりしたのは

style.css
responsive.css
amp.css

これら3つのCSSファイルで、FFFTP起動させてカスタマイズを施したCSSファイルをDLして、必要に応じてCocoon側に追加するという作業を行いました。

もちろんSimplicity2とCocoonでは事情が違ってくる場合もあるので、そういったところは臨機応変に修正をします。

でも、ありがたいことに、Simplicity2とCocoonではセレクタの名前が同じ（一部例外あり）なので、ペッと貼り付けるだけで反映されて楽でした。

Cocoonに移行してからやったこと

さて、各種設定のバックアップが終わったので、これでいつでもCocoonに移行出来る。

というわけで、Cocoonの配布ページに行ってCocoonのテーマとCocoonの子テーマをダウンロードして、WordPressへインストールします。

Cocoon

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

インストールする前に、テーマの特徴、仕様、各種設定については一通り目を通しておきましょう。

次は、Cocoonをインストールしてからやったことについてつらつらとまとめます。

「Cocoon設定」で各種設定をする

一般的なWordPressテーマの設定はダッシュボード > 外観 > カスタマイズから「テーマカスタマイザー」にて諸々を設定します。

しかし、テーマカスタマイザーは動作が遅い・設定範囲が狭いなど様々な理由から「Cocoon設定」という独自の項目を設けており、タブで各種設定画面を瞬時に切り替えられるようになっています。

「Cocoon設定」の画面。各種設定が瞬時に切り替えられる。

このCocoon設定で諸々の設定をします。

上の画像ではSEOに関する設定についてのタブを開いた状態。タブの数を見て分かるように非常に幅広く設定が行えるようになっています。

項目は多いですが、その多くがチェックボックスやプルダウンメニューで構成されているので、設定自体はそれほど時間はかからないと思います。

各種コードやIDをフォームに入力する

そんな「Cocoon設定」にて、あらかじめ控えおいたSimplicity2時代に設定してた各種IDやコードを入力します。

ヘッダーやテキストリンクなどで使われるカラーコード
各SNSのID
GoogleアナリティクスやGoogleサーチコンソールのID
Google アドセンスのコード

これらを該当する場所に入力します。

Simplicity2のSEO設定を引き継ぐ

Simplicity2ユーザーに嬉しい機能として、Cocoonには「Simplicityから投稿設定を引き継ぐ(Beta)」というものがあります。

これはSimplicityのPost meta情報を引き継ぐもので、各記事で設定した

SEO設定（SEOタイトル、メタキーワード、メタディスクリプションなど）
広告の表示
AMP

といった記事ごとに異なる設定がチェック一つで継承されるというもの。テーマ移行後に記事を一つ一つ開いて修正するという手間が省けます。

テーマカスタマイザー > Cocoon設定 > その他 > Simplicityから投稿設定を引き継ぐ

ボックスにチェック入れるだけでSimplicity2時代に設定した各記事のSEO設定が継承されるのだから非常に楽ちんです。

他のテーマを使ったことがないので詳細はわかりかねますが、テーマの変更に伴う記事単位の修正はものすごく大変です。それを鑑みるに前テーマの設定の引き継ぎが出来るというのはCocoonの大きな利点だと思います。

内部SSL設定を有効にしておく

by Sean MacEntee

これはページを常時SSL化（https化）にしている人のみ該当する話ですが、同じくCocoon設定の「その他」には「内部URLをSSL化対応」というチェックボックスもあります。

これはSimplicity2の「簡単SSL対応」と同等の機能で、内部リンクや画像（アフィリエイトの画像）の非SSLのURL（http）をSSL対応（https）に変換してくれるという機能です。

通常、この手のSSL化に伴うhttpからhttpsへの変更は「Search Regex」などの一括変換プラグインを使うのですが、変換で万が一手違いが発生すると修正が大変です。

一方でCocoonの「内部URLをSSL化対応」だとデータベースを変更せずに安全かつ素早く変換してくれます。

Simplicity2のときにSSL化してた人は必ずチェックしておきましょう。

関連 httpページを簡単https化（SSL対応）する方法 | Cocoon

CSSをカスタマイズする

各種コードやIDと同じように、手を加えたスタイルも「テーマの編集」で設定しておきます。

ある程度WordPressを使っていると分かると思いますが、この手のCSSを弄る時は親テーマではなく必ず子テーマの方をカスタマイズします。そうでないと親テーマがバージョンアップすると記載した設定が全部ふっ飛んじゃいますからね。

また、Cocoonのスタイルシート（style.css）のちょっとした特徴として、PCなどのデザインとレスポンシブデザイン（スマホやタブレット端末からの閲覧時における表示設定）を記述するのが一緒です。

テキストや画像、見出しをはじめ各種要素の色や大きさ余白などはプレビューを駆使して確認しながら設定しました。ローカル環境でなくリアル環境で。

ブログを高速化する

WordPressの高速化はW3 Total Cacheなどのキャッシュ系プラグインや、CloudFlareなどのCDNを使って行うのが一般的です。

しかしSimplicity2はPCとモバイルの表示を端末ごとに切り替えているため、これらのプラグインとの相性が悪かったため、.htaccessファイルにコードを追加することで高速化を図りました。

その改善としてCocoonでは「高速化」という設定が追加され、外部プラグインを導入しなくてもチェック一つで高速化することが出来るようになりました。

Cocoon設定「高速化」

こちらの項目のうち

ブラウザキャッシュの有効化
HTMLを縮小化する
CSSを縮小化する
JavaScriptを縮小化する

といった項目にチェックを入れるだけ。

何がありがたいかと言うと、知識など無くてもチェックを入れるだけでサイト高速化が出来るという点。高速化を高速で出来る上に、万が一不具合が発生したらチェックを外すだけで良いという手軽さが魅力。

関連 Cocoonおすすめのサイト高速化設定 | Cocoon

参考までにこれらのチェックを入れた後にPageSpeed Insightsで測定したところ

モバイル：92
パソコン：91

という結果になりました（測定記事：ロードバイク乗りだけどチェーンクリーナーは最高のメンテツールだと思う）。

ちなみにチェック外してもう一度測定すると、モバイルもパソコンも70台まで落ちました…。

画像の横幅を800pxに再設定

Cocoonの特徴やSimplicity2との比較を挙げると1記事では収まりませんが、私の中で最も印象に残った違いは、本文スペースの幅でした。印象というより「ぱっと見」かもしれませんが…。

なんにせよ、Simplicity2よりCocoonの方が本文スペースの幅が広くなっています。そのため、Simplicity2時代に最適化していた画像の幅だとCocoonでは最適化じゃなくなってしまいます。

なお、本文カラムの幅は「Cocoon設定」で変更することが出来るので、Simplicity時代の幅を使いたいたいという人は、

管理画面 > Cocoon設定 > カラム > コンテンツ幅

の数値を680にするとSimplicity2のデフォルトのカラム幅となります。

Cocoonの推奨画像サイズ

ちなみに、Cocoon製作者のわいひらさんがオススメするメディアサイズは、

サムネイルのサイズ：300×300
中サイズ：500×500
大サイズ：800×5000

とのことで、画像を本文スペースの幅いっぱいに表示さたい場合は800pxに設定します。

参考おすすめのWordPressメディアサイズ設定 | Cocoon

しかし、Simplicity2に設定していた画像の幅が680pxだったため、Cocoonだと少し余白ができてしまいます。気にしなければ気にならない程度の問題かもしれませんが、やっぱり気になってしまいます。

そのため、過去に投稿した記事の画像はWordPressプラグイン「Regenerate Thumbnails」を使って、画像の大きさを800pxに再構築しました。

ウィジェットとかの設定も忘れずに

サイドバー（サイドカラム）やフッターにもコンテンツを置いている方はもちろんそちらの設定も忘れずやっておきます。

ただ、WordPressのバージョンアップに伴い、テーマをアップデートするとウィジェットの一部が解除されるようになりました。

せっかく設定したウィジェットがテーマをアップデートするたびに解除されるなんてどうなってんのさWordPress！ってなります。

…愚痴っても仕方ないので、テーマのアップデートはブラウザではなく、FTPを使って行うことを推奨します。

その他、気になったところは追加修正

WordPressテーマをCocoonに切り替える前後でやった事といえばこれぐらいだったと思います。…他にもあったかも知れないけど思い出せない。

それぐらいSimplicity2からCocoonに切り替えるのが楽だったという印象でした。

というのもSimplicity2とCocoonでいくらか互換性があるので、ダイナミックにゴチャゴチャイジる必要がなかったのです。本当に助かってます。

…ただ、その後もブログを投稿したり、過去記事の徘徊をしているうちに「あ、コレは変えたほうが良いな」というのは見つかるので、そういうのに遭遇した時は設定を変えたりコードを変えたりしていました。

カエレバ・ヨメレバのデザインを変えてみた

アマゾンや楽天の商品をブログなどに掲載する人にとってはもはや欠かせないツールとなった「カエレバ」および「ヨメレバ」。

Cocoonでもこれらカエレバ・ヨメレバに対応したデザインが用意されているので、デフォルトでも美しくアマゾンや楽天の商品や書籍を掲載することが出来ます。

Cocoonデフォルトのカエレバのデザイン

Cocoonのカエレバ（一部デザインをいじってます）

上記は背景とボーダーの色を変更した以外はほぼCocoon標準のカエレバのデザインのスクショです（デフォルトちゃうやん…）。

見ての通り、カエレバ・ヨメレバのデザインとして文句ナシです。なのでこのまま使って全く問題はありません。

なのですが、ワガママかつ無礼な私は畏れ多くも「商品画像が小さいな」と思い、これをカスタマイズすることしました。

現在はCocoonのバージョンアップに伴い、商品画像がある程度大きくなっています。なにより元がカエレバ側の設定に影響されない素晴らしいデザインなので、よほどこだわる方で無い限り、Cocoonデフォルトのスタイルの仕様を推奨します。

さらに、CocoonではVer.1.0.6からショートコードにASIN（ISBN）とキーワード（商品名）を入力するだけで簡単にAmazon商品リンクが掲載されるようになりました。

詳細 Amazon商品リンクの初期設定方法と使い方 | Cocoon

カスタマイズ後のカエレバ・ヨメレバのデザイン

現在はここで紹介したものとは別のデザインを使っています。

パークツール(ParkTool) サイクロンチェーン洗浄システム CM-5.2

posted with カエレバ

PARKTOOL(パークツール) 2012-11-01

Amazonで探す

楽天市場で探す

↑こんな感じに変更してみたわけです。もちろんヨメレバも変更していますし、スマホやタブレット端末から閲覧しても大丈夫なやつ。

上のやつは大げさなくらい画像が大きくなってますが、「大きすぎるなぁ」って人はカエレバの画像を「小」にすれば従来通りになります。

記事の途中で入れるものは画像「小」で、記事の末端に掲載する場合は大きい画像という具合に選ぶと良いかも。

Amazlet風-2（CSSカスタマイズ用）、画像中で表示しています。

…ただ、カエレバの改造は大体がカスタマイズ用の「Amazlet2」を推奨しているのに対し、私は長いことAmazlet風-1やAmazlet風-3を使っていて、カスタマイズに適したAmazlet2を使い初めたのはつい最近です。

そのため闇雲にCSSを変更しても、Amazletの1,2,3で表示に差が出てしまうため、Amazletの1,2,3でデザインが大きく崩れないようにしてみました。崩れないように努力しました。

ベースとなるデザインはつばさのーとさんが紹介しているものを使用しています。シンプルだけど機能的で数あるカエレバのカスタマイズで一番好きです。

スマホからだとこのように表示されます。「～で探す」のボタンは本来は縦並びですが、縦長になるのを抑えたかったので横並びにしてみました。

…ただ、Amazlet風（改）-1だとボタンが横並びではなく縦になってしまいます。私の今の技術で改善できなかったので、これは一括変換ツールを使って直そうと思います。

それ以外の表示のされかたについては「カエレバのテスト」にてまとめています。

ソースコード

使う人がいるかどうかわかりませんが、この記事を見て下さったCocoon製作者のわいひらさんが「お、これ使わせてもらおう」ってならないかなと淡い期待を懐きつつ、ソースを紹介します。

ブログの設定は人によってまちまちなので、私のところで上手く表示されても他の人のところでそうとは限りませんので、使ってもいいよって人は必ずバックアップ取った上で使って下さい。

「デザイン崩れた！責任取れ！！」と言われても「オレが取れるのは年だけだ！！」としか返せません。

なお、ここで紹介するコードを使う場合、Cocoonの親テーマにあるカエレバのスタイルが残ってると上の画像のように表示おかしくなるので親テーマの以下のコードを全部消しておきます。

.booklink-box, .kaerebalink-box, .tomarebalink-box {
  padding: 22px 25px 22px 25px;
  width: 94%;
  margin: 0 auto 15px;
  border: 3px solid #dfdfdf;
  box-sizing: border-box;
  text-align: center;
}

.booklink-image, .kaerebalink-image, .tomarebalink-image {
  width: 160px;
  min-width: 160px;
  margin: 0 auto 5px !important;
  float: none !important;
}
.booklink-image *, .kaerebalink-image *, .tomarebalink-image * {
  display: block;
}
.booklink-image > a > img, .kaerebalink-image > a > img, .tomarebalink-image > a > img {
  margin: 0 auto;
}

.booklink-info, .kaerebalink-info, .tomarebalink-info {
  line-height: 125%;
  width: 100%;
}

.booklink-name, .kaerebalink-name, .tomarebalink-name {
  margin: 0 0 4px 0;
}
.booklink-name a, .kaerebalink-name a, .tomarebalink-name a {
  color: #0066cc;
  text-decoration: underline;
}
.booklink-name > a, .kaerebalink-name > a, .tomarebalink-name > a {
  font-size: 16px;
}
.booklink-name > a:hover, .kaerebalink-name > a:hover, .tomarebalink-name > a:hover {
  color: #FF9900;
}

.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date {
  font-size: 12px;
}

.booklink-detail, .kaerebalink-detail, .tomarebalink-address {
  color: #333333;
  font-size: 12px;
  margin: 0 0 10px 0;
}

.booklink-link2 a, .kaerebalink-link1 a, .tomarebalink-link1 a {
  width: 90%;
  display: block;
  margin: 0px auto 8px;
  padding: 10px 1px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.booklink-link2 a:hover, .kaerebalink-link1 a:hover, .tomarebalink-link1 a:hover {
  opacity: 0.6;
}
.booklink-link2 > div > a, .kaerebalink-link1 > div > a, .tomarebalink-link1 > div > a {
  background: #fff;
}

@media screen and (min-width: 768px) {
  .booklink-box, .kaerebalink-box, .tomarebalink-box {
    text-align: left;
    display: flex;
  }

  .booklink-image, .kaerebalink-image, .tomarebalink-image {
    vertical-align: top;
    box-sizing: border-box;
    min-width: auto !important;
  }

  .booklink-info, .kaerebalink-info, .tomarebalink-info {
    line-height: 125%;
    vertical-align: top;
    box-sizing: border-box;
    padding-left: 25px;
    width: 100%;
  }

  .booklink-name, .kaerebalink-name, .tomarebalink-name {
    margin: 0 0 24px 0;
  }
  .booklink-name > a, .kaerebalink-name > a, .tomarebalink-name > a {
    font-size: 16px;
  }

  .booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date {
    margin: 6px 0 0 0;
  }

  .booklink-detail, .kaerebalink-detail {
    margin: 0 0 14px 0;
  }

  .booklink-link2, .kaerebalink-link1, .tomarebalink-link1 {
    display: flex;
    flex-wrap: wrap;
  }
  .booklink-link2 a, .kaerebalink-link1 a, .tomarebalink-link1 a {
    width: auto;
    text-align: center;
    margin: 0;
  }
  .booklink-link2 a img, .kaerebalink-link1 a img, .tomarebalink-link1 a img {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .booklink-link2 > div, .kaerebalink-link1 > div, .tomarebalink-link1 > div {
    width: 31.5%;
    margin: 2px;
    box-sizing: border-box;
  }
}
.shoplinkamazon a {
  color: #ff9901;
  border: 2px solid #ff9901;
}

.shoplinkrakuten a {
  color: #bf0000;
  border: 2px solid #bf0000;
}

.shoplinkyahoo a {
  color: #ff0033;
  border: 2px solid #ff0033;
  position: relative;
}

.shoplinkseven a {
  color: #008837;
  border: 2px solid #008837;
}

.shoplinkbellemaison a {
  color: #80bd22;
  border: 2px solid #80bd22;
}

.shoplinkcecile a {
  color: #8d124b;
  border: 2px solid #8d124b;
}

.shoplinkkakakucom a {
  color: #051d93;
  border: 2px solid #051d93;
}

.shoplinkkindle a {
  color: #0074c1;
  border: 2px solid #0074c1;
}

.shoplinkrakukobo a {
  color: #bf0000;
  border: 2px solid #bf0000;
}

.shoplinkbk1 a {
  color: #0085cd;
  border: 2px solid #0085cd;
}

.shoplinkehon a {
  color: #000066;
  border: 2px solid #000066;
}

.shoplinkkino a {
  color: #004097;
  border: 2px solid #004097;
}

.shoplinktoshokan a {
  color: #15b0e7;
  border: 2px solid #15b0e7;
}

.shoplinkjalan a {
  color: #FF5800;
  border: 2px solid #FF5800;
}

.shoplinkjtb a {
  color: #C71628;
  border: 2px solid #C71628;
}

.shoplinkikyu a {
  color: #1C4678;
  border: 2px solid #1C4678;
}

.shoplinkrurubu a {
  color: #000066;
  border: 2px solid #000066;
}

親テーマのカエレバのスタイルはテーマがバージョンアップするたびに復活するので、面倒ではありますがバージョンアップ毎に消してやって下さい（わいひらさん、ゴメンナサイ）。

「さすがに消すのは…」という人は、上記のコードの部分を /* */ で囲ってやると消さずに無効化出来ます。

PC用のコード

まずはPCから閲覧したときに見えるデザインのコード。普通にstyle.cssにコピペするだけ。

.kaerebalink-box,.booklink-box{
text-align:left;
padding-bottom:20px;
font-size:16px;
overflow: hidden;
border:1px solid #a0d8ef;
background-color:#eaf4fc;
margin:40px 10px;
padding-top:5px;
}

.kaerebalink-image,.booklink-image{
float:left;
margin:0 15px 10px 0;
}

.kaerebalink-image img{
max-width:290px;
border: none;
margin:5px 0 0 10px;
}

.booklink-image img{
max-height:230px;
border: none;
margin:5px 0 0 10px;
}

.kaerebalink-info,.booklink-info{
line-height:1.7;
overflow: hidden;
}

.kaerebalink-name,.booklink-name{
line-height:1.7;
font-size:16px;
margin-top:5px;
margin-right:5px;
margin-bottom:0;
}
	
.kaerebalink-powered-date,.booklink-powered-date{
font-size:12px;
margin-top:0;
font-family:verdana;
line-height:1.5;
}
	
.kaerebalink-detail,.booklink-detail{
margin-bottom:20px;
font-size:14px;
}
	
.kaerebalink-link1,.booklink-link2{
margin:3px 0;
}

.booklink-link2 a, .kaerebalink-link1 a {
display:block !important;
margin:3px;
padding: 10px 10px;
text-decoration: none;
text-align: center;
font-size: 14px;
font-weight: bold;
box-shadow: 2px 2px 1px #dcdcdc;
}

.booklink-link2 a:hover, .kaerebalink-link1 a:hover {
opacity: 0.6;
}

.booklink-link2 > div, .kaerebalink-link1 > div {
padding: 0 5px 5px 0;
box-sizing: border-box;
float: left !important;
}

.shoplinkamazon{
margin-right:5px;
display:inline;
}

.shoplinkkindle{
margin-right:5px;
display:inline;		
}

.shoplinkrakuten{
margin-right:5px;
display:inline;
}

.shoplinkrakukobo{
margin-right:5px;
display:inline;
}

.shoplinkamazon a {
color: #ffffff;
background: #ff9901;
border: 2px solid #ff9901;
}

.shoplinkrakuten a {
color: #ffffff;
background: #bf0000;
border: 2px solid #bf0000;
}
.shoplinkkindle a {
color: #ffffff;
background: #0074c1;
border: 2px solid #0074c1;
}

.shoplinkrakukobo a {
color: #ffffff;
background: #339966;
border: 2px solid #339966;
}
	
.booklink-footer{
clear: left;
}

レスポンシブ用コード

続いて、スマホや各種タブレット端末から閲覧した時に表示されるデザインについては以下を。

Cocoonのstyle.cssの下の方には、

@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

}

といったレスポンシブ用のコードがあるので、その中に以下のコードを入れてやって下さい。

Cocoon以外のテーマの人は上記のコードを追加して、その中に以下のコードを入れて下さい。

.booklink-box, .kaerebalink-box {
text-align: center;
display: block;
margin-left:0;
margin-right:0;
padding-top:0;
}

.booklink-image, .kaerebalink-image {
margin:0 !important;
width:100%;
text-align: center !important;
}

.booklink-image img, .kaerebalink-image img {
text-align: center !important;
margin:0;
max-width:100%;
height:auto;
}
.booklink-info, .kaerebalink-info {
line-height: 100%;
text-align:center;
clear:both;
}

.booklink-name, .kaerebalink-name {
margin: 5px;
clear:both;
}

.booklink-name > a, .kaerebalink-name > a {
display:block;
margin:0;
font-size: 16px;
}

.booklink-powered-date, .kaerebalink-powered-date {
}

.booklink-detail, .kaerebalink-detail {
text-align:center;
}

.booklink-link2, .kaerebalink-link1{
width: 100% !important;
margin: 0 2px;
}

.booklink-link2 a, .kaerebalink-link1 a {
width:100%;
margin :  0px;
float: left !important;
}

.booklink-link2 > div, .kaerebalink-link1 > div {
margin : 0;
float: left !important;
width:50%;
}

.shoplinkamazon {
margin:0;
}

.shoplinkrakuten {
margin:0;
}

.shoplinkkindle {
margin:0;
}

.shoplinkrakukobo {
margin:0;
}

プログラマーさんが見たら鼻で笑いそうなコードですが、これをベースにもっと良いものを作って下さる方が現れることに期待。

なお、Amazlet-2（CSSカスタマイズ用）推奨ですが、一応Amazlet-3でもほぼ同じように表示されます（表示されるはずです）。Amazlet-1は…うん。

ボタンの部分だけ色を変えたいって人は

また、上の画像のように、（カエレバのスタイルはCocoonのものを使いつつ）アマゾンや楽天といったボタンには色を付けたいという場合のスタイルも用意してみました。

.shoplinkamazon a {
color: #ffffff !important; 
background: #ff9901 !important;
border: 2px solid #ff9901 !important;
}

.shoplinkrakuten a {
color: #ffffff !important;
background: #bf0000 !important;
border: 2px solid #bf0000 !important;
}

.shoplinkkindle a {
color: #ffffff !important;
background: #0074c1 !important;
border: 2px solid #0074c1 !important;
}

.shoplinkrakukobo a {
color: #ffffff !important;
background: #339966 !important;
border: 2px solid #339966 !important;
}

上記のソースをCocoonの子テーマにコピペするだけでOKです。コピペしたらちゃんとPC・スマホで正しく表示されるか確認して下さいね。

…何のことはなく、ボタン部分の要素に色をつけて、「!important」にして最優先で表示させるようにしただけのものです。

コメントにて「ボタンに色を付けたい」というご意見を頂いたのでやってみました。えへへ。