現在デフォルトスキンとして「COLORS(ブルー)」を適用中。

ワードプレスのブロック(カバー画像)をカラムいっぱいに表示したい | カスタマイズ相談 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラムの内容は、CCライセンス(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

詳細なカスタマイズ依頼をするならこちら。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
ワードプレスのブロック(カバー画像)を...
 
Share:

[解決済] ワードプレスのブロック(カバー画像)をカラムいっぱいに表示したい  


TAKAMASA
 TAKAMASA
(@TAKAMASA)
ゲスト
参加: 1か月 前
投稿: 8
2019年10月5日 09:49  

いつもお世話になっております。

ワードプレスのブロック(カバー画像)をメインカラム幅いっぱいに表示したいです。

カバー画像のみを余白を入れずにメインカラム幅いっぱいに表示したいのですが、どうしても余白がでてしまい困っています。

設定ではカラム幅は1600メインカラム余白は36です。

画像の大きさはカラム幅より大きな画像は用意できています。

下記リンクの黒い画像が対象の画像です。どうかよろしくお願いいたします。

http://darumaya-syoku.com/


未解決
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3771
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年10月5日 11:06  

ワードプレスのブロック(カバー画像)をメインカラム幅いっぱいに表示したいです。

ワードプレスのブロック(カバー画像)とは、具体的にはどの部分のことでしょうか?

 

質問内容的にどの部分か分からないので、スクショで、この部分と提示すれば分かってもらえて、回答がもらえるかも知れないです。

 

現状以下の状態で、どれがカバー画像。とおしゃってるか、さっぱり分からない❦

https://gyazo.com/c8fcfeea907beae30a627c361f4dfbd8


わいひら 件のいいね!
TAKAMASA
 TAKAMASA
(@TAKAMASA)
ゲスト
参加: 1か月 前
投稿: 8
2019年10月5日 15:49  

丁寧な指摘ありがとうございます。

初めての質問のため分かりにくくて申し訳ないです。

問題の部分は下記のスクショの海の画像の部分です。

この部分はワードプレスブロックのカバー画像で実装しました。これをメインカラムいっぱいに表示したいです。よろしくお願いします。

http://darumaya-syoku.com/


TAKAMASA
 TAKAMASA
(@TAKAMASA)
ゲスト
参加: 1か月 前
投稿: 8
2019年10月5日 15:55  

追記ですが、cocoonのメインカラム設定では1600、メインカラム余白は36で設定しており、メインカラムいっぱいに表示するのはカバー画像で実装した画像のみにしたいです。

可能でしょうか?


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3771
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年10月5日 18:48  

HTMLで見てもらえたら分かると思いますが

HTMLはこんな感じ

<
div class="wp-block-cover has-background-dim" style="background-image:url(背景画像のURL)"><
div class="wp-block-cover__inner-container">
<p style="text-align:center" class="has-large-font-size"></p>
<
/div><
/div>

 

ブルーで書いたclass属性wp-block-coverの幅とmarginを変更すればイケると思います。

 

.wp-block-cover, .wp-block-cover-image {
	width: 100%;
	margin: 0 0 1.5em;
}

 

widthが100%ですが、左右の余白が画像のとおり36pxずつ入ってるので、トータル(100%+72px)の幅になるように装飾を変更する感じです。

※clac CSSなどで検索したら実装できるかも知れません。※私のChromeデベロッパーツールがおバカちゃんなのか?いつも試せないので、そちらで実装して試してください。

あとmarginは、0 0 1.5em; 赤文字の部分を36pxに変更する感じです。

margin: 0 -36px 1.5em;

 

上余白は0、左右余白は36px はみ出し幅いっぱいに、下余白は1.5文字の幅。という指定です。

PC上ではみ出る幅があるはずだと思います。その場合は子テーマの下にあるメディアクエリで左右の余白marginを再度設定し直してください。

 

実際チェックできないので、やり方だけですが。

This post was modified 1か月 前 by かうたっく

わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3771
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年10月5日 18:55  

clac()が使えない場合、& プチ説明

トータル(100%+72px)の幅になるように装飾を変更する感じです。

 

  • 余白36px main領域に海の画像 余白36px
  • 余白をなくしたい➡
  • 両サイド余白を、36pxずつ はみ出して表示するイメージ

 

 

余白を%で表示した場合

  • 余白3% main領域に海の画像(ココはwidth100%) 余白3%
  • あわせて106%にする

それで

  • margin: 0 -3% 1.5em;

左右余白は3%づつ はみ出すようなイメージです。

キッチリ調整しないと横揺れの元になりますので、ご注意を。


わいひら 件のいいね!
TAKAMASA
 TAKAMASA
(@TAKAMASA)
ゲスト
参加: 1か月 前
投稿: 8
2019年10月6日 01:20  

かうたっく様ありがとうございます。

クラスで指定したらいいのですね!なにぶん自分も初心者なので非常に参考になりました!

後日実装させていただいて報告します。本当にありがとうございます。


TAKAMASA
 TAKAMASA
(@TAKAMASA)
ゲスト
参加: 1か月 前
投稿: 8
2019年10月7日 11:09  

おかげさまでなんとか実装させていただきました。

/*カバー画像全幅表示*/
.wp-block-cover, .wp-block-cover-image {
min-height: 600px !important;
width: auto !important;
margin: 0 -36px 1.5em !important;
}
.page .main {
border: none;
}

最終的にこのようなコードで落ちつきました。

なぜかclassを指定しても親テーマのcssを読み込んでしまうのでやむおえず「!important」をつけましたが、問題なければいいのですが、、、

さらにwidthも100%だと左に寄るのでautoにすることでカラムいっぱいに表示できました。さらに1pxほどの隙間もあったのでborderも消しました。

 


Akira
(@akira)
Reputable Memberサイト
参加: 2年 前
投稿: 379
Akira - FacebookAkira - TwitterAkira - Google+
2019年10月7日 16:01  

スマホで見た際に、横スクロールが発生しています。

そのため、まずは↓の CSS を削除します。

.wp-block-cover, .wp-block-cover-image {
	min-height: 600px !important;
	width: auto !important;
	margin: 0 -36px 1.5em !important;
}

そして、↓の CSS を追加します。

.entry-content .wp-block-cover,
.entry-content .wp-block-cover-image {
  margin: 0 calc((100% - 100vw)/2) 1.5em;
  min-height: 600px;
  width: auto;
}

!important は、使ってはダメです。ちなみに、子テーマに書いた CSS が適用されないのは、子テーマの CSS より後で WordPress が Gutenberg の CSS を読み込んでいるため。ただ、優先度がより高いセレクタ名で指定すると反映されます。


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3771
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年10月7日 19:38  

なぜかclassを指定しても親テーマのcssを読み込んでしまうのでやむおえず「!important」をつけましたが、問題なければいいのですが、、

問題が出るとしたら、AMPでは無視されたような気がするので、気になるのであればやめたほうが良いかも。って思います。


TAKAMASA
 TAKAMASA
(@TAKAMASA)
ゲスト
参加: 1か月 前
投稿: 8
2019年10月7日 20:52  

Akira様、かうたっく様ありがとうございます

スマホで横スクロールが発生しているのに気付いていませんでした

Akira様の通りにさせてもらったらうまくいきました。

classの優先順位が未だに理解できておらず恥ずかしいかぎりです。

AMPも有効にしたいので!impotantは使わないように心がけます。

本当にありがとうございます


わいひら 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年3ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:1年1ヶ月

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

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