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

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に切り替えることにしました。

Cocoon スクリーンショット

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

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

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

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

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

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

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

Simplicity2から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 

「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設定 内部SSL設定

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

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

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

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

https

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設定 高速化

Cocoon設定「高速化」

こちらの項目のうち

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

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

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

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

page-speed

参考までにこれらのチェックを入れた後に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デフォルトのスタイルの仕様を推奨します。

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

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

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

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

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

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

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

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

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

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

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

ヨメレバのスマホデザイン

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

ヨメレバのスマホデザイン2

…ただ、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のカエレバのボタンに色を付ける

また、上の画像のように、(カエレバのスタイルは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」にして最優先で表示させるようにしただけのものです。

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

スポンサーリンク

まとめ

という具合に、Simplicity2からCocoonへの移行の備忘録的を書きまとめてみましたが、ある程度WordPressに慣れてる人からすれば「ンなもん当たり前だろ」レベルのことばかり。

逆に言えばその程度のことをキチンとやっておけばテーマ移行で焦ることはないということですね。多分やったのそれぐらいです(他にあったかな…?)。

ただ確実に言えるのは、思っていたよりもスムーズに移行できたという点。

無知であるが故にグダグダになったところもありましたが、無知な私でもリカバリーできるレベルでして、移行後の設定も実にスムーズに行うことができました。

また、移行してから現在に至るまで、特にトラブルや不自由を感じることはありません。Cocoonが多方面で優れたテーマだということが伺えます。

そんなCocoonは数日おきくらいでバージョンアップが行われており、今もなお進化し続けています。蛹から孵化するのもそう遠くはなさそうです。

この記事のコメント

  1. まちえふ より:

    初めまして。私もSimplicity2からCocoonに変更した者です。

    Cocoonのカエレバカスタマイズについて検索していてたどり着きました。ボタンの白抜きに色を付けたくて…。

    ちょっと前のバージョンでは出来たのに、あるバージョンから同じコードを使うとおっしゃる通り白抜きのまま文字だけ消えるような表示になってしまって困っています。

    親テーマの中身をいじらないといけないのですね。私はコードに全然詳しくないのでどこをどうすれば良いかさっぱりです。。もし今後子テーマのスタイルシートにコードを追加するだけで出来るようになったらやり方を載せて頂けると嬉しいです。

    ましゅーさんのサイトは、関連の表記やメモ(えんぴつ)の表記もあってステキですね。(そこら辺のカスタマイズも記事にする予定はありますか…?)

    また遊びに来ます!長文失礼しました。

    • ましゅー ましゅー より:

      まちえふさん、初めまして。コメントありがとうございます!

      私が使っている&この記事で紹介したカエレバのスタイルは、実を言うとSimplicity2の時に使っていたものをCocoonでも使えたら良いなと思って他の方が公開しているコードを元に作ってみました。

      今思うと無事にカスタマイズできてよかったと思ってます(笑)。

      Cocoonデフォルトのカエレバのスタイルが親テーマの方に入っているため、独自のカエレバデザインにしたい場合は、そちらを消さないといけないのがネックではありますが、「kaereba」、「booklink」、「shhoplink」といった要素名になってるので、これらを親テーマから探して消す(あるいは別のエディタに移動させる)だけでOKでした。

      ただ、私は拘るのでカエレバを改変しましたが、Cocoonにて用意されているカエレバのスタイルは、貼り付けたコード(Amazletの1,2,3)に影響されず同じように表示され、デザイン自体もシンプルながらコンバージョン率を高めてくれる要素がふんだんに含まれています。

      そのため、無理に他のデザインにするよりも、デフォルトのものを使ったほうが良いかも知れません。強いて言えば余白ですとかボーダー、背景の色などを変える程度で。

      >ましゅーさんのサイトは、関連の表記やメモ(えんぴつ)の表記もあってステキですね。

      このメモ(鉛筆)は私が作ったものではなく、Cocoonデフォルトのものですねー。

      ビジュアルエディタのスタイルの中にある「ボックス(アイコン)」の「補足情報(メモ)」というやつです。

      初期の頃のCocoonにはありませんでしたが、バージョンアップに伴って新しく追加されたみたいです。

      そのおかげで補足文を書く時の表現の幅が広がりました。

      Cocoonはバージョンアップに伴いこれからもどんどん便利になっていくと思います。すごく楽しみですね!

      • まちえふ より:

        お返事ありがとうございます!

        私の技量ではやっぱり親テーマの中にいくのは怖いのでこのままにしておきます。

        ただ色を付けたいだけなんですけどね…私のサイトでは色付きの方がクリック率が高い気がしてて。
        SNSアイコンは色付きと白抜き選べるじゃないですか。あんな感じにしてくれないか要望出してみようかなぁ…どきどき。

        スタイルの中見たことなかったので知りませんでした!(恥)
        バッジとかボタンとかも!これで「合わせて読みたい」とか出来ますね。なんで知らなかったんだろう…。

        Cocoonはほんとに無料なのに色々機能があってありがたいですね。頑張って使いこなせるようになりたいです。

        • ましゅー ましゅー より:

          まちえふさん、こんにちは~

          確かに、ボタンに色がついていると見栄えが良くなりますよね。私もその方が良いなーと思って良さそうなデザイン(スタイル)を探して現在のものにたどり着きました。

          なお、ちょっと興味が出たので、Cocoonデフォルトのカエレバのスタイルを使用しつつ、ボタンに色を付けるスタイルについて追記してみました。

          こちらは子テーマにコピペするだけなので、親テーマをいじったり消したりせず、もし上手くいかなかったらコピペした部分を削除という具合に(全部いじるよりか)簡単に実装できるかなと思います。

          もし宜しければ試してみて下さい。

          SimplicityおよびSimplicity2のときにも思いましたが、Cocoonにはブロガーやアフィリエイターが求める多くのものを網羅しており、それでいて無料という、素晴らしいを通り越して畏敬の念すら感じるテーマです。

          製作者のわいひらさんには感謝の気持ちでいっぱいです。