ここ数年で人気が出てユーザーが増えているワードプレス有料テーマの「SWELL」。
綺麗なサイトデザインやトップページのカスタマイズ性、豊富なブロック機能など魅力的な要素がたくさんあります。
SWELLが欲しい…
でもそこは有料テーマで少しお高い感じがするんですよね。ブログで収益が出ているなら検討するけどこの貧乏ブログでは購入は厳しい…そこで。
CocoonでSWELLっぽさを出してみるのもありだよ！
そうだ、私は「Cocoon」のテーマが好きなので、テーマは変えずにSWELL風にできるか挑戦してみたいと思います。
- ブログ好きな40代主婦
- CocoonサイトをCSSでフルカスタマイズ
- JavaScriptを勉強中
- ドメインパワー32
- ワードプレスで２サイトを運営しています
です
イメージするトップページデザイン（ファーストビジュアル）
SWELLのデモサイトを見ていたときに目にとまったのはこちら。
美しい…ファーストビューで画面いっぱいに広がる画像が素敵すぎて、こんな風にできたらいいな！
Cocoonアピールエリアカスタマイズの完成イメージ
まずは今回のカスタマイズをするとこのようなイメージに完成します。
- 画像の高さを画面いっぱいに広げる（上部のヘッダーとグローバルメニュー部分は含みません）
- 画像を白っぽくし、ぼかしを入れる
- SWELL風にアイコンを入れて動きをつける
Cocoonで再現するために（考察）
このデザインの大きな特徴は、サイトを訪れた際にまず画面いっぱいに広がる画像ですね。（ファーストビュー）
これを作るにはヘッダーの背景として画像を入れてしまうと中にボタンを置けないので、これを変更するとなると親テーマをいじる大がかりなカスタマイズになってしまう…
そこで思い付いたのが、
Cocoonにもともとある機能のひとつ、
「アピールエリア」を使ってみようと！
Cocoonアピールエリアの特徴
デモサイトのように複数の写真のスライド切り替えはできないけど、ここの画像の高さを変更して、背景色などを変えたらイイ感じになるのではないか？
頭の中でイメージは完成しました。
それでは具体的な手順を書いていきます。
Cocoonアピールエリアを使ってSWELL風ファーストビューを作る手順
- STEP1ヘッダーの設定
スマホ用に「ヘッダーモバイルボタン」を作成
- STEP2アピールエリアの設定
画像、画像の中に表示するタイトル、本文、ボタンなどの設定
- STEP3CSSをコピペする
背景色、文字色、余白などの設定
- 完成！
プレビューで確認します
ヘッダー部分の設定
画像が大きく表示されるのでサイト名（ロゴ）の部分はシンプルな方が合わせやすいかと思います。
現在のロゴはこちらを使っています。
パソコンの場合
ここはお好みで構わないのですが、下に表示する画像を目立たせるために私はヘッダーレイアウトを右寄せに変更しました。（サイト名＋グローバルメニューが横一列に表示される）
「Cocoon設定」→「ヘッダー」→「ヘッダーレイアウト：トップメニュー（右寄せ）を選択」
スマホの場合
スマホでのヘッダーについては「ヘッダーモバイルボタン」を設定しました。
こちらもお好みでよいのですが、このサイトでは真ん中にロゴ、左右にそれぞれ検索ボタン、メニューボタンを配置しています。
Cocoonアピールエリアの設定
続いてアピールエリア部分の設定をします。
「Cocoon設定」→「アピールエリア」
- アピールエリアの表示：フロントページのみ
- エリア画像：表示したい画像を選択
- テキストエリア表示に✔️（画像のみ表示したい場合は空白にする）
- タイトル：任意のタイトル（なくてもよい）
- メッセージ：任意のメッセージ
- ボタンメッセージ：ボタンに表示するリンク先など
- ボタンリンク先：ボタンをクリックしたときのURLを入力
- 同じページ内にスクロール（リンク）するときはURLの代わりに#をつけてid名を記述します（リンク先にidを指定する方法は後述します）
画像はスマホで表示するときに左右がカットされてしまうので、写したいものが中心にあるとよいかもしれません。（厳密には軸となる位置を指定すること、パソコンとスマホで画像を変更することもCSSでできますがここでは省略。調整したいときは「background-position」で調べてみてくださいね。）
もともとのアピールエリアの機能で、メッセージやボタンなしで画像のみ表示することもできます。
CSSの設定
CSSでは背景色などスタイル設定をおこないます。
CSSって何？よく分からない…という人も、コピペできるコードを下に準備したのでこのサイトと同じようなデサインにはできます。
外観→テーマファイルエディター→Cocoon.Child（子テーマが選択されていることを確認して）→スタイルシート（style,css）
/* アピールエリア---------------------------------------------- *
/*全体*/
.appeal-in {
min-height: 800px;/*パソコンでの高さ調整*/
min-width:100%;/*幅を最大に*/
background-color:rgba(250,250,250,.5);/*背景色、白を透過させる*/
backdrop-filter: blur(3px);/*ぼかし*/
}
/*480px以下*/
@media screen and (max-width: 480px){
.appeal-in {
min-height: 600px!important;/*スマホでの高さ調整*/
}
}
/*コンテンツエリア*/
.appeal-content {
width:100%;/*幅を最大に*/
padding:2em 1em;/*内側余白調整*/
background-color:transparent;/*コンテンツエリアの背景無効化*/
}
/*タイトル*/
.appeal-title{
padding-bottom:1.5em;/*タイトル下の余白*/
font-weight:normal;/*文字の太さ*/
font-size:1.1em;/*タイトル文字の大きさ*/
}
/*本文*/
.appeal-message {
font-size: 1em;/*本文文字の大きさ*/
}
/*480px以下*/
@media screen and (max-width: 480px){
.appeal-message {
font-size: .8em;/*スマホ表示する文字の大きさ*/
}
}
/*ボタン*/
.appeal-button{
background-color:transparent!important;/*ボタンの背景色無効化*/
font-weight:normal;/*文字の太さ*/
color: #777; /*ボタン部分文字とアイコンの色*/
}
/*アイコンを追加*/
.appeal-button:before{
display:block;
font-family: "Font Awesome 5 Free";
font-weight:bold;
content: "\f103";/*アイコン指定*/
font-size: 2em;/*アイコンの大きさ*/
animation: move 1s infinite alternate ease-in-out;/*以下、アイコンを動かすアニメーション*/
}
@keyframes move{
from {
transform: translateY(0);
}
to {
transform: translateY(10px);
}
}
/*スムーズにスクロール*/
html { scroll-behavior: smooth;}
プレビューで確認するとほぼ私の現在のデザインと同じなっているかと思います。（デザインが崩れる場合はコードのミスがあるかもしれません）
- アピールエリアの横幅を100％に
- 背景色は白を透過させる
- 背景画像にぼかしを入れる
- 画像の高さ設定（PC／スマホと別々に）
- ボタンの部分の背景色は無効にする
- ボタンの代わりにアイコンを追加
- アイコンをゆらゆら動かすアニメーション
- ページ内リンクをスムーズにスクロールさせる
特にアイコンと、リンク先にページ内スクロールを入れたことで、よりSWELLに近付いたので個人的にお気に入りです^^
ページ内リンクについて（アンカーリンク）
同じページ内の途中にジャンプするにはidを使った方法でリンクを作成するので、リンク先にidを指定する必要があります。
- STEP1スクロール先にidを指定
ジャンプしたいところのタグの中に、目印となるように任意のid名（アンカー）をつけておく。
例：<h2 id="new(id名)">見出し</h2> - STEP2リンクボタンの設定
指定したidのところにジャンプするリンクコードを作成する。
例：<a href="new(id名)">scroll</a>
アイコンはFont Awesome 5を使用
アイコンは【Font Awesome 5】を使用しています。
Cocoonには標準搭載されているので、「Cocoon設定」→「全体」→サイトアイコンフォントのところでFont Awesome 5に○をつけておいてください。
CSSコードを変更するとき
分かりやすいように簡単にメモ書きを入れたので画像の高さや文字色などお好みで変更してくださいね。
- 背景のぼかしがいらないとき
- backdrop-filter: blur(3px);/*ぼかし*/の行を削除
- アイコンではなくてボタンにしたいとき
- /*アイコンを追加*/から下を全部削除。
- .appeal-button{background-color:transparent;/*背景色無効化*/}のtransparentのところを消してボタンの背景色（#をつけたカラーコード）を入れる
などなど…CSSが少し使えるとより自分好みに変更できるのでオススメです♪
Cocoonアピールエリアで作るSWELL風ファーストビューの完成
ということで、上記のカスタマイズを行うとファーストビューに画像いっぱいが目に入るこのようなヘッダーとトップページが完成しました！
背景色透過とぼかしがオシャレ感を出しているね！
やったー！！「Cocoonぽくない」「SWELLかと思った」と概ね好評価のコメントをいただいています♪（試行錯誤した甲斐があった。笑）
オリジナルカスタマイズです
これはSWELLの憧れから私が考えたカスタマイズです。
アピールエリアというテーマ既存の機能とCSSのコピペは子テーマを使うので、アップデートで上書きされることや大きな失敗はなく比較的安全に行うことができます。（もしレイアウトが崩れたら編集した部分のコードを消してやり直せばOK！）
サイトの玄関口であるヘッダーの雰囲気がガラリと変わりますのでCocoonユーザーの方で興味がありましたらぜひやってみてくださいね。
後々、サイト型トップページの作り方も書いていきたいなと思っています。
ではまた。
Comment
これからブログ書きたいなと思っています。
このブログCocoonで作っているのですか？
可愛くてすごくいいなと思いました。
こんな素敵なブログを作れるようになりたいです。
ありがとうございます！参考にさせて下さい！
> ほんちょういくみさん
ありがとうございます♪Cocoonでちょこちょこカスタマイズして使っています。これからブログを始められるのですね！他の方のブログを見るのが好きなので開設された際にはお邪魔させてください^^
はっちゃんさん、こんばんは。
Twitterでお聞きしようか迷ったのですが、こちらにしました。
Turiccoブログのようにカスタマイズしたいと思ったのですが、
これまでに何度もCSSを追加してきているのですが、リセットしてからの方が良いのでしょうか？初歩的な質問ですみません。
こなきあさん
Twitterではいつもリプ、いいねありがとうございます。
こちらのカスタマイズはアピールエリアを使うので、既にアピールエリアのCSSを入れている、またはCocoonのスキンを使っているとレイアウトに影響があるかもしれません。
リセットしてからが理想ですけど、一度この記事のCSSをコピペしてみておかしいところを手直ししていく方法でもよいかと思います。
上手くいかないとき、お答えできる範囲でサポートしますのでこちらでもTwitterのDMでも大丈夫なのでご連絡ください^^
はっちゃんさん、ご丁寧にありがとうございます。
こちらこそいつもありがとうございます。
アピールエリアを使用していたことがあるのですが、CSSは追加していない気がします。
アイコンを丸くするとか、ヘッダーのロゴが出ないようにするとかその辺をいじった気がします。
Cocoonのスキンはなしにしているので、リセットしてからが理想ですが、アピールエリアをコピペさせていただいてやってみようと思います。
また質問すると思いますのでよろしくお願いしますm(__)m
初めまして。アピールエリアの「背景色は白を透過させる」のところをswellのように網網にする場合ってどこをいじればいいんでしょうか?
>cocoonユーザーさん
初めまして！
私も網掛けはやったことがなかったのですが、試しにアピールエリアに疑似要素を置いてみました。
なんとなくSWELLっぽいかな？とは思います。
こちらのコードです。
.appeal{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.appeal::after{
content: ”;
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,.1);
background-image: radial-gradient(#555 30%, transparent 31%), radial-gradient(#555 30%, transparent 31%);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
pointer-events:none;
}
はっちゃんさん、はじめまして。
ずっと悩んでいたトップページ、この記事にたどり着いて、まさにイメージ通りに仕上がりました！ありがとうございました。
ただ、２つ問題があったので、質問させてください。
①PCで見るとアピールエリアの画像とフロントページの間に余白ができてしまいます。設定で余白をなくすことはできますか？
②スマホで見るとScrollの文字が中央あたりにきてしまいます。画像の下方に配置することはできますか？テキストとボタンを画像の少し下の方に配置する方法などあれば、教えていただきたいです。
> あたるさん
はじめまして！
年末年始しばらく帰省していたためお返事が遅くなりすみません。
お問い合わせの件について。
実際のサイトを拝見していませんので一般的に考えられる範囲でとなりますが…
①アピールエリア下の余白
.main{
margin-top:0;
}
②アピールボタンの位置調整
.appeal{
position:relative;
}
.appeal-button{
position:absolute;
right: 0;
left: 0;
bottom:3rem;
}
のCSS追加で下方配置できるかと思います。
参考になさってください^^
はっちゃんさん
ありがとうございます！
CSS追加したところ、Scrollボタンは下方配置できました。
アピールエリア下の余白はなくならなかったのですが、以前追加したCSSが邪魔してしまっているのかもしれません…知識がなく自分でも解読不能です(^^;
はっちゃんさんの他の記事も参考にさせていただきますね！
あたるさん
Scrollボタン位置調整できてよかったです。
アピールエリア下に配置しているコンテンツを指定して余白を0にすればいいので、ご自身のサイトを確認してみてください。
コンテンツエリア上部余白を0にするCSSではどうでしょうか？
.content {
margin-top: 0;
}
はっちゃんさん
できました！！
いただいたCSSを追加しつつ、アピールエリアに使っている画像のサイズが小さかったので、その大きさに合わせて、「パソコンでの高さ調整」を小さくしたら綺麗になりました！
何度も教えてくださり、本当にありがとうございました！
とてもわかりやすいカスタマイズ解説、ありがとうございました！
やりたかったことができて、とても嬉しいです。
> 千柳亭春宵さん
初めまして。
お役に立てて嬉しいです。
サイトを拝見させていただき、綺麗にアピールエリアができあがって良い感じですね！
ご丁寧にコメントありがとうございました^^
初めまして。
初めてのWordpress、そしてCocoonでのサイト制作にこちらのページを参考にして、TOPページを作ってみました。
しかし、やはり複数画像のスライドを実現したく、Smart Slider3でTOP画像をスライド表示にしました。
なのですが・・・、このページで設定されている
◉背景色は白を透過させる
◉背景画像にぼかしを入れる
◉画像の高さ設定（PC／スマホと別々に）
＊こちらで用意していた画像と、上記の設定の相性が良かったので。
を残したいのです。
Smart Slider3でのスライドショーを生かしたまま、上記の３項目を反映させるためのCSSの書き方など、設定方法があれば教えていただけると助かります。
宜しくお願い致します。