「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

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

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

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

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

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

【再質問】2カラムの左右の高さについて
 
共有:
通知
すべてクリア

[解決済] 【再質問】2カラムの左右の高さについて

27 投稿
4 ユーザー
16 Reactions
493 表示
(@kn1711)
Active Member Registered
結合: 1年前
投稿: 11
Topic starter  

cocoonを利用させて頂いております。いつもありがとうございます。

以前に「2カラムの左右の高さについて」 https://wp-cocoon.com/community/postid/43082/

という事で質問させて頂きました。その際は大変ご尽力頂きまして有難うございました。

本日、cocoonのテーマを更新したところ、再度、以前と同じような症状になりました。

コンテンツ自体はキチンと表示されていますので、急ぎの不具合でもございませんが、修正策などございましたらご教示頂けましたら幸いです。宜しくお願い致します。

以下、環境情報です。

----------------------------------------------
サイトURL: https://incre.official.jp
ホームURL: https://incre.official.jp
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-template/style.css
WordPressバージョン:6.2.2
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.1.5
カテゴリー数:27
タグ数:74
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.1
style.cssサイズ:719バイト
functions.phpサイズ:423バイト
----------------------------------------------
Gutenberg:0
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.6.1
Advanced Editor Tools 5.9.0
Akismet Anti-Spam 5.1
BackWPup 4.0.0
Contact Form 7 5.7.7
Flamingo 2.4
Imsanity 2.8.2
Intuitive Custom Post Order 3.1.4.1
List category posts 0.88.1
MetaSlider 3.31.0
PDF Embedder 4.6.4
Really Simple CSV Importer 1.3
Really Simple SSL 7.0.5
Shortcodes Ultimate 5.13.0
WP Multibyte Patch 2.9
XML Sitemap Generator for Google 4.1.11
Yoast Duplicate Post 4.5
----------------------------------------------


   
引用
(@kn1711)
Active Member Registered
結合: 1年前
投稿: 11
Topic starter  

画像


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7225
 

kn1711さん

とりあえず、暫定ですけれど。

.body .column-right.blank-box {
    margin-bottom: 1em;
}

上記のようにすれば

 
こんな感じになると思います。

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7225
 

説明下手ですので、うまく説明できないかもしれないですが。
(しかも長くなると思います)

おそらく、以下のようなことをなさりたいのだと思います。

 
これをGutenbergでやってみると、以下のような構造になり
 
表示も問題ないと思います。

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7225
 

それと同じことをクラシックエディタでやってみます。
(kn1711さんは、クラシックエディタのようですので)

すると、以下のような構造になってしまいます。

 
その結果、表示は以下のような感じです。
 
これは、kn1711さんのサイトで起こっていることと同じだと思います。
 
つまり、こんな構造です。
(2カラム左右と、白抜きボックスは別々のもののはずなのに、同化してしまう)
 
そのため、本体当たるべきCSSが、優先度で負けたりしてしまっているのだと思います。
以下と
.body .column-wrap :last-child {
    margin-bottom: 0;
}
 
以下が
.body .blank-box {
    margin-bottom: 1em;
}
 
同じ場所に適用されることになり、前者が勝ってしまう
 
div同士がくっついてしまうのは、クラシックエディタの癖?なのでしょうか。
(今まであまり気にしたことがなかったです)
 

 
ちなみに、クラシックエディタでも、本来の構造にすべく、手作業でHTMLを以下のように整えれば・・・
 
表示も問題なさそうです。
 
 
どうしたものでしょう・・・。

   
わいひら reacted
返信引用
(@kn1711)
Active Member Registered
結合: 1年前
投稿: 11
Topic starter  

@mk2_mk2 さん

ご教授ありがとうございます。

構造まで詳細に教えて頂き、感謝致します。

本日、夜にでも、mk2さんのアドバイスを一度試して見ます。

またご報告させて頂きます。

アドバイス頂き、本当に有難うございます。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16663
 

もしかしたら.body .column-wrap :last-child{margin-bottom: 0;}の設定が要らんのでは?と思いテスト的に削除してみました。
よろしければ以下のファイルでアップデートして他のカラム表示やスマホ表示で問題がないか試してみていただけると幸いです。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------


   
返信引用
(@kn1711)
Active Member Registered
結合: 1年前
投稿: 11
Topic starter  

@mk2_mk2 さん

ご教示頂いた通り、CSSに書いたところ全て揃いました。有難うございます。

まだまだクラシックエディタを使うので、当面はこれで行こうかなと思います。

有難うございました!


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7225
 

kn1711さん

私のは暫定ですので。

わいひらさんが対策してくださったものをGitHubにアップしてくださっていますので、確認してみていただけますでしょうか。


   
わいひら reacted
返信引用
(@kn1711)
Active Member Registered
結合: 1年前
投稿: 11
Topic starter  

@yhira さん

ご多忙の所、ご対応、有難うございます!

開発用ファイルをインストールしてみましたところ、修正される枠と修正されない枠が混在します。

揃っていないのは、4つ 枠を使っている部分かと思います。

現在は、mk2_mk2 さんから教示頂いたCSSの記述を削除し、開発中の最新ファイルのみの状態です。

画像添付致しますので、ご確認頂ければ幸いです。

 


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7225
 

2カラムの中に、更に2カラムがあるケースですね。

今度は、以下が・・・。

.body .column-left :last-child {
    margin-bottom: 0;
}

外側の左カラムの中の、内側の右カラムに。

 

.body .column-right :last-child {
    margin-bottom: 0;
}

外側の右カラムの中の、内側の右カラムに。

これを調整すると、Gutenberg側に影響がありそうな感じがします。
(晩御飯がまだで、ちょっと時間が・・・)


   
わいひら reacted
返信引用
(@kn1711)
Active Member Registered
結合: 1年前
投稿: 11
Topic starter  

@mk2_mk2 さん

色々、思案頂きありがとうございます。

➀最初に記述頂いたCSSで試したところ、2つ枠でも4つ枠でも綺麗に調整されていましたよ。

今、4つ枠がずれているのは、わいひらさんがアップして頂いた対策済のものをインストールしただけの場合です。

(こちらも2枠の場合はキチンと表示されます。4つ枠の部分だけ少しずれているだけです)

②わいひらさんが対策して頂いたものに、mk2 さんが記述頂いた最初のCSSを記述すれば、4つ枠の場合でもキチンと表示されるようになっていました。

③現状は、わいひらさんに対策済み版の結果をお伝え・確認して頂くために、CSSの記述を削除していますので、4つ枠の部分が少しずれている状態です。

そろそろ私の方でGutenbergへの対応をしてゆかなければな・・・と思う次第です。

晩御飯の時間までご助力頂いて有難うございます。現状、発信したい内容に影響があるわけではありませんので、mk2さんのお時間のある時に、お知恵をお貸し頂ければ十分でございます。

お知恵を頂いておりますmk2さん、そしてご多忙の中、開発・修正にご対応頂いております わいひらさんには、大変有難く思っております。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7225
 

kn1711さん

申し訳ないです。

本格対応には、ちょっとお時間ください。

まとめて時間がとれたところで考えないと、難しい部分もありそうです。
(しばらくまとまった時間がとれず・・・)

 

ちなみに、私も本番環境ではクラシックエディタを使用しています。


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7225
 

わいひらさん

投稿者:: @yhira

もしかしたら.body .column-wrap :last-child{margin-bottom: 0;}の設定が要らんのでは?と思いテスト的に削除してみました。

これがなぜあるのかというところが、なかなか思い出せないのですが・・・。
消してしまってはいけないかもしれないです。

 


この対応前のモバイル表示は、以下です。

【クラシックエディタ】

 
【Gutenberg】
 
 

 
そして、「.body .column-wrap :last-child{margin-bottom: 0;}」を削除したバージョンでは以下です。
 
【クラシックエディタ】
 
【Gutenberg】
 
 

 
モバイル表示の際に、次の要素との間隔が空いてしまうので、これがあるかもという気はしました。
(この辺り、昔フォーラムでやりとりがあった気がするのですが、思い出せず・・・)

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7225
 

念のため、上記のPC表示も添付しておきます。

 


対応前

【クラシックエディタ】

 
【Gutenberg】
 
 

「.body .column-wrap :last-child{margin-bottom: 0;}」を削除後

【クラシックエディタ】

 
【Gutenberg】
 
 
このクラシックエディタとGutenbergの違いは、そもそも構造が違うのだから、仕方ような気はします。
 

   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16663
 

投稿者:: @mk2_mk2

これがなぜあるのかというところが、なかなか思い出せないのですが・・・。
消してしまってはいけないかもしれないです。

すいません。取り急ぎGitHubのファイルだけを元に戻しておきました。
ここら辺色々な要素が複雑に絡みあるところなので、かなりややこしいところですね…。
mk2さんご確認&ご指摘感謝申し上げます。
kn1711さんもご確認ありがとうございます!
https://github.com/xserver-inc/cocoon

 


   
返信引用
(@kn1711)
Active Member Registered
結合: 1年前
投稿: 11
Topic starter  

わいひらさま、mk2_mk2さま

この度は、ご多忙の中、ご尽力を頂きまして有難うございました。

エディタの様々な特性などが影響するという事も理解することが出来、私にとってはとても有益なご回答でした。

現状としては、

・わういひらさんが最後にUP頂いたファイルを再度インストールし、

・その上で、mk2さんが最初にご指南くださったCSSを記述する事で、

きれいな状態での表示が出来るように対応させて頂いております。

個人的には、やはりクラシックエディタのほうが使いやすく(単に慣れの問題)、当面はクラシックで行くかと思いますが、やはり、徐々にでもGutenbergへの順応もしていかないとな…という自分自身の課題も浮き彫りになった良いきっかけにもなりました。

自身、営業職がメインで、ワードプレスやWEBでのサイト運営や情報発信は、ある意味 門外漢(まったくのど素人)で、時間的にも知識的にもなかなか専従できずこういった専門知識も専門スキルもない状況です。

そんな中、cocoonという大変ありがたいテーマを活用させて頂き、その上、皆様のお知恵とお力と貴重なお時間を頂きながら、素人ながら何とかサイト運営できている事に大変感謝いたしております。

今後も皆さまのお知恵をお借りする事もあるかと思いますが、その際は懲りずにまた宜しくお願い致します。

とりあえず、現状では正常に表示させることができましたので、「解決済み」とさせて頂こうと思います。有難うございました!


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16663
 

もしよろしければで良いのですがこちらのページのソースコードをメールで送ってもらうことは可能でしょうか。
https://wp-cocoon.com/mail/
できれば同じソースで動作確認しつつ親テーマを修正できればと。
※頂いたソースコードは開発環境の動作確認以外では使用しません。
※規定などで外部にソースコード出せない場合はスルーしてください。


   
返信引用
(@kn1711)
Active Member Registered
結合: 1年前
投稿: 11
Topic starter  

@yhira さま

ソースコード(?)とは、該当ページをテキスト表示したもので良いんでしょうか?


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7225
 

kn1711さん

エディタを開くと、「ビジュアル」「テキスト」とタブがあると思います。

その「テキスト」で表示されるコードだと思います。 

(只今スマホなもので、画像添付できず・・・)


   
返信引用
(@kn1711)
Active Member Registered
結合: 1年前
投稿: 11
Topic starter  

@mk2_mk2 さん

有難うございます!取り合えずテキスト表示した全文を送ってみようと思います。


   
返信引用
(@kn1711)
Active Member Registered
結合: 1年前
投稿: 11
Topic starter  

@yhira さま

先ほど、フォームよりお送りさせて頂きました。cocoonの発展にお役立て頂ければ幸いです


   
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2411
 

図は画面1023pxとなります。

今書かれているコード、図の赤枠、青枠の2カラムの中に、更に2カラムとして配置しており。
要素の高さは赤枠内(flex)で高さが揃う青枠内(flex)で高さが揃うと言うようになります。

赤枠、青枠内の要素が揃わないのは、margin-bottomが2つ目に無いからです。
しかし、1カラム目のmargin-bottomと削除すると、1カラムになった際、2カラム目との隙間が無くなり、問題です。

青枠と赤枠は別のflexであり、本来、4カラムで書かないと、4つの要素の高さは揃わないと思います。

余談ですが、marginを用いるより、gapを用いた方が、flex内の余白調整が簡単です。


   
わいひら reacted
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2411
 

無理に4カラムを実現するより、以下をご提案します。
追加CSSとHTMLの修正が少し必要です、ご了承下さい。

●HTML
今のHTMLを少し変更し、2カラムの使用を止めます。
結果、以下のHTMLとします。(blank-box内は現在のものを使用して下さい)

<div class=colmn-4>
  <div clas=blank-box>階層別研修・セミナー事例</div>
  <div clas=blank-box>目的別研修・セミナー事例</div>
  <div clas=blank-box>オンライン研修・セミナー支援</div>
  <div clas=blank-box>研修ツール教材紹介</div>
</div>

HTMLを修正して、新たに4カラム(例:CSSクラスcolmn-4)を自分で記述します。

●CSS
追加CSSに以下を記述します。
※gapを用いているので、1カラムになった際、最後ののコンテナ下には余白がでません。

/* 4カラム */
.colmn-4{
  display: flex;
  column-gap: 10px; /* 左右のコンテナ間の余白 */
  row-gap: 1em;/* 上下のコンテナ間の余白 */
}


/* 白抜きボックス) */
.colmn-4 > .blank-box{
  margin-bottom:0;
  width: 100%;
}

/* 画面幅834px以下で1カラム */
@media (width <= 834px) {
  .colmn-4{
    flex-wrap: wrap;
  }
}

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7225
 

kn1711さん

丁寧なお返事をいただき、ありがとうございます。

今日は、他のことばかりしていたもので、こちらを拝見しておりませんでした。
(ソースコードところは、ちょうど最新の投稿を見ていて気づきましたけど)

私も本番はクラシックエディタです。
私は、無理をしてGutenbergを使う必要はないと思っています。
クラシックエディタが提供される限りですが。

Cocoonは比較的簡単に、クラシックエディタとGutenbergを切り替えることができます。

例えば投稿の殆どの部分は、クラシックエディタで編集する。
そして、Gutenbergの方が得意な部分だけを、Gutenbergで編集する。

そういう使い方もあるかもしれないです。
(少し注意が必要ですし、切り替えるのは面倒ではありますけど)

 

もちろん、いろんなことができた方が便利ですし、その方が良いと思います。

でも、人間はすべてのことはできません。
時間にも限りがあると思います。

そういう意味では、ご自分のできる範囲で、できることをすれば良いのではないかと思います。
そして、時々他人の知恵を借りながら、少し背伸びができれば良いのかなと。

 

それに、記事は中身だと思います。
必要な内容がしっかり書かれていれば、それで良いと、極論かもしれないですが、私は思います。

kn1711さんは、今でも綺麗にお書きになっていて、私は見易いと感じました。
それで十分なのではないかなという気は、しなくはないです。

こうしてやりとりをしていても、分かり易いです。

人に伝えるって難しいですよね。
それを、kn1711さんとのやり取りでは感じないです。

そういうところが1番大事なのかなと思います。

(なんだか、まとまりませんね・・・私)


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16663
 

kn1711さん、コードありがとうございます!
chu-yaさんが書かれているgapの使用も含めて、CSSを再度検討してみます。


   
返信引用
(@kn1711)
Active Member Registered
結合: 1年前
投稿: 11
Topic starter  

@chu-ya さん

お世話になります。

ご教示ありがとうございます。

gapという書き方(?)もあるんですね!

大変、勉強になります。

現在、わいひらさんに ソースコードをご提示させて頂きました。

わいひらさんの方で、改善の検討も頂いておりますようで、現状は私の方でも表示できているようなので、少しこのままで行こうかと思っています。(私自身のスキル不足でchu-yaさんのアドバイスが実行できるか不安な為です。

ともあれ、chu-yaさんにアドバイス頂けた事を大変感謝致しております。

また、ご質問などをフォーラムに書かせて頂くことがあると思います。

その際は、懲りることなく、アドバイスをどうぞ宜しくお願い致します。

ほんとに有難うございます。


   
わいひら reacted
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

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

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

最近の書き込みはこちら。

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

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