Cocoonが便利すぎて、なんとかコーポレートサイトとかビジネスサイト、企業サイトのような「サイト型」にカスタマイズ出来ないかと思い、いろいろ試してみることにしました。
調べてもあまりそういったカスタマイズ例が出てこなかったので、他の方の参考になるかわかりませんが自分のためにもメモしておきます。
※こちらクラシックエディタ向けの記事になります。
コーポレートサイトとして求めるもの
- とりあえず固定ページは1カラム、ブログページは2カラムにすることに。
- 想定としてはクリニックやサロンのページ。
- セクションによっては幅をいっぱいに使った背景を設定したい。
- メインビジュアル下にバナーエリアを設定したい
- なるべくdisplay:none;は使わない。
あたりでしょうか。
とりあえずぱぱっと作ってみたトップページがこちらになります。
コンセプト・スタッフ、最終セクションに全幅の背景を設定していますが、これはスタイルシートです。
アピールエリア下のバナーが4つ並んでいる部分はウィジットとWordpressデフォルトのギャラリーを使用。リンクのために軽いプラグイン使用。スタイルシートもちょっと書いています。
ヘッダには少し影をつけました。
#header-container { position: relative; box-shadow: 0 5px 15px -5px rgba(0,0,0,.8); }
みたいなかんじ。
コーポレートサイトっぽくするためのCocoon設定
とりあえず最初にCocoon設定で設定したのは以下。
全体タブ
サイトキーカラー…紺色に
フォント…Noto Sans JP
サイドバー…「固定ページで非表示」
ヘッダータブ
ヘッダーレイアウト…「トップメニュー（右寄せ）」
ヘッダーロゴ
ヘッダー全体色…紺色に
本文
投稿情報表示設定の「投稿者名の表示」のチェックを外す。
アピールエリアタブ
HTMLが使えるので電話番号周りをちょっと装飾、ボタンも。
横いっぱいにはみ出して背景を設定したい
ランディングページなど、1カラムのページでよく見るやつです。
全幅の背景は「親要素から子要素をはみ出させて背景を画面いっぱいに表示する方法」を参考にさせていただきました。
背景の上に白または半透明のボックスを乗せられるようにしています。
※2021年1月7日追記
ここがわかりにくい！という質問をよくいただくのですが、基本的には上記参考ページ内の記述ほぼそのままなんです。
まず固定ページ（投稿でも）のほうにはこんな記述をします。
<div class="fluid-box"> <div class="fluid-box-inner"> 表示させたいコンテンツ </div> </div>
CSSはこんな。参考ページそのままです。
「fluid-box」が外側（はみ出る部分）になります。
「background-color」を画像にすることも勿論できます。
「fluid-box-inner」がはみ出た部分に載っている文字や画像の部分で、背景を白にしたり半透明にしたり、サイトの雰囲気に合わせていろいろできます。
.fluid-box{
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
background-color: #ddd;
padding: 40px;
}
.fluid-box-inner{
margin: 0 auto;
padding: 25px;
background-color: #fff;
}
※2021年2月16日追記
横スクロールバーが表示されてしまう、という方！
CSSに下記コードを追加してみてくださいな。
body{overflow-x: hidden;}
メインビジュアル下にバナーエリアを設定したい
アピールエリアの下にバナーエリアを置いてみました。
外観→ウィジット→「固定ページタイトル上」にギャラリーウィジットを配置。
スタイルは「WordPress標準のギャラリーのCSSをカスタマイズする方法」を参考にさせていただきました。
個人的にバナーを隙間なく並べたかったのでちょこちょこ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以下の表示だとこんな感じになります。
ただ、Wordpress標準のギャラリー機能だと自由にリンクを設定する事が出来ないのです。
Gallery Custom Linksというプラグインを使用するとリンク設定が出来るようになるので、今回はこちらを入れました。
※2019/12/12 追記
プラグインですが、jQueryの読み込み順エラーが出るようです。
現在プラグインなしでの表示に変えてあります。
【変更手順】
・ウィジェットをギャラリーではなくHTMLに変更し、もともとギャラリー時に生成されていたソースをそのままコピペ。
このサイトではこんな感じです。
<div id="media_gallery-2" class="widget widget-above-page-content-title widget_media_gallery"> <div id='gallery-1' class='gallery galleryid-9 gallery-columns-4 gallery-size-large'> <dl class='gallery-item'> <dt class='gallery-icon landscape'> <a href="http://ep3373.wp.xdomain.jp/" target="_self" rel=""> <img width="1024" height="683" src="http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_03-1024x683.jpg" class="attachment-large size-large" alt="" srcset="http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_03-1024x683.jpg 1024w, http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_03-300x200.jpg 300w, http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_03-768x512.jpg 768w, http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_03.jpg 1251w" sizes="(max-width: 1024px) 100vw, 1024px" /> </a> </dt> </dl> <dl class='gallery-item'> <dt class='gallery-icon landscape'> <a href="#" target="_self" rel=""> <img width="1024" height="683" src="http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_02-1024x683.jpg" class="attachment-large size-large" alt="" srcset="http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_02-1024x683.jpg 1024w, http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_02-300x200.jpg 300w, http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_02-768x512.jpg 768w, http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_02.jpg 1251w" sizes="(max-width: 1024px) 100vw, 1024px" /> </a> </dt> </dl> <dl class='gallery-item'> <dt class='gallery-icon landscape'> <a href="http://ep3373.wp.xdomain.jp/blog/" target="_self" rel=""> <img width="1024" height="683" src="http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_04-1024x683.jpg" class="attachment-large size-large" alt="" srcset="http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_04-1024x683.jpg 1024w, http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_04-300x200.jpg 300w, http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_04-768x512.jpg 768w, http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/09/info_04.jpg 1250w" sizes="(max-width: 1024px) 100vw, 1024px" /> </a> </dt> </dl> <dl class='gallery-item'> <dt class='gallery-icon landscape'> <a href="#" target="_self" rel=""> <img width="600" height="400" src="http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/10/info_01.jpg" class="attachment-large size-large" alt="" srcset="http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/10/info_01.jpg 600w, http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/10/info_01-300x200.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" /> </a> </dt> </dl> <br style="clear: both" /> </div> </div>
・プラグインで生成されていたリンクのクラス・クリックイベント（class=… onclick=…）を削除。
・ギャラリーウィジットを削除。
・プラグインGallery Custom Linksの停止・削除。
jQueryはテーマによって相性があります。読み込み順もそうですが、干渉したりなどで正常に動かなかったりするんです。
今回確認不足でした。申し訳ないです。
flexbox使わないで作ろうと思ってたけど書き換えようかなあ。
Cocoonをコーポレートサイトっぽくカスタマイズ！①まとめ
とりあえずトップページだけですが、コーポレートサイトとかビジネスサイトっぽい感じになったかなと思います。
Cocoonは編集画面が非常に使いやすいので、色々なサイトにおすすめできると思います。
次は下層ページを作ってみたいのですが、最近またゼルダの伝説BotWをやり始めてしまったので完成はいつになるやら…
ひととおりできあがったサンプルサイト公開しています。（広告出ますが…）
アニメーションが若干うるさいです…アニメーションに関してはまた別の記事で紹介します。
※2019/11/16追記
トップページに「新着情報一覧」が欲しいなと思ったので追加しました。
※2019/12/12追記
ヘッダに電話番号が欲しいなと思ったので追加しました。
コメント
とても参考になります。
私はcocoon勉強中で、コーポレートサイトに出来ないか試行錯誤中でした。
わあありがとうございます…！
拙い内容ですが少しでもお役に立てたのならこれに勝る喜びはありません…！
はじめまして。サイト作成の見習い中です。
スタイルシートを齷齪しながら勉強中なのですが、少し勉強させて下さい。
「横いっぱいにはみ出して背景を設定したい」の見出しの辺りです。。。
全幅の背景は「親要素から子要素をはみ出させて背景を画面いっぱいに表示する方法」を参考にさせていただきました。
とあり、リンク先を読んでcssをそのまま張り付けただけなのですか？
cocoonの場合、cssをそのまま張り付けるだけではダメですか？
また、htmlもいじらないといけないでしょうか？
あきさんはじめまして！返信遅くなって申し訳ありません。
参考サイトの方法を使用+cocoonの場合、HTMLもいじらなくてはなりません。
例えばcocoonの「固定ページ」で下記のようにすれば、おそらく反映されると思います！
この「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難しいです( ;∀;)
早く一歩前に進みたい(^^;
あきさん
＞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(
がんばりましょう…！
まんまやっているのですが、説明通りにならないです。
こちらのフロントページは固定ページでいいんですよね？
上記の説明以外にもcocoon設定をしているところがあれば、
記入していただけると幸いです。
あきらさんこんにちは。
フロントページは固定ページです。
Cocoon設定でいじっているのは色とフォント、アピールエリアとサイドバーを無しにするところくらいです。
私の作成したサイトとどこがどのように違いますか？
また、もしあきらさんが作成しているサイトが閲覧可能でしたら、URLを教えていただけると幸いです。
ちなみに背景の表示などはCSSを書いています。
こちらがもともとのCocoonに加えて書いたCSSです。
http://ep3373.wp.xdomain.jp/wp-content/themes/cocoon-child-master/style.css
参考になれば幸いです。
コメントありがとうございます。
固定ページでヘッダー画像を表示していると思っていたのですが、
こちらをアピールエリアから画像を設定すると解決できました。
引き続き参考にさせて頂きます。
ありがとうございました。
あきら
よかったです…！！
また不明なところがあれば遠慮なくどうぞ！
バナーの横並びはPCではうまくいったのですが、
レスポンシブにした時に一枚づつの縦並びになってしまいました。
「ウィジットをギャラリーではなくHTMLに変更し、もともとギャラリー時に生成されていたソースをそのままコピペ」と書いてあるのですが、どちらからコピペすればいいですか？
コードを貼り付けて頂けると嬉しいです。
あきら
コメントにHTML書けなかったので、本文中に書きますね！
このコードに合わせてCSSを書いています。
ありがとうございます！
まずHTML書きますね。
たびたび、すみません。
あと、「画面いっぱいに背景を表示、半透明ボックス。」と「文字をセンタリングしたり、
外側のボックスのクラスを増」の部分のコピペコードがあったらうれしいです。
関連するCSSです
.fluid-box { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); background-color: #dbedf3; padding: 40px; box-sizing: border-box; } .fluid-box-02 { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); background: url(http://ep3373.wp.xdomain.jp/wp-content/uploads/2019/10/fluidbg.jpg) no-repeat center; background-size: cover; padding: 40px; box-sizing: border-box; } .fluid-box-03 { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); background: url(http://ep3373.wp.xdomain.jp/wp-content/uploads/2021/01/background-2462433-scaled.jpg) no-repeat center; background-size: cover; padding: 40px; box-sizing: border-box; } .fluid-box-inner { max-width: 1250px; margin: 0 auto; padding: 25px; box-sizing: border-box; } .fluid-box-inner h2, .fluid-box-inner h3, .fluid-box-inner h4, .fluid-box-inner h5 { margin-top: 0; } .white { max-width: 1200px; background-color: #fff; } .white05 { max-width: 1200px; background-color: rgba(255,255,255,0.5); }ありがとうございます。
たびたびたびすみません。
今気づいたのですが、幅がいまいちあっていないのはなぜでしょうか？
ページを開くと下にバーが現れ、右側にスペースが空いてしまっているようです。
無理くりですが、できました。
.fluid-box {
width: 100vw;
}
（.fluid-box2＆3も同様）
をwidth: calc(100vw – 17px);
にしたらいい感じでした。
他にも方法がありましたら、教えてくださいな。
遅くなりましてすみません！
はみ出し分の処理記述忘れてましたねすみません…100vwだとスクロールバー分がプラスされてしまうのでした。
私も無理やりではありますが、CSSで
body{overflow-x: hidden;}
しています。
お試しください～！
すいません。
ここに中身を書く
こちらのコードはどちらにかけば良いでしょうか
ファイル名等お教えいただけると幸いでございます。
たぬきちさん返信が遅くなってすみません。
HTMLは「固定ページ」「投稿ページ」などに記述し、CSSはWordpress左バーの「外観」→「テーマエディター」の「スタイルシート（style.css）」に記述するのが一般的かと思います。
ちなみにこちらはWordpressの「Cocoon」というテーマを使用することを前提としています。
WordPressテーマ「Cocoon」
https://wp-cocoon.com/
style.cssを編集するなら「子テーマ」の使用がおすすめです。
https://wp-cocoon.com/downloads/
すみません、質問です
同じようにcssに書き込んで確かに横幅いっぱいに背景が広がったのですが、
要素がすべて左寄りになってしまいます。
さらに記事編集画面も左によって見切れてしまい編集が困難になってしまったのですが、
直し方ってありますでしょうか？
さわむらさま
コメント有難うございます！
>>要素がすべて左寄りになってしまいます。
インナーボックスの設定はされていますでしょうか？
HTMLの構成はこうなります。
インナーボックスのCSS例はこうです。
.fluid-box-inner {
max-width: 1250px;
margin: 0 auto;
padding: 25px;
box-sizing: border-box;
}
編集画面にCSSが効いてしまう件ですが、もしやエディタはGutenbergでしょうか？
でしたら編集しにくくなるかもしれません。
こちらクラシックエディタ向けの記事でした。（注意を入れておくべきでした…）
Gutenbergですと、バージョン5.3からならCSSを入れずとも全幅のコンテンツが作れます。
「グループ」を作成し、外側のブロックを「全幅」にするのです。
参考になりそうな記事を置いておきます。
https://open-cage.com/grouping-blocks/
初めまして、cocoonを使ったコーポレートサイトづくりで参考にさせていただいていました！
「横いっぱいにはみ出して背景を設定したい」に関して設定をしていたのですが、躓いたところがありご教示いただけたらと思います…
記事の中で解説いただいていたCSSとコメント欄のやり取りのCSSを設定したら無事に背景色を横まで設定することは出来たのですが、
たとえばモバイルで見た場合に、設定をした箇所と設定をしていない箇所では、例えば見出しの幅が変わってしまっていました。
「表示させたいコンテンツ」の対象が間違っているのかもしれないのですが、サンプルで表示されるようなものにするためには、どこで設定したらよいかご教示いただけますでしょうか。
またサンプルサイトの画像や本文のエフェクトに関しても設定できたらと思いまして、こちらもどのようにしたら設定できるか、もしくは参考になるサイトをご教示いただけますと幸いです。
お手数おかけいたしますが、どうぞ宜しくお願いします。
だいぶ遅くなってしまって申し訳ありません…！！！
背景を設定した箇所と設定してない箇所で見出しなどの見た目が変わってしまうのは、おそらく「背景を設定している」箇所と「していない」箇所のCSSが干渉しているのではないかと思います。
「背景を設定している場合の見出し」のCSSを新たに加えるか、「背景を設定していない場合のCSS」に「:important」を設定するなどしてみたらいかがでしょう…？
モバイル版だけ見た目がおかしくなるのであれば、メディアクエリ（@media screen and (max-width: 480px){ここに書いたCSSはモバイルでだけ適用される}）内に書いてみてください。
説明が下手ですみません…
画像や本文のエフェクトがアニメーションの事であれば、下記の記事に書いてあります！
参考になればよいのですが…
https://www.nullllog.com/scrollanime/