「Cocoonの固定ページでフロントページ（トップ画面）を作ろうとしたけれど、難しくて挫折してしまった…」 「オシャレな有料テーマ『JIN』のようなデザインに憧れるけど、まずはCocoonで頑張りたい！」
そんな悩みを持っていませんか？実は私も、設定画面と格闘して途方に暮れていた一人です。
でも、素敵なスキン**「メイド・イン・ヘブン」と、あるカスタマイズ手法**を組み合わせることで、初心者でも驚くほど理想に近いブログを作ることができました！
この記事では、私が実際に行った
- 「メイド・イン・ヘブン」をベースにしたJIN風デザインの作り方
- 記事下をスッキリさせて、読者に読んでほしい記事だけを見せる設定
- 初心者が迷いがちな、目次の表示・非表示ボタンの出し方
など、実体験をもとにした「こだわりの設定」をまとめてご紹介します。
難しいコードの知識は必要ありません。私と同じように「設定でつまずいたけれど、デザインを諦めたくない！」という方の参考になれば嬉しいです。
1. 私が参考にした「神」設定サイト
まずはベースとなる設定です。詳しい導入手順は、各公式サイト様が一番分かりやすいので、こちらを参考に進めてみてくださいね。
ベースのスキン：メイド・イン・ヘブン 公式サイト
透明感があって、一目惚れしたスキンです！
デザインの参考記事：JIN:R風に変更する方法
固定ページの設定が苦手だった私でも、この方法なら素敵に表示できました！
デザインの参考記事②：grayish風に変更する方法
他にもこちらのデザインで設定方法が記載されていました！
【迷ったらここ！】最低限チェックしたい基本設定ページ
公式サイトにはたくさんの解説がありますが、初心者の私が「まずはここを見れば大丈夫！」と感じた重要なページをピックアップしました。
下記画像は先ほど紹介した「メイド・イン・ヘブン」の公式サイトのフッターのものです。
①スキンの基本的な使い方・設定方法
メイド・イン・ヘブンを導入した後の、基本的な動かし方がまとまっています。最初にここをチェックするのがおすすめです！
②さらに自分好みに変えたい時のカスタマイズ集
「もっと色を変えたい」「配置を変えたい」と思った時に役立つヒントが詰まっています。
初心者の私からのアドバイス
最初から全部やろうとすると大変なので、まずは一つ目の「基本的な使い方」を見ながら進めて、慣れてきたら二つ目の「カスタマイズ集」をのぞいてみるのがスムーズですよ！
※記事は多くないので先に確認するのも今後のことを想像しやすくなります
2. さらに自分好みに！こだわりの追加設定3選
上記のベース設定に加えて、私が「もっとスッキリさせたい！」と思って調整したポイントを解説します。
① 記事下の表示をスッキリさせる（関連記事・過去/新投稿の非表示）
デフォルトのままだと、記事の下に「関連記事」や「過去の投稿・新しい投稿」が自動で出てきますが、デザイン（表示方法）を変更するために一旦オフにしました。
※残念ながらよくネット検索すると出てくる、Cocoon設定ではスキンの影響で制限がかかっており変更するための表示がありませんでした。
初期状態（表示）について
「関連記事」も「過去/新しい投稿（前後ナビ）」も両方まとめて消すCSSを入力する
以下のコードを「外観」＞「カスタマイズ」＞「追加CSS」に貼り付けてください。
/* 1. 関連記事エリア全体を非表示にする */
.related-entry-read-content,
#related-entries {
display: none !important;
}
/* 2. 過去の投稿・新しい投稿（前後ナビ）を非表示にする */
.pager-post-navi,
.navigation.post-navigation {
display: none !important;
}
/* 3. もし見出し（「関連記事」という文字など）だけ残る場合はこれも追加 */
.related-entry-heading {
display: none !important;
}なぜ消したの？ 自動で出るものを消すことで、読者に本当に読んでほしい記事を自分で選んで配置できるようになり、見た目もプロっぽくなります！
② 関連記事を自分で設置する
自動表示を消した後は、記事の最後に自分で「こちらの記事もおすすめですよ」とリンクを貼ります。
やり方
1.「 関連記事 」と入力します
<i class="fa fa-paw"></i> 関連記事 <i class="fa fa-paw"></i>※よく使うものはパターンに保存しておくのがおすすめです
2.カラムを追加して画像とリンクを張り付けたら完了です！
自分で入力しないといけないので手間はかかりますが、なれれば簡単ですよ！
設定後（表示）について
③ 目次の「表示・非表示」ボタンの設定
読者さんが読みやすいように、目次を閉じたり開いたりできるように設定しました。
これもスキンの制御の影響で表示/非表示のボタンが設定できなくなっています（T_T）
こちらもは長くなるのでまた別の記事で書きたいと思います。
3. まとめ：初心者でもデザインは諦めなくていい！
最初は設定項目が多くてパニックになりそうでしたが、一つひとつ整理していくと、自分だけの特別なブログが出来上がっていくのが本当に楽しかったです。
「固定ページの設定が難しくてトップ画面が作れない…」という方でも、今回ご紹介したスキンの組み合わせと少しの微調整で、理想のデザインに近づけます。
「メイド・イン・ヘブン」の透明感と「JIN風」の使いやすさ、ぜひ皆さんのブログでも試してみてくださいね！
関連記事
最新の記事
