画像

kn1711さん

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

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

上記のようにすれば

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

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

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

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

以下と

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

 

以下が

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

 

同じ場所に適用されることになり、前者が勝ってしまう

@mk2_mk2 さん

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

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

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

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

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

もしかしたら.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/
------------------------------------------------

@mk2_mk2 さん

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

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

有難うございました！

kn1711さん

私のは暫定ですので。

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

@yhira さん

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

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

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

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

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

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

今度は、以下が・・・。

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

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

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

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

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

@mk2_mk2 さん

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

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

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

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

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

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

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

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

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

kn1711さん

申し訳ないです。

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

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

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

わいひらさん

投稿者:: @yhira

↑

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

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

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

【クラシックエディタ】

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

対応前

【クラシックエディタ】

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

【クラシックエディタ】

 

【Gutenberg】

 

 

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

投稿者:: @mk2_mk2

↑

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

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

わいひらさま、ｍｋ２＿ｍｋ２さま

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

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

現状としては、

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

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

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

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

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

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

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

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

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

@yhira さま

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

kn1711さん

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

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

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

@mk2_mk2 さん

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

@yhira さま

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

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

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

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

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

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

無理に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;
  }
}

kn1711さん

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（なんだか、まとまりませんね・・・私）

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

@chu-ya さん

お世話になります。

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

gapという書き方（？）もあるんですね！

大変、勉強になります。

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

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

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

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

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

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