はじめに
最近、「メイド・イン・ヘブン」（以下、本スキン）や「grayish」を利用しているブログをよく目にします。しかし、スキン独自のメニュー設定がされておらず、十分に活用されていない印象があります。
「grayish」に関しては、初期カラーのまま使用されていることが多く、これは本スキンにも同様のことが言えます。
この記事では、カスタマイザーの使い方に慣れていただくために、本スキンをノーコードで「grayish」風にカスタマイズする方法について説明します。
完成イメージ
設定手順
図1に、本スキン選択時の初期状態を示します。
これを「grayish」風にカスタマイズしていきます。
外観→カスタマイズ→メイド・イン・ヘブン設定から、ブログのデザインを設定します。
魅力的なデザインに変更していきましょう！
基本カラー
- ラベル基本カラー、個別カラー
基本カラー・個別カラーカラーパレットを選択し、以下の項目を設定します。
基本カラー # 項目 値 1 サイトカラー #aac2d22 背景カラー #ffffff3 テキストカラー #ffffff4 フッター背景カラー #e4e4e4 - ラベル見出しデザイン
見出しデザン 見出しデザインH2～H4、ウィジェットをメニューから選択します。
ここでは、「grayish」に似せたデザインをとします。見出しデザイン # 項目 本スキン grayish 5 H2 塗りつぶし（アクセント） 
6 H3 下線（サイトカラー・グレー） 
7 H4 チェック 
8 ウィジェット 下線（ストライプ） 
「grayish」のヘッダーは独自デザインのため、本スキン（Cocoon標準）とは異なるけど、配色が最も近いのでは？（図4参照）
SWELLと同じような見出しデザインが用意されていて、ノーコードで初心者でも簡単に設定できるから、お気に入りのデザインを選んでみてね！
拡張
- ラベル全体
拡張 # 項目 値 1 フロントページタイプ カテゴリーごと 2 カテゴリーごと背景色 オン 2 カードタイプ 縦型カード3列 3 カード枠 オフ 4 コンテンツ枠 オフ 以下の項目を設定します。
カードタイプが「縦型カード3列」の場合、フロントページと一覧ページは1カラム表示となり、サイドバーは表示されません。
見た目、だいぶ似てきましたね？
メインビジュアル
- ラベルヘッダーロゴ
ヘッダーロゴ 以下の項目を設定をします。
フロントページのヘッダーに表示されているロゴを非表示にし、メインビジュアルに大きなロゴを表示します。
また、メインビジュアルをスライド表示にします。ヘッダーロゴ # 項目 値 備考 1 画像 画像を選択→ヘッダーロゴ画像を選択します。 2 ヘッダー表示 オフ フロントページのヘッダーロゴは非表示となります。 - ラベルメインビジュアル
メインビジュアル 以下の項目を設定をします。
メインビジュアル # 項目 値 備考 3 メインビジュアル表示 画像 4 ヘッダータイトル <img src="画像URL">メインビジュアルに表示するロゴ画像を入力します。 5 Scrollボタン 矢印 6 画像 画像を選択→メインビジュアル画像を選択します。 - ラベルフィルター、オーバーレイ
フィルター、オーバーレイ 以下の項目を設定をします。
フィルター、オーバーレイ # 項目 値 備考 7 フィルター ドット白 8 カラーレイヤー #999999メインビジュアル画像の明るさに応じて、暗い色を重ねてその濃さを調整します。 9 不透明度 40
プラグイン使わなくても、簡単にメインビジュアルにスライダー設定できたでしょ？
「grayish」を例に選んだ理由
「grayish」を使用してみて以下の印象があります。
- 専用プラグインを使用すればメインビジュアルに動画やスライダーを設定できますが、初心者にとっては設定が複雑でわかりにくいと感じることがあります。
- 多くのカラー設定ができるため、複雑で配色のセンスが問われることがあります。
一方で、本スキンはもとから動画やスライダーの機能を有し、カラー設定も少なく簡潔です。
そのため、初心者でも簡単におしゃれなデザインが作れると思います。
さいごに
本スキンを「grayish」風にカスタマイズする手順を通じて、カスタマイザーの使い方に慣れていただけたでしょうか。
スキンが持つ機能を活用することで、初心者でも簡単におしゃれなデザインを作成できます。
今回の手順でご紹介した機能は、本スキンに搭載された多くの機能のほんの一部です。
わざわざフロントページを固定ページで作らなくても、十分に洗練されたデザインが実現できるかと思います。
この手軽さと豊富な機能を活かして、ぜひオリジナルのブログ作成に挑戦してみていただければ幸いです。
