CocoonでSWELL風のオシャレなヘッダーを作ってみる(アピールエリアとCSSを使う方法)

アイキャッチ/ヘッダーカスタマイズ
この記事はWordPressのテーマCocoon(コクーン)を対象としたカスタマイズになります。

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

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

SWELLが欲しい…

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

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

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

イメージするヘッダーデザイン

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

これはスマホで見た場合のデザインです
SWELL_demo
引用:SWELLのデモサイト一覧
実際のデモサイト一覧はこちら

美しい…

こんな風にできたらいいな(*´∀`*)ポッ

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

このデザインの大きな特徴は、サイトを訪れた際に画面いっぱいに広がる画像ですね。

これを作るにはヘッダーの背景として画像を入れてしまうと中にボタンを置けないので、これを変更するとなるとヘッダーのPHPをいじったりCocoonの骨組みを変える大がかりなカスタマイズになってしまう…(更新のたびにリセットされてしまうし面倒)

そこで思い付いたのが、

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

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

アピールエリアの特徴

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

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

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

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

SWELL風ヘッダーを作る手順

  • STEP1
    ヘッダーの設定

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

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

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

  • STEP3
    CSSをコピペする

    アピールエリアのデザインを変更します

  • 完成!

1.ヘッダー部分の設定

ロゴに画像を使っている場合、シンプルな方が合わせやすいかと思います。

現在のロゴはこちらを使っています。

パソコンの場合

ここはお好みで構わないのですが、下に表示する画像を目立たせるために私はヘッダーレイアウトを右寄せに変更しました。


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

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

スマホの場合

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

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

2.アピールエリアの設定

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

「Cocoon設定」→「アピールエリア」

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

※その他はCSSで設定するので空欄のままにします。

画像はスマホで表示するときに左右がカットされてしまうので、写したいものが中心にあるとよいかもしれません。(SWELLはPCとスマホで別々の写真を設定できるようです。これは羨ましい)

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

3.CSSの設定

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。

背景色などのデザインの設定をおこないます。

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

コード編集前にはバックアップをとり、子テーマを使用することをオススメします。

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

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

こちらのコードをコピペします
/* アピールエリア---------------------------------------------- *

/*全体*/
.appeal-in {
min-height:800px!important;/*PCで表示する画像の高さ*/
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:550px!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:transparent;/*背景色無効化*/
font-weight:normal;
}

/*アイコンを追加*/
.appeal-button:before{
display:block;
font-family: "Font Awesome 5 Free";
font-weight:bold;
content: "\f103";
font-size: 2em;
color: #fff; 
animation: move 1s infinite alternate ease-in-out;
}

@keyframes move{
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}

プレビューで確認するとほぼ私の現在のデザインと同じなっているかと思います。(デザインが崩れる場合はコードのミスがあるかもしれません)

このCSSで設定していること

  • アピールエリアの横幅を100%に
  • 背景色は白を透過させる
  • 背景画像にぼかしを入れる
  • 画像の高さ設定(PC/スマホと別々に)
  • ボタンの部分の背景色は無効にする
  • ボタンの代わりにアイコンを追加
  • アイコンをゆらゆら動かすアニメーション

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

スクロール
アイコンについて
  • Font Awesome 5

を使用しています。

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

分かりやすいように簡単にメモ書きを入れたので画像の高さや文字色などお好みで変更してくださいね。

コード変更例
  • 背景のぼかしがいらないとき
    • backdrop-filter: blur(3px);/*ぼかし*/の行を削除
  • アイコンではなくてボタンにしたいとき
    • /*アイコンを追加*/から下を全部削除。
    • .appeal-button{background:transparent;/*背景色無効化*/}のtransparentのところを消してボタンの背景色(#をつけたカラーコード)を入れる

などなど…CSSが少し使えるとより自分好みに変更できるのでオススメです♪

SWELL風ヘッダーの完成

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

ヘッダー

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

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

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

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

アピールエリアという既存の機能とCSSのコピペは子テーマを使うので、アップデートで上書きされることや大きな失敗はなく比較的安全に行うことができます。(もしレイアウトが崩れたらコードを消してやり直せばOK!)

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

あ、それからアドセンスの広告をトップページから外しました。せっかくトップに画像入れたのに、広告がドカーンとくるのはちょっと…(SWELL欲しいと冒頭に書いたのにますます収益アップから遠ざかる人)

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

ではまた。

Twitterで公開しました!
カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、下記の点を確認してみてください。

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計なスペース等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか

事前にバックアップをとり、カスタマイズは慎重に行いましょう。

ブログカスタマイズ
\この記事をシェアする/
\はっちゃんをフォローする/
Turicco

Comment

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

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

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

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

Shopping


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