CocoonをJIN風に！スキン「メイド・イン・ヘブン」の設定＆カスタマイズ術

「Cocoonの固定ページでフロントページ（トップ画面）を作ろうとしたけれど、難しくて挫折してしまった…」「オシャレな有料テーマ『JIN』のようなデザインに憧れるけど、まずはCocoonで頑張りたい！」

そんな悩みを持っていませんか？実は私も、設定画面と格闘して途方に暮れていた一人です。

でも、素敵なスキン「メイド・イン・ヘブン」と、あるカスタマイズ手法を組み合わせることで、初心者でも驚くほど理想に近いブログを作ることができました！

この記事では、私が実際に行った

など、実体験をもとにした「こだわりの設定」をまとめてご紹介します。

難しいコードの知識は必要ありません。私と同じように「設定でつまずいたけれど、デザインを諦めたくない！」という方の参考になれば嬉しいです。

1. 私が参考にした「神」設定サイト

まずはベースとなる設定です。詳しい導入手順は、各公式サイト様が一番分かりやすいので、こちらを参考に進めてみてくださいね。

ベースのスキン：メイド・イン・ヘブン公式サイト
透明感があって、一目惚れしたスキンです！

デザインの参考記事：JIN:R風に変更する方法
固定ページの設定が苦手だった私でも、この方法なら素敵に表示できました！

デザインの参考記事②：grayish風に変更する方法
他にもこちらのデザインで設定方法が記載されていました！

公式サイトにはたくさんの解説がありますが、初心者の私が「まずはここを見れば大丈夫！」と感じた重要なページをピックアップしました。

下記画像は先ほど紹介した「メイド・イン・ヘブン」の公式サイトのフッターのものです。

①スキンの基本的な使い方・設定方法
メイド・イン・ヘブンを導入した後の、基本的な動かし方がまとまっています。最初にここをチェックするのがおすすめです！

②さらに自分好みに変えたい時のカスタマイズ集
「もっと色を変えたい」「配置を変えたい」と思った時に役立つヒントが詰まっています。

初心者の私からのアドバイス
最初から全部やろうとすると大変なので、まずは一つ目の「基本的な使い方」を見ながら進めて、慣れてきたら二つ目の「カスタマイズ集」をのぞいてみるのがスムーズですよ！
※記事は多くないので先に確認するのも今後のことを想像しやすくなります

上記のベース設定に加えて、私が「もっとスッキリさせたい！」と思って調整したポイントを解説します。

デフォルトのままだと、記事の下に「関連記事」や「過去の投稿・新しい投稿」が自動で出てきますが、デザイン（表示方法）を変更するために一旦オフにしました。

~~※残念ながらよくネット検索すると出てくる、Cocoon設定ではスキンの影響で制限がかかっており変更するための表示がありませんでした。~~

3/15更新：スキンの作者様に方法を教えていただきました。詳しくはこちらへ⇩

なぜ消したの？ 自動で出るものを消すことで、読者に本当に読んでほしい記事を自分で選んで配置できるようになり、見た目もプロっぽくなります！

自動表示を消した後は、記事の最後に自分で「こちらの記事もおすすめですよ」とリンクを貼ります。

やり方
1.「関連記事」と入力します

<i class="fa fa-paw"></i> 関連記事 <i class="fa fa-paw"></i>

※よく使うものはパターンに保存しておくのがおすすめです

2.カラムを追加して画像とリンクを張り付けたら完了です！
　自分で入力しないといけないので手間はかかりますが、なれれば簡単ですよ！

読者さんが読みやすいように、目次を閉じたり開いたりできるように設定しました。

~~これもスキンの制御の影響で表示/非表示のボタンが設定できなくなっています（T_T）~~

3/15更新：スキンの制御についてもスキン作者様に教えていただきました！（記事を見る）

最初は設定項目が多くてパニックになりそうでしたが、一つひとつ整理していくと、自分だけの特別なブログが出来上がっていくのが本当に楽しかったです。

「固定ページの設定が難しくてトップ画面が作れない…」という方でも、今回ご紹介したスキンの組み合わせと少しの微調整で、理想のデザインに近づけます。

「メイド・イン・ヘブン」の透明感と「JIN風」の使いやすさ、ぜひ皆さんのブログでも試してみてくださいね！

　 関連記事

　 最新の記事