Simplicity2からCocoonへの移行で大変だったこと

Cocoon

このブログのWordPressテーマをSimplicity2からCocoonに変更しました。

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

Simplicity2からCocoonへの移行は、先に関連サイトのほうでやっていたので手順的にはスムーズだったのですが、問題はレイアウト。

デザインがSimplicity2から変わる部分が多いので、調整にかなり時間がかかりました。

というわけで今回は、Simplicity2からCocoonに移行する際に苦労した点を書いてみます。移行を考えている方はよかったら参考にしてみてくださいね。

参考 移行の手順はこちらの記事でくわしく書いています

これでOK!Simplicity2からCocoonに移行した時にやるべきこと
Simplicityの後継テーマCocoonが公開されました。 Simplicity2からCocoonへの移行を考えている方もいるかと思います。 というわけで今回は、Simplicity2から...

インデックスの画像の高さを修正

記事一覧を縦2列で表示した時に、サムネイルの高さがばらばらだったので修正しました。

一覧(インデックス)表示で、サムネイルの高さを揃える

アイキャッチ画像のサイズがまちまちだったのが原因ですが、これ、プラグイン使うと簡単に修正できるんですね。

「Regenerate Thumbnails」というプラグインをインストール・有効化したら、このボタンを押すだけでサムネイルのサイズが揃います。

サムネイルの大きさを整えるプラグイン

ただ、画像が縦長すぎると、うまく揃わないことがあります。このあたりは手動で修正ですね。

投稿画面にアイキャッチを自動で表示する

Cocoonでは、記事の最初に自動でアイキャッチ画像を入れる設定があります。

「Cocoon設定」→「画像」とすすみ、「本文上にアイキャッチを表示する」にチェックを入れると、本文の上にアイキャッチ画像が入ります。

本文上にアイキャッチを表示する

 

・・・というわけで私もさっそく設定してみたのですが、なんとこんな表示に。

アイキャッチ画像を挿入したら、画像が並んでしまった

SNSボタンをはさんで画像が2つ並んじゃってます。

原因は、今まで記事の先頭に手動で画像を入れていたため。それと重なっちゃったんですね。というわけで、記事の先頭に入れていた画像を全ページ、手動で削除しました。

全ページのチェックにはサイトマップが便利

ここで便利だったのが、以前作ったサイトマップページです。

サイトマップページは、1ページに全部記事のタイトルが表示されます。

サイトマップページ

リンクを次々と新しいタブで開いていけば、サイトマップページを開いたまま、各記事のチェックができます。

5つぐらいいっぺんに開いて作業していくと効率がいいですよ。

サイトマップは簡単に作ることができるので、これから移行作業をする方はサイトマップページを作っておくと便利ですよ。

超簡単!PS Auto Sitemapでサイトマップを設置する方法
少し古いプラグインですが、PS Auto Sitemapを使ってサイトマップページを作ってみました。 サイトマップというと、Googleに送信するものというイメージが強いかと思いますが、サイトマップ...

Cocoonの目次とTOC+を併用する

Cocoonにはデフォルトで目次機能がついています。「Cocoon設定」で目次をONにすると自動で目次が挿入されます。

最高にうれしい機能なのですが、今まで使っていた「Table Of Contents Plus」も気に入っているんですよね。自分でカスタムしたこともあって、併用できたらなあなんて思っていたんです。

「Table of Contents Plus」をカスタマイズ!目次をおしゃれにしてみよう
WordPressには「Table of Contents Plus」という目次を表示するプラグインがあります。 かんたんに目次を入れることができる反面、ややシンプルすぎるデザインに物足りなさを感じ...

・・・が、さすがCocoonですね。ちゃんと併用できます!

目次を併用する方法

やり方は簡単です。Cocoonの目次設定をONにしておきます。

で、「Table Of Contents Plus」は自動ではなく、手動(ショートコード)で入れる設定にします。

「Table Of Contents Plus」の目次を表示する

「Table Of Contents Plus」の目次を表示したい時は、記事内にショートコードをいれて、Cocoonの投稿ページの「目次を表示しない」にチェックを入れます。

目次を表示しない

これで「Table Of Contents Plus」の目次だけが表示されます。

Cocoonの目次を表示する

Cocoonの目次を表示したい時は、「Table Of Contents Plus」のショートコードを使わなければOK。

「目次を表示しない」はチェックなし。これでCocoonの目次だけが表示されます。

目次を表示する

ヘッダーのバランスをどうとるか

Cocoonは、デフォルトだとヘッダーロゴがセンターになっています。いろいろ変更はできますが、レイアウト的にセンターがいちばんしっくり来る感じがします。

・・・が、これがけっこう曲者で、ヘッダーの背景が白だとすごくさびしくみえてしまうんですね。

そんなわけで、ヘッダーの背景画像はかなり悩みました。

ヘッダーの背景画像は、1000px×250pxあたりにするとちょうどいい感じですね。

グローバルナビ

グローバルナビもSimplicity2とはデザインが変わりました。デフォルトだとけっこう分厚い感じ。

今までSimplicity2のスキン「オレンジメニュー」をカスタマイズしたものを使っていたのですが、今回はないのでそのままのコードは使えません。

レイアウト的には白背景が合いそうなので、ナビの下にラインを入れたりするとまとまりが出そう。

自由度の高い広告設定

Cocoonは広告位置を非常に細かく設定できます。

広告位置の設定

広告タイプも選べるようになり、設定の自由度が格段に上がりました。いろいろ試しやすくなった分、どう配置するか悩みますね。

まとめ

今回は、Simplicity2からCocoonに移行した際に苦労したことを書いてみました。

移行自体は1時間ちょっとでできたのですが、そこからレイアウトを整えるのに半日ぐらいかかりました。

まあ、私の場合はアイキャッチの差し替えと目次の併用という自業自得なところもあるのですが・・・。

移行を考えている方はよかったら参考にしてみてくださいね。

スポンサーリンク
Cocoon
ゆずゆをフォローする
この記事を書いた人
ゆずゆ

読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。クッピーラムネとAmazonのFire HD8がお気に入り。雑貨マニア。

ゆずゆをフォローする
ゆずゆろぐ。