ここ数年で人気が出てユーザーが増えているワードプレス有料テーマの「SWELL」。
綺麗なサイトデザインやトップページのカスタマイズ性、豊富なブロック機能など魅力的な要素がたくさんあります。
SWELLが欲しい…
でもそこは有料テーマで少しお高い感じがするんですよね。ブログで収益が出ているなら検討するけどこの貧乏ブログでは購入は厳しい…そこで。
CocoonでSWELLっぽさを出してみるのもありだよ!
そうだ、私は「Cocoon」のテーマが好きなので、テーマは変えずにSWELL風にできるか挑戦してみたいと思います。
イメージするトップページデザイン(ファーストビジュアル)
SWELLのデモサイトを見ていたときに目にとまったのはこちら。
美しい…ファーストビューで画面いっぱいに広がる画像が素敵すぎて、こんな風にできたらいいな!
Cocoonアピールエリアカスタマイズの完成イメージ
まずは完成イメージをご覧ください。
今回のカスタマイズをするとこのようなファーストビューになります。
- 画像の高さを画面いっぱいに広げる(上部のヘッダーとグローバルメニュー部分は含みません)
- 画像を白っぽくし、ぼかしを入れる
- SWELL風にアイコンを入れて動きをつける
Cocoonで再現するために(考察)
このデザインの大きな特徴は、サイトを訪れた際にまず画面いっぱいに広がる画像ですね。(ファーストビュー)
これを作るにはヘッダーの背景として画像を入れてしまうと中にボタンを置けないので、これを変更するとなると大がかりなカスタマイズになってしまう…
そこで思い付いたのが、
Cocoonにもともとある機能のひとつ、
「アピールエリア」を使ってみようと!
Cocoonアピールエリアの特徴
- トップページのヘッダー下に配置される(正確にはグローバルメニュー→通知エリアの下)
- 画面横幅いっぱいに画像を置ける
- 画像の高さを指定できる
- 内部にタイトル、テキスト、ボタンが置ける
デモサイトのように複数の写真のスライド切り替えはできないけど、ここの画像の高さを変更して、背景色などを変えたらイイ感じになるのではないか?
頭の中でイメージは完成しました。
それでは具体的な手順を書いていきます。
Cocoonアピールエリアを使ってSWELL風ファーストビューを作る手順
- Step1ヘッダーの設定
モバイル用に「ヘッダーモバイルボタン」を作成
- Step2アピールエリアの設定
画像、画像の中に表示するタイトル、本文、ボタンなどの設定
- Step3CSSをコピペする
背景色、文字色、余白などの設定
- Complete完成!
プレビューで確認します
ヘッダーの設定
画像が大きく表示されるので、サイト名(ロゴ)の部分はシンプルな方が合わせやすいかと思います。
現在のロゴはこちらを使っています。(ときどき変えますが)
パソコンの場合
ここはお好みで構わないのですが、下に表示する画像を目立たせるために当サイトはヘッダーレイアウトを右寄せに設定しています。(サイト名+グローバルメニューが横一列に表示されます)
「Cocoon設定」→「ヘッダー」→「ヘッダーレイアウト:トップメニュー(右寄せ)を選択」
モバイルの場合
スマホでのヘッダーについては「ヘッダーモバイルボタン」を設定しました。
こちらもお好みでよいのですが、このサイトでは真ん中にロゴ、左右にそれぞれ検索ボタン、メニューボタンを配置しています。
Cocoonアピールエリアの設定
続いてアピールエリア部分の設定をします。
「Cocoon設定」→「アピールエリア」のタブをクリック。
- アピールエリアの表示:フロントページでのみ表示
- エリア画像:表示したい画像を選択
- テキストエリア表示に✔️(画像のみ表示したい場合は空白にする)
- タイトル:任意のタイトル(なくてもよい)
- メッセージ:任意のメッセージ
- ボタンメッセージ:ボタンに表示する文字(ここでは「Scroll」にしています)
- ボタンリンク先:ボタンをクリックしたときのURLを入力
- 同じページ内にスクロール(リンク)するときはURLの代わりに#をつけてid名を記述します(リンク先にidを指定する方法は後述します)
画像はスマホで表示するときに左右がカットされてしまうので、写したいものが中心にあるとよいかもしれません。(厳密には軸となる位置を指定すること、パソコンとスマホで画像を変更することもCSS可能ですがここでは省略。調整したいときは「background-position」で調べてみてくださいね。)
もともとのアピールエリアの機能で、メッセージやボタンなしで画像のみ表示することもできます。
CSSの設定(コピペOK)
CSSでは背景色などスタイル設定をおこないます。
CSSって何?よく分からない…という人も、コピペできるコードを下に準備したのでイメージ画像と同じようなデサインにはできますよ。
/* アピールエリア---------------------------------------------- *
/*全体*/
.appeal{
height:calc(100vh - 60px); /*パソコンでの高さ調整*/
background-size: cover; /*背景をフィットさせる*/
}
@media screen and (max-width: 834px){
.appeal{
height:calc(100svh - 50px); /*モバイルでの高さ調整*/
}
}
.appeal-in {
height:100%; /*パソコン、スマホ高さ調整*/
width:100%; /*幅を最大に*/
background-color:rgba(250,250,250,.5); /*背景色、白を透過させる*/
backdrop-filter: blur(3px); /*ぼかしpxで調整*/
}
/*コンテンツエリア*/
.appeal-content {
background-color:initial; /*デフォルトの背景色無効化*/
}
/*ボタン(アイコン部分)*/
.appeal-button{
background-color:initial; /*ボタンの背景色無効化*/
font-size:.8em; /*文字を少し小さく*/
color:initial;/*アイコンの色はここで設定*/
}
/*アイコンを追加*/
.appeal-button:before{
display:block;
font-family: "Font Awesome 5 Free";
font-weight:bold;
content: "\f103"; /*アイコン指定(シングル矢印は\f107にする)*/
font-size: 1.5em; /*アイコンの大きさ*/
animation: move 1s infinite alternate ease-in-out; /*アイコンをゆっくり動かす*/
}
@keyframes move{
from {
transform: translateY(0);
}
to {
transform: translateY(10px);
}
}
/*スムーズにスクロール*/
html { scroll-behavior: smooth;}
アイコンを下に配置する場合はこのCSSを追加
/*アイコンを下に配置する場合*/
.appeal{
position:relative;/*ここを起点に*/
}
.appeal-button{
position: absolute;/*アイコンを配置する*/
bottom:30px;/*下から30pxの位置*/
left: 50%;/*中央寄せにする*/
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
これでほぼ完成イメージと同じデザインになっているかと思います。
アイコンはFont Awesome 5を使用
アイコンは【Font Awesome 5】を使用しています。
Cocoonには標準搭載されているので、「Cocoon設定」→「全体」→サイトアイコンフォントのところでFont Awesome 5に○をつけておいてください。
特にアイコンと、リンク先にページ内スクロールを入れたことで、よりSWELLに近付いたので個人的にお気に入りです^^
ページ内リンクについて(アンカーリンク)
同じページ内の途中にジャンプするにはidを使った方法でリンクを作成するので、リンク先にidを指定する必要があります。
- Step1スクロール先にidを指定
ジャンプしたいところのタグの中に、目印となるように任意のid名(アンカー)をつけておく。
例:<h2 id="id名">着地点</h2>
- Step2リンクボタンの設定
指定したidのところにジャンプするリンクコードを作成する。
例:<a href="#id名">scroll(ここからジャンプ)</a>
Cocoonアピールエリアで作るSWELL風ファーストビューの完成
ということで、上記のカスタマイズを行うとファーストビューに画像いっぱいが目に入るこのようなヘッダーとトップページが完成しました!
背景色透過とぼかしがオシャレ感を出しているね!
やったー!!「Cocoonぽくない」「SWELLかと思った」と概ね好評価のコメントをいただいています♪(試行錯誤した甲斐があった~)
オリジナルカスタマイズです
これはSWELLの憧れから私が考えたカスタマイズです。
アピールエリアというCocoonの標準機能とCSSの記述は子テーマを使うので、アップデートで上書きされることや大きな失敗はなく安全にできますよ。
もしレイアウトが崩れた場合でも、追加したCSS部分を全部消せば元に戻るので大丈夫。
サイトの玄関口であるヘッダーの雰囲気がガラリと変わりますのでCocoonユーザーの方で興味がありましたらぜひやってみてくださいね。
後々、サイト型トップページの作り方も書いていきたいなと思っています。
アピールエリアをフルスクリーンにする方法
また、アピールエリアをフルスクリーンにする方法を、ブログ仲間のユルリトさんが記事にしているので参考にしてください。
アピールエリア内に「検索フォーム」を置く方法もあります
アピールエリア内に検索フォームを置く方法も公開しました。
この記事は以上です。最後まで読んでいただきありがとうございました。
Comment
これからブログ書きたいなと思っています。
このブログCocoonで作っているのですか?
可愛くてすごくいいなと思いました。
こんな素敵なブログを作れるようになりたいです。
ありがとうございます!参考にさせて下さい!
> ほんちょういくみさん
ありがとうございます♪Cocoonでちょこちょこカスタマイズして使っています。これからブログを始められるのですね!他の方のブログを見るのが好きなので開設された際にはお邪魔させてください^^
はっちゃんさん、こんばんは。
Twitterでお聞きしようか迷ったのですが、こちらにしました。
Turiccoブログのようにカスタマイズしたいと思ったのですが、
これまでに何度もCSSを追加してきているのですが、リセットしてからの方が良いのでしょうか?初歩的な質問ですみません。
こなきあさん
Twitterではいつもリプ、いいねありがとうございます。
こちらのカスタマイズはアピールエリアを使うので、既にアピールエリアのCSSを入れている、またはCocoonのスキンを使っているとレイアウトに影響があるかもしれません。
リセットしてからが理想ですけど、一度この記事のCSSをコピペしてみておかしいところを手直ししていく方法でもよいかと思います。
上手くいかないとき、お答えできる範囲でサポートしますのでこちらでもTwitterのDMでも大丈夫なのでご連絡ください^^
はっちゃんさん、ご丁寧にありがとうございます。
こちらこそいつもありがとうございます。
アピールエリアを使用していたことがあるのですが、CSSは追加していない気がします。
アイコンを丸くするとか、ヘッダーのロゴが出ないようにするとかその辺をいじった気がします。
Cocoonのスキンはなしにしているので、リセットしてからが理想ですが、アピールエリアをコピペさせていただいてやってみようと思います。
また質問すると思いますのでよろしくお願いしますm(__)m
初めまして。アピールエリアの「背景色は白を透過させる」のところをswellのように網網にする場合ってどこをいじればいいんでしょうか?
>cocoonユーザーさん
初めまして!
私も網掛けはやったことがなかったのですが、試しにアピールエリアに疑似要素を置いてみました。
なんとなくSWELLっぽいかな?とは思います。
はっちゃんさん、はじめまして。
ずっと悩んでいたトップページ、この記事にたどり着いて、まさにイメージ通りに仕上がりました!ありがとうございました。
ただ、2つ問題があったので、質問させてください。
①PCで見るとアピールエリアの画像とフロントページの間に余白ができてしまいます。設定で余白をなくすことはできますか?
②スマホで見るとScrollの文字が中央あたりにきてしまいます。画像の下方に配置することはできますか?テキストとボタンを画像の少し下の方に配置する方法などあれば、教えていただきたいです。
> あたるさん
はじめまして!
年末年始しばらく帰省していたためお返事が遅くなりすみません。
お問い合わせの件について。
実際のサイトを拝見していませんので一般的に考えられる範囲でとなりますが…
①アピールエリア下の余白
.main{
margin-top:0;
}
②アピールボタンの位置調整
/*アイコンを下に配置*/
.appeal{
position:relative;
}
.appeal-button{
position: absolute;
bottom:30px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
のCSS追加で下方配置できるかと思います。
参考になさってください^^
はっちゃんさん
ありがとうございます!
CSS追加したところ、Scrollボタンは下方配置できました。
アピールエリア下の余白はなくならなかったのですが、以前追加したCSSが邪魔してしまっているのかもしれません…知識がなく自分でも解読不能です(^^;
はっちゃんさんの他の記事も参考にさせていただきますね!
あたるさん
Scrollボタン位置調整できてよかったです。
アピールエリア下に配置しているコンテンツを指定して余白を0にすればいいので、ご自身のサイトを確認してみてください。
コンテンツエリア上部余白を0にするCSSではどうでしょうか?
.content {
margin-top: 0;
}
はっちゃんさん
できました!!
いただいたCSSを追加しつつ、アピールエリアに使っている画像のサイズが小さかったので、その大きさに合わせて、「パソコンでの高さ調整」を小さくしたら綺麗になりました!
何度も教えてくださり、本当にありがとうございました!
とてもわかりやすいカスタマイズ解説、ありがとうございました!
やりたかったことができて、とても嬉しいです。
> 千柳亭春宵さん
初めまして。
お役に立てて嬉しいです。
サイトを拝見させていただき、綺麗にアピールエリアができあがって良い感じですね!
ご丁寧にコメントありがとうございました^^
初めまして。
初めてのWordpress、そしてCocoonでのサイト制作にこちらのページを参考にして、TOPページを作ってみました。
しかし、やはり複数画像のスライドを実現したく、Smart Slider3でTOP画像をスライド表示にしました。
なのですが・・・、このページで設定されている
◉背景色は白を透過させる
◉背景画像にぼかしを入れる
◉画像の高さ設定(PC/スマホと別々に)
*こちらで用意していた画像と、上記の設定の相性が良かったので。
を残したいのです。
Smart Slider3でのスライドショーを生かしたまま、上記の3項目を反映させるためのCSSの書き方など、設定方法があれば教えていただけると助かります。
宜しくお願い致します。
マークさん
初めまして。
Smart Slider3で作成したスライダーにも反映できますよ。
セレクタ部分(どの部分にCSSを反映させるか。このカスタマイズではappealやappeal-inなど)をSmart Slider3で作成したスライダーに合わせるだけでよいかと思います。
具体的には、
/*Smart Slider3***********************/
div#n2-ss-2 .n2-ss-slide {
background-color:rgba(255,255,255,.2);/*背景色、白を透過させる*/
backdrop-filter: blur(3px);/*ぼかし*/
}
/*834px以下*/
@media screen and (max-width: 834px){
.n2-ss-slider .n2-ss-slide{
min-height:calc(100svh – 46px)!important;/*スマホでの高さ調整*/
}
}
で反映しましたが、ご自身のサイトで検証されてみてください。
【参考ページ】
『釣りっこ』 https://fishing.turicco.com/
(実際にSmart Slider3プラグインを入れてみました。後日スライダーは削除する予定です)
検証するには?
『デベロッパーツールを使ったセレクタの調べ方とCSSコードの書き方/初心者向け』
はっちゃんさん
初心者のため、簡単なカスタマイズにつまづいていました。教えていただき、ありがとうございます!無事、反映できました。
ただ、これまでスマホ表示では、アピールエリア部分にあるエリア画像が画面いっぱいに広がって見栄えが良かったのですが、Smart Slider3を設定した上で、教えていただいたCSS設定を行ったところ、エリア画像が小さくなってしまいました。
これは、どんな設定が影響しているのでしょうか?
ご教示いただけますと、助かります。
Smart Slider3は縦横比率を保ったまま表示されるからですね。
Smart Slider3のダッシュボードで設定する(min-height)か、CSSでメディアクエリ部分の高さを調整されてみてください。
/*834px以下*/
@media screen and (max-width: 834px){
.n2-ss-slider .n2-ss-slide{
min-height:ここに高さを入力!important;/*スマホでの高さ調整*/
}
参考として100vhで画面いっぱいの高さとなります。
はっちゃんさん
ご丁寧に対応いただき、ありがとうございました。
解決しました!
今後も参考にさせていただき、サイト作りに励んでいこうと思います。
初めまして。
yukimiと申します。
Cocoonのカスタマイズがとても分かりやすく、TOPページを参考にさせていただきました。(以前はブログ形式だったのですが、サイト形式にしたく探しているとこちらのサイトにたどり着きました。)
一つお尋ねしたいのですが、はっちゃんさんのTOPページのアピールエリアにて検索ウィンドウがあるかと思いますが、そちらの方法はどこか記事で掲載されているのでしょうか。
その方法を掲載されているページを教えていただけますと助かります。
私もサイトを運用している上で、TOPページで検索できるようにしたくコメントをさせていただきました。
yuumikiさん
初めまして。
ブログを参考にしていただきコメントありがとうございます。
アピールエリアの検索フォームについてはCocoonのフォーラム(下記URL)を参考にしました。
https://wp-cocoon.com/community/demands/%E6%A4%9C%E7%B4%A2%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AE%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8C%E6%AC%B2%E3%81%97%E3%81%84/
検索フォームのショーコードは実装予定がないとのことで、アピールエリアに直接formを入力しています。(フォームで回答されている方のHTMLコードを使用しました)
推奨される使い方かは分かりませんが…現在動作はしていますので、ひとつの方法としてご覧になってみてください。