当ブログを紹介いただいたサイトを掲載します受付中

Cocoonアピールエリア/SWELL風オシャレなトップページ(ファーストビジュアル)を作ってみるカスタマイズ

アイキャッチ/アピールエリア カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク

ここ数年で人気が出てユーザーが増えているワードプレス有料テーマの「SWELL」。

綺麗なサイトデザインやトップページのカスタマイズ性、豊富なブロック機能など魅力的な要素がたくさんあります。

SWELLが欲しい…

でもそこは有料テーマで少しお高い感じがするんですよね。ブログで収益が出ているなら検討するけどこの貧乏ブログでは購入は厳しい…そこで。

CocoonでSWELLっぽさを出してみるのもありだよ!

そうだ、私は「Cocoon」のテーマが好きなので、テーマは変えずにSWELL風にできるか挑戦してみたいと思います。

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで複数サイトを運営しています
はっちゃん
です
プロフィール

イメージするトップページデザイン(ファーストビジュアル)

SWELLのデモサイトを見ていたときに目にとまったのはこちら。

美しい…ファーストビューで画面いっぱいに広がる画像が素敵すぎて、こんな風にできたらいいな!

スポンサーリンク

Cocoonアピールエリアカスタマイズの完成イメージ

まずは完成イメージをご覧ください。

今回のカスタマイズをするとこのようなファーストビューになります。

POINT
  • 画像の高さを画面いっぱいに広げる(上部のヘッダーとグローバルメニュー部分は含みません)
  • 画像を白っぽくし、ぼかしを入れる
  • SWELL風にアイコンを入れて動きをつける
スポンサーリンク

Cocoonで再現するために(考察)

このデザインの大きな特徴は、サイトを訪れた際にまず画面いっぱいに広がる画像ですね。(ファーストビュー)

これを作るにはヘッダーの背景として画像を入れてしまうと中にボタンを置けないので、これを変更するとなると大がかりなカスタマイズになってしまう…

そこで思い付いたのが、

Cocoonにもともとある機能のひとつ、

「アピールエリア」を使ってみようと!

Cocoonアピールエリアの特徴

  • トップページのヘッダー下に配置される(正確にはグローバルメニュー→通知エリアの下)
  • 画面横幅いっぱいに画像を置ける
  • 画像の高さを指定できる
  • 内部にタイトル、テキスト、ボタンが置ける

デモサイトのように複数の写真のスライド切り替えはできないけど、ここの画像の高さを変更して、背景色などを変えたらイイ感じになるのではないか?

頭の中でイメージは完成しました。

それでは具体的な手順を書いていきます。

スポンサーリンク

Cocoonアピールエリアを使ってSWELL風ファーストビューを作る手順

  • Step1
    ヘッダーの設定

    モバイル用に「ヘッダーモバイルボタン」を作成

  • Step2
    アピールエリアの設定

    画像、画像の中に表示するタイトル、本文、ボタンなどの設定

  • Step3
    CSSをコピペする

    背景色、文字色、余白などの設定

  • Complete
    完成!

    プレビューで確認します

ヘッダーの設定

画像が大きく表示されるので、サイト名(ロゴ)の部分はシンプルな方が合わせやすいかと思います。

現在のロゴはこちらを使っています。(ときどき変えますが)

アピールエリア

パソコンの場合

ここはお好みで構わないのですが、下に表示する画像を目立たせるために当サイトはヘッダーレイアウトを右寄せに設定しています。(サイト名+グローバルメニューが横一列に表示されます)


「Cocoon設定」→「ヘッダー」→「ヘッダーレイアウト:トップメニュー(右寄せ)を選択」

左側にサイトロゴ、右寄せでグローバルメニューが表示され、ヘッダー配置がすっきり一列にまとまります!
アピールエリア

モバイルの場合

スマホでのヘッダーについては「ヘッダーモバイルボタン」を設定しました。

こちらもお好みでよいのですが、このサイトでは真ん中にロゴ、左右にそれぞれ検索ボタン、メニューボタンを配置しています。

モバイルヘッダー
ヘッダーモバイルボタンの作り方、表示のさせ方は公式サイトを参照ください。

Cocoonアピールエリアの設定

続いてアピールエリア部分の設定をします。

「Cocoon設定」→「アピールエリア」のタブをクリック。

アピールエリア
アピールエリア
  1. アピールエリアの表示:フロントページでのみ表示
  2. エリア画像:表示したい画像を選択
  3. テキストエリア表示に✔️(画像のみ表示したい場合は空白にする)
  4. タイトル:任意のタイトル(なくてもよい)
  5. メッセージ:任意のメッセージ
  6. ボタンメッセージ:ボタンに表示する文字(ここでは「Scroll」にしています)
  7. ボタンリンク先:ボタンをクリックしたときのURLを入力

画像はスマホで表示するときに左右がカットされてしまうので、写したいものが中心にあるとよいかもしれません。(厳密には軸となる位置を指定すること、パソコンとスマホで画像を変更することもCSS可能ですがここでは省略。調整したいときは「background-position」で調べてみてくださいね。)

もともとのアピールエリアの機能で、メッセージやボタンなしで画像のみ表示することもできます。

CSSの設定(コピペOK)

CSSでは背景色などスタイル設定をおこないます。

CSSって何?よく分からない…という人も、コピペできるコードを下に準備したのでイメージ画像と同じようなデサインにはできますよ。

コード編集前にはバックアップをとり、子テーマを使用しましょう。

CSSコードを貼り付ける場所

外観→テーマファイルエディター→Cocoon Child(子テーマが選択されていることを確認して)→スタイルシート(style.css)

HTML/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%);
}

モバイルで「モバイルフッターボタン」を表示している場合、アイコンを下に配置するとモバイルフッターボタンとアイコンが重なってしまいます。(モバイルフッターボタンを表示しない設定にする等、Cocoon設定「モバイル」で調整してください)

これでほぼ完成イメージと同じデザインになっているかと思います。

このCSSで設定していること
  • アピールエリアの横幅を100%にする
  • 背景色は白を透過させる
  • 背景画像にぼかしを入れる
  • 画像の高さ設定(PC/スマホと別々にヘッダー分の高さを引く)
  • ボタンの部分の背景色は無効にする
  • ボタンの代わりにアイコンを追加
  • アイコンをゆらゆら動かすアニメーション
  • ページ内リンクをスムーズにスクロールさせる
  • NEW アピールボタン(アイコン)の位置を下に調整する
スポンサーリンク

アイコンはFont Awesome 5を使用

アイコンは【Font Awesome 5】を使用しています。

Cocoonには標準搭載されているので、「Cocoon設定」→「全体」→サイトアイコンフォントのところでFont Awesome 5に○をつけておいてください。

特にアイコンと、リンク先にページ内スクロールを入れたことで、よりSWELLに近付いたので個人的にお気に入りです^^

スクロール
アイコンについて

矢印のアイコンはシングルとダブル、お好みでご使用ください。

(CSSの.appeal-button:before{ }に指定します)

(ダブル)→ content: “\f103”;

(シングル)→ content: “\f107”;

同じページ内の途中にジャンプするにはidを使った方法でリンクを作成するので、リンク先にidを指定する必要があります。

アンカーリンク設置の手順
  • Step1
    スクロール先にidを指定

    ジャンプしたいところのタグの中に、目印となるように任意のid名(アンカー)をつけておく。

    例:<h2 id="id名">着地点</h2>

    ブロックエディターの場合はブロックを選択し、右側メニュー:高度な設定→HTMLアンカーに new(任意のid名) と入力するだけでOK

  • Step2
    リンクボタンの設定

    指定したidのところにジャンプするリンクコードを作成する。

    例:<a href="#id名">scroll(ここからジャンプ)</a>

    このカスタマイズではアピールエリア設定→ボタンリンク先:#new(任意のid名の先頭に半角#をつける) と入力するだけでOK。

詳しくはこちらにまとめました。

Cocoonアピールエリアで作るSWELL風ファーストビューの完成

ということで、上記のカスタマイズを行うとファーストビューに画像いっぱいが目に入るこのようなヘッダーとトップページが完成しました!

\パソコンで表示したイメージ/
\スマホで表示したイメージ/
アピールエリア

背景色透過とぼかしがオシャレ感を出しているね!

やったー!!「Cocoonぽくない」「SWELLかと思った」と概ね好評価のコメントをいただいています♪(試行錯誤した甲斐があった~)

オリジナルカスタマイズです

これはSWELLの憧れから私が考えたカスタマイズです。

アピールエリアというCocoonの標準機能とCSSの記述は子テーマを使うので、アップデートで上書きされることや大きな失敗はなく安全にできますよ。

もしレイアウトが崩れた場合でも、追加したCSS部分を全部消せば元に戻るので大丈夫。

サイトの玄関口であるヘッダーの雰囲気がガラリと変わりますのでCocoonユーザーの方で興味がありましたらぜひやってみてくださいね。

後々、サイト型トップページの作り方も書いていきたいなと思っています。

\サイト型トップページ編、公開しました/

アピールエリアをフルスクリーンにする方法

また、アピールエリアをフルスクリーンにする方法を、ブログ仲間のユルリトさんが記事にしているので参考にしてください。

アピールエリア内に「検索フォーム」を置く方法もあります

アピールエリア内に検索フォームを置く方法も公開しました。

\ファーストビューに検索フォームを置きたい方向け/

この記事は以上です。最後まで読んでいただきありがとうございました。

Comment

  1. ほんちょういくみ より:

    これからブログ書きたいなと思っています。
    このブログCocoonで作っているのですか?
    可愛くてすごくいいなと思いました。
    こんな素敵なブログを作れるようになりたいです。
    ありがとうございます!参考にさせて下さい!

    • はっちゃん はっちゃん より:

      > ほんちょういくみさん
      ありがとうございます♪Cocoonでちょこちょこカスタマイズして使っています。これからブログを始められるのですね!他の方のブログを見るのが好きなので開設された際にはお邪魔させてください^^

  2. こなきあ より:

    はっちゃんさん、こんばんは。
    Twitterでお聞きしようか迷ったのですが、こちらにしました。
    Turiccoブログのようにカスタマイズしたいと思ったのですが、
    これまでに何度もCSSを追加してきているのですが、リセットしてからの方が良いのでしょうか?初歩的な質問ですみません。

  3. はっちゃん はっちゃん より:

    こなきあさん
    Twitterではいつもリプ、いいねありがとうございます。

    こちらのカスタマイズはアピールエリアを使うので、既にアピールエリアのCSSを入れている、またはCocoonのスキンを使っているとレイアウトに影響があるかもしれません。

    リセットしてからが理想ですけど、一度この記事のCSSをコピペしてみておかしいところを手直ししていく方法でもよいかと思います。

    上手くいかないとき、お答えできる範囲でサポートしますのでこちらでもTwitterのDMでも大丈夫なのでご連絡ください^^

    • こなきあ より:

      はっちゃんさん、ご丁寧にありがとうございます。
      こちらこそいつもありがとうございます。

      アピールエリアを使用していたことがあるのですが、CSSは追加していない気がします。
      アイコンを丸くするとか、ヘッダーのロゴが出ないようにするとかその辺をいじった気がします。

      Cocoonのスキンはなしにしているので、リセットしてからが理想ですが、アピールエリアをコピペさせていただいてやってみようと思います。
      また質問すると思いますのでよろしくお願いしますm(__)m

  4. 初めまして。アピールエリアの「背景色は白を透過させる」のところをswellのように網網にする場合ってどこをいじればいいんでしょうか?

    • はっちゃん はっちゃん より:

      >cocoonユーザーさん
      初めまして!
      私も網掛けはやったことがなかったのですが、試しにアピールエリアに疑似要素を置いてみました。

      なんとなくSWELLっぽいかな?とは思います。

  5. あたる より:

    はっちゃんさん、はじめまして。
    ずっと悩んでいたトップページ、この記事にたどり着いて、まさにイメージ通りに仕上がりました!ありがとうございました。
    ただ、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追加で下方配置できるかと思います。
      参考になさってください^^

  6. あたる より:

    はっちゃんさん

    ありがとうございます!
    CSS追加したところ、Scrollボタンは下方配置できました。
    アピールエリア下の余白はなくならなかったのですが、以前追加したCSSが邪魔してしまっているのかもしれません…知識がなく自分でも解読不能です(^^;
    はっちゃんさんの他の記事も参考にさせていただきますね!

    • はっちゃん はっちゃん より:

      あたるさん

      Scrollボタン位置調整できてよかったです。

      アピールエリア下に配置しているコンテンツを指定して余白を0にすればいいので、ご自身のサイトを確認してみてください。

      コンテンツエリア上部余白を0にするCSSではどうでしょうか?

      .content {
      margin-top: 0;
      }

  7. あたる より:

    はっちゃんさん

    できました!!
    いただいたCSSを追加しつつ、アピールエリアに使っている画像のサイズが小さかったので、その大きさに合わせて、「パソコンでの高さ調整」を小さくしたら綺麗になりました!
    何度も教えてくださり、本当にありがとうございました!

  8. 千柳亭春宵 より:

    とてもわかりやすいカスタマイズ解説、ありがとうございました!
    やりたかったことができて、とても嬉しいです。

    • はっちゃん はっちゃん より:

      > 千柳亭春宵さん
      初めまして。
      お役に立てて嬉しいです。
      サイトを拝見させていただき、綺麗にアピールエリアができあがって良い感じですね!
      ご丁寧にコメントありがとうございました^^

  9. マーク より:

    初めまして。

    初めてのWordpress、そしてCocoonでのサイト制作にこちらのページを参考にして、TOPページを作ってみました。

    しかし、やはり複数画像のスライドを実現したく、Smart Slider3でTOP画像をスライド表示にしました。

    なのですが・・・、このページで設定されている

    ◉背景色は白を透過させる
    ◉背景画像にぼかしを入れる
    ◉画像の高さ設定(PC/スマホと別々に)

    *こちらで用意していた画像と、上記の設定の相性が良かったので。

    を残したいのです。

    Smart Slider3でのスライドショーを生かしたまま、上記の3項目を反映させるためのCSSの書き方など、設定方法があれば教えていただけると助かります。

    宜しくお願い致します。

  10. マーク より:

    はっちゃんさん

    初心者のため、簡単なカスタマイズにつまづいていました。教えていただき、ありがとうございます!無事、反映できました。

    ただ、これまでスマホ表示では、アピールエリア部分にあるエリア画像が画面いっぱいに広がって見栄えが良かったのですが、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で画面いっぱいの高さとなります。

  11. マーク より:

    はっちゃんさん

    ご丁寧に対応いただき、ありがとうございました。
    解決しました!

    今後も参考にさせていただき、サイト作りに励んでいこうと思います。

  12. yukimi より:

    初めまして。
    yukimiと申します。

    Cocoonのカスタマイズがとても分かりやすく、TOPページを参考にさせていただきました。(以前はブログ形式だったのですが、サイト形式にしたく探しているとこちらのサイトにたどり着きました。)

    一つお尋ねしたいのですが、はっちゃんさんのTOPページのアピールエリアにて検索ウィンドウがあるかと思いますが、そちらの方法はどこか記事で掲載されているのでしょうか。
    その方法を掲載されているページを教えていただけますと助かります。

    私もサイトを運用している上で、TOPページで検索できるようにしたくコメントをさせていただきました。

タイトルとURLをコピーしました