運営者情報はこちら

【Cocoon】画像を横幅いっぱいにする方法【アピールエリア】

当サイトはアフィリエイト広告を利用しています。
Cocoon
2023.02.15
Rino
ファーストビューで画面いっぱいに画像が表示されたらかっこいい！

当ブログのトップページでは、訪れたときの最初の画面で画像が横幅いっぱいに表示されます。

善は急げの気持ちで、方法を2つ考えました。

2つの方法

当記事では、ファーストビューを画像で飾る2つの方法を紹介します！

一部のリンクには広告が含まれています。

コンテンツエリアより画像を大きくする

完成までのステップ
  1. 1カラムに変更する
  2. 画像を横幅いっぱいに表示させる
  3. 余計な要素を消す
  4. 配置したい場所に画像を持っていく

結論から述べると、ファーストビューを画像いっぱいに表示させるなら、こちらより後述する方法を選ぶ方が得策です。

1カラムにする

カラムの図解

当ブログは上記のように「コンテンツエリア」と「サイドバー」の2カラムです。

画像を横幅いっぱいにするとなるとサイドバーの部分が邪魔になるので、1カラムに変更します。

変更方法は簡単で、Cocoonの場合はエディター画面の「ページ設定」にて「ページタイプ」を1カラムに設定するだけ。

これだけで1カラムに変更できます！

画像を横幅いっぱいに表示させる

Cocoonでは、コンテンツエリアの幅が決まっています。

画像を表示させてもコンテンツエリアに収まるため、横幅いっぱいにするには以下の方法を取らないといけません。

  1. コンテンツエリアの横幅を画面サイズにする
  2. コンテンツエリアを突き抜ける指示を出す

前者は他のところで多大な影響が出るため、得策ではありません。
そのため、後者を採用して、以下のコードをhtmlとCSSに埋め込みます。

		<div class="hero"></div>
	
		.hero {
			background: url(画像URL) center / cover;
			margin: 0 calc(50% - 50vw);
			width: 100vw;
			height: 100vh;	/*画像の高さを調整*/
		}

親要素を破る（コンテンツエリアより画像を大きくする）には「margin: 0 calc(50% – 50vw);」と「width: 100vw;」を使用するとのこと。
これで、画像を横幅いっぱいに表示できました！

ちなみに、画像のうえにテキストを表示するときは、以下のようにします。

See the Pen
Untitled by Rino (@Rinosaurus)
on CodePen.

不要な部分を削除する

画像を横幅いっぱいに表示できたので、次はファーストビューに持ってくるよう位置を調整します。

……とその前に、記事タイトルと投稿日時が邪魔になるので消してしまいましょう。

		.article h1,
		.date-tags {
			display: none;
		}

上記のコードをサイト全体のCSSに書き込むと、全記事のタイトルと投稿日時が消えます。
そのため、必ず各記事の「カスタムCSS」に入れましょう！

Rino
Cocoonだと、エディター画面の下部にあります。

カスタムCSSの案内

ちなみに、h1（記事タイトル）を消してSEO的に問題はあると思います。

ただ、僕が運営するサイトは順位が上がったので、目を瞑 (つぶ) っている状況です。

指定の位置まで調整する

画像を横幅まで広げ、不要な項目を削除しました。

あとは、お好みの場所まで「marign-top」でマイナス方向に動かして調整するだけです。

		.hero {
			background: url(画像URL) center / cover;
			margin: 0 calc(50% - 50vw) 0;	/*ここの0を調整する*/
			width: 100vw;
			height: 100vh;
		}

「margin: 0 calc(50% – 50vw) 0;」の赤色と青色の部分を調整します。

赤色は画像上、青色は画像下の余白であり、こちらに「○○px（○には数字）」を入れることで調整できます。

余白の調整方法は他にもありますが、初心者であればこちらの方法が簡単なので、お試しください！

Rino
手段1は、以上です。

アピールエリアをそれっぽく改造する

完成までのステップ
  1. アピールエリアに必要事項を入力する
  2. CSSを書き込む

Cocoonには「アピールエリア」という、ファーストビューに画像を横幅いっぱいに表示させられる機能が搭載してます。

それをそのまま使用するのが手段2ですが、デザインが気に入らなかったので変更しました。

アピールエリアに必要事項を入力する

アピールエリアの場所
  • ワードプレスのダッシュボードを開く
  • メニューから「Cocoon設定」を選択する
  • タブから「アピールエリア」を選択する

Cocoonのアピールエリアの案内

アピールエリアの表示 指定したいページを設定
（当ブログは「フロントページのみ」）
高さ いじらなくてOK
エリア画像 表示させたい画像を選択
エリア背景色 いじらなくてOK
テキストエリア表示 チェックを入れる
タイトル 表示させたいタイトルを設定
（当ブログは「Gluttonir」）
メッセージ 表示させたいメッセージを設定
（当ブログは「コメント」と「検索窓」）
ボタンメッセージ 表示させたいボタンメッセージを設定
（当ブログだと「Scroll」）
ボタンリンク先 後述
ボタンリンクの開き方 同じタブで開く
ボタン色 いじらなくてOK
ボタンリンク先について

当ブログでは、リンク先を「1番最初の見出し」に設定しています。
同記事間でのリンク設定は別記事で紹介しているので、そちらをご覧ください。

CSSを書き込む

上記の設定が完了したら、あとは以下をCSSに書き込めば完了です！

		.appeal {
			background-image: url(画像URL);	/* スマホ画面での画像 */
			background-attachment: fixed;
			min-height: calc(100vh - 84px); /* スマホ画面での高さ */
			min-width: 100%;
			background-size: cover;
			position: relative;
		}
		@media screen and (min-width: 768px){
			.appeal {
				background-image: url(画像URL);	/* パソコン画面での画像 */
				min-height: calc(100vh - 90px);	/* パソコン画面での高さ */
			}
		}
		.appeal::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(69, 69, 69, .5); /* 画像の明るさ設定 */
		}
		.appeal-in {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
		.appeal-content {
			background-color: transparent;
			width: 100%;
			padding: 2em 1em;
		}
		.appeal-title {
			color: #FFF; /* タイトルの色 */
			font-size: 5em; /* タイトルのフォントサイズ（スマホ） */
			text-shadow: 0 4px 4px #333; /* タイトルの影 */
		}
		@media screen and (min-width: 768px){
			.appeal-title {
				font-size: 10em; /* タイトルのフォントサイズ（パソコン） */
			}
		}
		.appeal-message p {
			color: #FFF; /* サブタイトルの色 */
			font-size: 1em; /* サブタイトルのフォントサイズ（スマホ） */
			margin-top: -1em; /* タイトルとサブタイトルの行間（不要なら削除） */
		}
		@media screen and (min-width: 768px){
			.appeal-message p {
				font-size: 1.2em; /* サブタイトルのフォントサイズ（パソコン） */
				margin-top: -4em; /* タイトルとサブタイトルの余白（不要なら削除） */
			}
		}
		/* スクロールボタン */
		.appeal-button {
			color: #FFF; /* スクロールボタンの色 */
			background-color: transparent!important;
			margin-top: 5em; /* サブタイトルとボタンの余白（不要なら削除） */
			transition: .5s;
		}
		.appeal-button:hover {
			color: #CBCBCB; /* スクロールボタンの上にカーソルを載せたときの色 */
			transition: .5s;
		}
		.appeal-button:before {
			font-family: "Font Awesome 5 Free";
			content: "\f103"; /* スクロールボタンのマーク */
			display: block;
			animation: updown 1s infinite alternate ease-in-out;
		}
		@keyframes updown {
			from {
				transform: translateY(0);
			}
			to {
				transform: translateY(15px);
			}
		}

高さを「min-height: calc(100vh – 数値);」としているのは、ヘッダーと通知エリアの高さを差し引いているからです。

Rino
テキストの色やサイズなど、お好みで変更してみてください！

おまけ：画像を時間経過で切り替える

時間経過により別の画像に入れ替えることもできます。

変更したい場合、先ほどのものではなく以下を使ってください！

		.appeal {
			animation: image_anime 18s ease infinite;
			background-attachment: fixed;
			min-height: calc(100vh - 84px); /* スマホ画面での高さ */
			min-width: 100%;
			background-size: cover;
			position: relative;
		}
		@media screen and (min-width: 768px){
			.appeal {
				min-height: calc(100vh - 90px);	/* パソコン画面での高さ */
			}
		}
		/* 画像の表示設定 */
		@keyframes image_anime {
			0% {
				background-image: url(1枚目の画像URL);	/* 1枚目のスマホ用画像 */
			}
			40% {
				background-image: url(2枚目の画像URL);	/* 2枚目のスマホ用画像 */
			}
			80% {
				background-image: url(3枚目の画像URL);	/* 3枚目のスマホ用画像 */
			}
			100% {
				background-image: url(1枚目の画像URL);	/* 4枚目のスマホ用画像 */
			}
		}
		@media screen and (min-width: 768px){
			@keyframes image_anime {
				0% {
					background-image: url(1枚目の画像URL);	/* 1枚目のパソコン用画像 */
				}
				40% {
					background-image: url(2枚目の画像URL);	/* 2枚目のパソコン用画像 */
				}
				80% {
					background-image: url(3枚目の画像URL);	/* 3枚目のパソコン用画像 */
				}
				100% {
					background-image: url(1枚目の画像URL);	/* 1枚目のパソコン用画像 */
				}
			}
		}
		.appeal::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(69, 69, 69, .5); /* 画像の明るさ設定 */
		}
		.appeal-in {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
		.appeal-content {
			background-color: transparent;
			width: 100%;
			padding: 2em 1em;
		}
		.appeal-title {
			color: #FFF; /* タイトルの色 */
			font-size: 5em; /* タイトルのフォントサイズ（スマホ） */
			text-shadow: 0 4px 4px #333; /* タイトルの影 */
		}
		@media screen and (min-width: 768px){
			.appeal-title {
				font-size: 10em; /* タイトルのフォントサイズ（パソコン） */
			}
		}
		.appeal-message p {
			color: #FFF; /* サブタイトルの色 */
			font-size: 1em; /* サブタイトルのフォントサイズ（スマホ） */
			margin-top: -1em; /* タイトルとサブタイトルの行間（不要なら削除） */
		}
		@media screen and (min-width: 768px){
			.appeal-message p {
				font-size: 1.2em; /* サブタイトルのフォントサイズ（パソコン） */
				margin-top: -4em; /* タイトルとサブタイトルの余白（不要なら削除） */
			}
		}
		/* スクロールボタン */
		.appeal-button {
			color: #FFF; /* スクロールボタンの色 */
			background-color: transparent!important;
			margin-top: 5em; /* サブタイトルとボタンの余白（不要なら削除） */
			transition: .5s;
		}
		.appeal-button:hover {
			color: #CBCBCB; /* スクロールボタンの上にカーソルを載せたときの色 */
			transition: .5s;
		}
		.appeal-button:before {
			font-family: "Font Awesome 5 Free";
			content: "\f103"; /* スクロールボタンのマーク */
			display: block;
			animation: updown 1s infinite alternate ease-in-out;
		}
		@keyframes updown {
			from {
				transform: translateY(0);
			}
			to {
				transform: translateY(15px);
			}
		}
Rino
こちらを使う場合、Cocoon設定のアピールエリアで画像を設定しなくて大丈夫です！

「animation」を追加

		.appeal {
			animation: image_anime 18s ease infinite;
		}

こちらで、画像が入れ替わるように指示しています。
「18s」の部分が「1周分」の秒数（この場合は18秒）になるので、お好みで変更してください。

読み込む画像を追加

		@keyframes image_anime {
			0% {
				background-image: url(1枚目の画像URL);	/* 1枚目のスマホ用画像 */
			}
			40% {
				background-image: url(2枚目の画像URL);	/* 2枚目のスマホ用画像 */
			}
			80% {
				background-image: url(3枚目の画像URL);	/* 3枚目のスマホ用画像 */
			}
			100% {
				background-image: url(1枚目の画像URL);	/* 4枚目のスマホ用画像 */
			}
		}

18秒を100%としたとき、各パーセント時に表示する画像を指定します。
切り替える画像を増やしたければ、上記の入れ方を参考に同様の項目を足せばOKです！

最初と最後を同じ画像にしているのは、100%から0%切り替わるときが急なため。
自然な形に切り替わるとうにしたいため、同じ画像を設定しています。

Rino
同じ画像にしなくても自然に切り替わる方法が分かる方、コメントで教えてもらえると助かります……

まとめ

手段1は細かい設定が多く、またピクセル単位で調整することもあるので面倒です。

記事間で使う分には重宝しますが、ファーストビューに持ってくる手段としては2番目の方が良いかと！

ぜひ利用してみてください！

Comment

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