Cocoonをコーポレートサイトっぽくカスタマイズ!①トップページ編

Cocoonをコーポレートサイトっぽくカスタマイズ WORDPRESS
スポンサーリンク

Cocoonが便利すぎて、なんとかコーポレートサイトとかビジネスサイトっぽくカスタマイズ出来ないかと思いいろいろ試してみることにしました。

調べてもあまりそういったカスタマイズ例が出てこなかったので、他の方の参考になるかわかりませんが自分のためにもメモしておきます。

 

コーポレートサイトとして求めるもの

  • とりあえず固定ページは1カラム、ブログページは2カラムにすることに。
  • 想定としてはクリニックやサロンのページ。
  • セクションによっては幅をいっぱいに使った背景を設定したい。
  • メインビジュアル下にバナーエリアを設定したい
  • なるべくdisplay:none;は使わない。

あたりでしょうか。

とりあえずぱぱっと作ってみたトップページがこちらになります。

Cocoonをコーポレートサイトっぽくカスタマイズ

コンセプト・スタッフ、最終セクションに全幅の背景を設定していますが、これはスタイルシートです。

アピールエリア下のバナーが4つ並んでいる部分はウィジットとWordpressデフォルトのギャラリーを使用。リンクのために軽いプラグイン使用。スタイルシートもちょっと書いています。

ヘッダには少し影をつけました。

#header-container { position: relative; box-shadow: 0 5px 15px -5px rgba(0,0,0,.8); }

みたいなかんじ。

コーポレートサイトっぽくするためのCocoon設定

とりあえず最初にCocoon設定で設定したのは以下。

全体タブ

サイトキーカラー…紺色に
フォント…Noto Sans JP
サイドバー…「固定ページで非表示」

ヘッダータブ

ヘッダーレイアウト…「トップメニュー(右寄せ)」
ヘッダーロゴ
ヘッダー全体色…紺色に

本文

投稿情報表示設定の「投稿者名の表示」のチェックを外す。

アピールエリアタブ

HTMLが使えるので電話番号周りをちょっと装飾、ボタンも。

横いっぱいにはみ出して背景を設定したい

ランディングページなど、1カラムのページでよく見るやつです。
全幅の背景は「親要素から子要素をはみ出させて背景を画面いっぱいに表示する方法」を参考にさせていただきました。

背景の上に白または半透明のボックスを乗せられるようにしています。

 

メインビジュアル下にバナーエリアを設定したい

アピールエリアの下にバナーエリアを置いてみました。
外観→ウィジット→「固定ページタイトル上」にギャラリーウィジットを配置。

スタイルは「WordPress標準のギャラリーのCSSをカスタマイズする方法」を参考にさせていただきました。

個人的にバナーを隙間なく並べたかったのでちょこちょこ変えました。
こんなかんじでしょうか。

.gallery { width: 100%; margin-bottom: 20px!important; overflow: hidden; }
.gallery br { display: none; } 
.gallery-item { float: left; margin-bottom: 0!important; }
.gallery-icon { text-align: center; }
.gallery-icon img { width: 100%; height: auto; margin-bottom: 10px!important; }
.gallery-columns-2 .gallery-item, .gallery-columns-3 .gallery-item, .gallery-columns-4 .gallery-item, .gallery-columns-5 .gallery-item { margin: 0; }
.gallery-columns-1 .gallery-item { width: 100%; margin-right: 0; }
.gallery-columns-2 .gallery-item { width: 50%; }
.gallery-columns-3 .gallery-item { width: 33.33333%; }
.gallery-columns-4 .gallery-item { width: 25%; }
.gallery-columns-5 .gallery-item { width: 20%; }

@media screen and (max-width: 640px) {
	.gallery-icon img { margin-bottom: 0!important; }
	.gallery-columns-2 .gallery-item { width: 50%; margin: 0; }
	.gallery-columns-3 .gallery-item, .gallery-columns-4 .gallery-item { width: 50%; margin: 0; }
	.gallery-columns-5 .gallery-item { width: 31.33333%; margin: 0; }
}

640px以下の表示だとこんな感じになります。

Cocoonをコーポレートサイトっぽくカスタマイズ

ただ、Wordpress標準のギャラリー機能だと自由にリンクを設定する事が出来ないのです。
Gallery Custom Linksというプラグインを使用するとリンク設定が出来るようになるので、今回はこちらを入れました。

※2019/12/12 追記
プラグインですが、jQueryの読み込み順エラーが出るようです。
現在プラグインなしでの表示に変えてあります。

【変更手順】
・ウィジットをギャラリーではなくHTMLに変更し、もともとギャラリー時に生成されていたソースをそのままコピペ。
・プラグインで生成されていたリンクのクラス・クリックイベント(class=… onclick=…)を削除。
・ギャラリーウィジットを削除。
・プラグインGallery Custom Linksの停止・削除。

jQueryはテーマによって相性があります。読み込み順もそうですが、干渉したりなどで正常に動かなかったりするんです。
今回確認不足でした。申し訳ないです。

 

Cocoonをコーポレートサイトっぽくカスタマイズ!①まとめ

とりあえずトップページだけですが、コーポレートサイトとかビジネスサイトっぽい感じになったかなと思います。
Cocoonは編集画面が非常に使いやすいので、色々なサイトにおすすめできると思います。

次は下層ページを作ってみたいのですが、最近またゼルダの伝説BotWをやり始めてしまったので完成はいつになるやら…

※2019/11/16追記
トップページに「新着情報一覧」が欲しいなと思ったので追加しました。

ひととおりできあがったサンプルサイト公開しています。(広告出ますが…)

※2019/12/12追記
ヘッダに電話番号が欲しいなと思ったので追加しました。

コメント

  1. とても参考になります。
    私はcocoon勉強中で、コーポレートサイトに出来ないか試行錯誤中でした。

    • nullll nullll より:

      わあありがとうございます…!
      拙い内容ですが少しでもお役に立てたのならこれに勝る喜びはありません…!

  2. あき より:

    はじめまして。サイト作成の見習い中です。
    スタイルシートを齷齪しながら勉強中なのですが、少し勉強させて下さい。

    「横いっぱいにはみ出して背景を設定したい」の見出しの辺りです。。。
    全幅の背景は「親要素から子要素をはみ出させて背景を画面いっぱいに表示する方法」を参考にさせていただきました。

    とあり、リンク先を読んでcssをそのまま張り付けただけなのですか?
    cocoonの場合、cssをそのまま張り付けるだけではダメですか?
    また、htmlもいじらないといけないでしょうか?

    • nullll nullll より:

      あきさんはじめまして!返信遅くなって申し訳ありません。

      参考サイトの方法を使用+cocoonの場合、HTMLもいじらなくてはなりません。
      例えばcocoonの「固定ページ」で下記のようにすれば、おそらく反映されると思います!

      <div class="fluid-box">
      <div class="container fluid-box-inner">
      ここに中身を書く
      </div>
      </div>
      

      この「div」に対応するのがCSSの
      .fluid-box { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); background-color: #dbedf3; padding: 40px; box-sizing: border-box; }
      .fluid-box-inner { max-width: 1250px; margin: 0 auto; padding: 25px; box-sizing: border-box; }
      になります。セットなんです。

      ※「横いっぱい背景」がcocoonの機能ではなかったのでさらっと流すように書いてしまい、わかりにくくなった事お詫びします。

      • あき より:

        こんばんは。あきです。メッセージ遅くなりました。
        そして、ありがとうございます。
        nullllさんに書いていただいたタグをそのまま張り付けて、横幅いっぱいに広くなりました!!
        なったのですが、PCで見ると(背景がブルーのところ)、設定よりも少し幅が広くなり、印刷すると狭くなってるんですよね。。。

        ヘッダー?は消してアピールエリアをヘッダーにしてるんですか?
        そうした場合SEO的に大丈夫なんですか?

        css難しいです( ;∀;)
        早く一歩前に進みたい(^^;

        • nullll nullll より:

          あきさん
          >PCで見ると(背景がブルーのところ)、設定よりも少し幅が広くなり、印刷すると狭くなってるんですよね。。。

          こちらはおそらくfluid-boxの「padding: 40px;」、fluid-box-innerの「padding: 25px」が影響してるかと思います。paddingは隙間です。ご覧になっているモニタのサイズによって隙間の割合が変わってくるのです。数値をいじって調整してみてください!

          印刷はWordPressのような動的サイトだと調整が結構難しいかもです。プリンタの設定にも影響を受けます。別でCSSを用意する方法もあります。
          https://qiita.com/tatsuo-iriyama/items/4895d735f80dfa299a63


          >ヘッダー?は消してアピールエリアをヘッダーにしてるんですか?
          そうした場合SEO的に大丈夫なんですか?

          見た目の「ヘッダー」とHTML上の「ヘッダー」は別物でして、HTML上はヘッダーが存在しています。また、SEOで言えば「titleタグ」「H1タグ」はきちんと記述されているので大丈夫かと…!
          今はSEOと言っても単純なタグ記述だけを見ているわけではないので、対策大変ですよね…。
          SEO対策に正解はないかもですが参考サイト貼っておきます。
          https://emma.tools/magazine/html-tags-for-seo/


          CSSもサイトのトレンドもWEB周りの技術も変化が速くて大変ですよねX(
          がんばりましょう…!

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