cocoonサンプルビジネスサイトのサーバの凍結解除しました。ご不便をおかけしました。

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 より:

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

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