[shone]

＞Olein_jpさん

 

アドバイスいただきありがとうございます。

『情報』ブロックを思い通りにカスタマイズするには苦労しそうで、標準のテーブル機能を使用することにしました。

ただテーブルブロックのセル内では『リスト』ブロックが使えない？ようで、結局『クラシック版の段落』＋Tiny MCEプラグインで表を挿入し各設定を行い、なぜかパディングの設定が効かなかったのでパディングは追加CSSにて設定…としました。

力技でしたが一応当初の目的である枠線の太さを統一＆色を変更することはできたので、解決とさせていただきます。

♥ 0

いいねをした人: 居ません

[shone]

>Olein_jpさん

 

返信ありがとうございます。

いただいたコードを元に細部調整して希望通りの表示にすることができました。ありがとうございます。

 

この部分のCSSをご理解いただけないとなると、多少コードを書くことが多い人間からの視点からですが、まずは Snow Monkey のカスタマイズの前に、基本的なCSSへの知見を蓄積されることも視野に入れられた方が、スムーズに実現できることが増えて楽しくなるかなと感じます。

 

まさにご指摘の通りで、これまでわからないことは都度調べて何となくで対応してきたのですが、疑似要素などは触れたこともなく、また深く学んでいる時間も無かったために自力では解決不可能な状況に陥ってしまいました。

またブロックエディタでの編集＋コードの編集というのがいまだになれず、どこまでがブロックで実現してどこからコードを書けば一番無駄なく、理想通りに体現できるのか？という点で躓くことが最近増えたと感じております。

諸々、もう一度基礎から学び直してみたいと思います。

 

この度はアドバイスをいただきありがとうございました。

♥ 0

いいねをした人: 居ません

[shone]

>Olein_jpさん

 

アドバイスいただきありがとうございます。

タイトル部分に直接数字を入れるのではなく、疑似要素でcss内に数字を記述する…という発想でしょうか？

 

今回『メディアとテキスト』ブロックは同一セクション内にセクション3つ連続で使っていて、

１．タイトル文字

２．タイトル文字

３．タイトル文字

といった形にしたいので、それぞれのブロックにabs-pc01、abs-pc02、abs-pc03とCSSクラスを振ってみました。

 

そして試しに

.abs-pc01 .smb-media-text__title::before{/*疑似要素*/
position: absolute;
top: 10px;
left: 0;
content: "１．";
font-size: 44px;
color: #cf2e2e;
}

と追加CSSに記述したところ、数字は表示されたのですが、タイトル文字部分と重なってしまいうまく折り返しが機能しません。

またsnow monkeyの「表示設定（ウィンドウサイズ）」機能でPCタブレットとスマホでセクションを出し分けているので、スマホ時には疑似要素は消えてほしいのですが、上記記述ですとスマホ時非表示にしているつもりでも、スマホ時にも表示されてしまうようでして…

 

正直自力で解決が難しい状況です。

アドバイスいただけますと幸いです。

♥ 0

いいねをした人: 居ません

[shone]

ご返信ありがとうございます。

クラスの付与の方法は把握していまして、カスタマイズ時に使用することもあるのですが…今回のようなデザインを実現したいときに、独自のクラスを指定した部分にどうCSSを記述すればうまくいくのかがわからない…という意味合いになります。

動画も先に拝見していて、情報ブロックの～、のところも見てはいたのですが…

ではいざ今回のように、太さを均一にするスタイルを当てたいとなったときに、具体的にどう書けばそれが実現できるのかが知識不足でわからないということでした。

 

ただ上に書いたCSSを、指定先を独自のクラスに変更するだけでは意味がないので…いったんデザインをリセットしてテーブル組みにいちからCSSを当てたりするべきなのか？何か他にスマートな記述があるのか？等を考えておりました。

♥ 0

いいねをした人: 居ません

[shone]

>Olein_jpさん

 

アドバイスいただきありがとうございます。

たしかに色とpxを変更するとかなり目立つことがわかりますね…

 

私としては色を変更しつつ全ての罫線の太さを同じにしたいのですが、デフォルトのスタイルにCSSを当てるのでは実現が難しい（記述が複雑？）になってしまうのでしょうか。

追加でCSSクラスを付与して記述のほうが楽とのことですがそちらのアイデアや知識も無く…うまい記述がありましたらアドバイスいただけますと幸いです。

 

繰り返しの質問で申し訳ございませんが、よろしくお願い致します。

♥ 0

いいねをした人: 居ません

[shone]

>Olein_jpさん

 

返信いただきありがとうございます。

検証ツール（chromeのデベロッパーツール）の初歩的な使い方は一応理解しているつもりでしたが、見落としがあるのか今回変更したい部分が見つけられずにどう記述するか見当がつかず…という状態でした

もう一度確認してみて、

 

.smb-information.is-style-border .smb-information__item {
border: 1px solid #778899;
}

.smb-information.is-style-border[data-sm-split-column=true] .smb-information__item>.c-row>.c-row__col:last-child {
border-left: 1px solid #778899;
}

 

のように記述したところ、色の変更はできたのですが、今度はよく見ると表の一列目の下の線だけ太くなっているように見えます。

デフォルトの薄グレーだと目立っていないのですが、CSSを追記する前も太くなっているように見えるので、何か要素が二重になっているのか？元々の仕様で仕方がないのか？わかりかねています…

♥ 0

いいねをした人: 居ません

[shone]

＞キタジマさん

 

修正ありがとうございます！

アップデートし確認致しました。問題なく表示されておりました。

 

解決しましたのでトピック閉じさせていただきます。

♥ 1

いいねをした人:

[shone]

ありがとうございます！
クライアントからの要望でちょうどこの項目のブロックリンクが使えたら良いなあと思っていたのでご対応いただけると助かります…！

年末年始でお忙しいとは思いますがお手すきの際によろしくお願い致します。

♥ 0

いいねをした人: 居ません

[shone]

＞キタジマさん

 

これは .smb-items.is-style-border についてですかね？ こちらで確認したところ、

 

ご確認いただきありがとうございます。

私が確認して余白が消えたのは、

 

@media (max-width: 39.9375em)
.c-row[data-columns]:not([data-columns="1"])>.c-row__col {

 

の部分のCSSでした。

また、追加CSS以外に自分でCSSを記述したところはありませんので念のため追加CSS部分を再度削除してみましたが状況は変わらずでした（他のプラグイン等の影響などもあるでしょうか？）

♥ 1

いいねをした人:

[shone]

ご返信ありがとうございます。

 

ですので、画像自体もしくはそれらをラップしている要素に任意のCSSクラスを設定し、CSSを設定してみてください。

 

画像にCSSクラスを付与することで解決できました！

この度はありがとうございました。

♥ 0

いいねをした人: 居ません

[shone]

ご返信いただきありがとうございます。

 

デモサイトなど実際に拝見できる物があれば、何かしらアドバイス差し上げることはできるかもしれませんが…。

 

ありがとうございます。本当は見ていただけるのであれば実際のサイトを見ていただくのが確実だと思うのですが、ローカルで構築してしまったためにすぐにお見せできる形ではなく…

ちなみにロゴのサイズ等の情報ですが、元のサイズは320×87で、snow monkeyの設定でPC時の拡大率を50%、モバイル時の拡大率を25%と設定しています。

またモバイル時、実際に出力されているサイズを見ると80×21となっておりました。

 

またmy snow monkeyに記述して出力した画像をデベロッパーツールで確認したところ、cssが

img {
height: auto;
max-width: 100%;
vertical-align: middle;
}

となっていましたので、

img {
height: auto;
max-width: 100%;
position: absolute;
top: 10px ;
}

と調整してみたところ、それらしき一に置くことはできました（微調整が必要そうですが）。

ただこれがデベロッパーツール上では動くのですが、追加CSSに記述しても効かないので、何か間違っているのかと思うのですが見当がつかず…

アドバイスやヒントでもいただけると大変助かります。

何卒よろしくお願い致します。

♥ 0

いいねをした人: 居ません

[shone]

＞キタジマさん

 

ご返信ありがとうございます。

 

「ボーダー」も「境界線」も確かに項目内の余白が想定より小さいようにみえます。「スマホ表示」ということですが、デバイスは何を使っていますか？ iPhone 12、Pixel 6 等…

 

デバイスですが、デベロッパーツールの各デバイスiPhone系、Pixel系等色々試してみたところ、画面サイズは異なるものの全てのデバイスにて上記の状況が発生しました。

また実機で自前のXperiaで確認しても現象が発生しているので、デバイスの問題ではなさそうな気がしています。。。

 

デベロッパーツールで確認したところ、下記のCSSが当たっているみたいで、

margin-bottom: .9rem;
margin-bottom: calc(var(--_space, 1.8rem)*.5*var(--_margin-scale, 1));
padding-left: .45rem;
padding-left: calc(var(--_space, 1.8rem)*.25*var(--_margin-scale, 1));
padding-right: .45rem;
padding-right: calc(var(--_space, 1.8rem)*.25*var(--_margin-scale, 1));

margin-bottomを外してみると縦線の隙間は無くなるようです（ただその場合3列目の幅がやや小さくなってしまうのですが…）。

♥ 0

いいねをした人: 居ません

[shone]

ご返信ありがとうございます。

画像のように、ロゴ画像がすぐメニューの項目のすぐ上にくっついてしまうので、これをハンバーガーメニューのボタンと同じ高さで左側に設置したいのです（メニュー展開前と同じ場所に表示したい）。

サイズはwidthやheight指定で良いのかなと思うのですが、ロゴをメニュー展開前とピッタリ同じ位置に合わせるのがどうすれば良いかわからず…

要は展開前と同じになれば良いので、.c-site-branding__title .custom-logoや.c-site-branding__titleあたりの優先度をz-indexで指定してあげれば良いのかとも考えたのですがうまくいきませんでした（このアプローチ自体が間違っているでしょうか？）

 

アドバイスいただけますと幸いです。

何卒よろしくお願い致します。

♥ 0

いいねをした人: 居ません

[shone]

＞GONSYさん

 

返信ありがとうございます！

自分でもそう思いデベロッパーツールで同部分を参照し指定してみたのですがうまくいかなかったため質問させていただきまして…返信いただいたので本日再度試してみたところうまくいきました…！

どうもコピペした際の初歩的なミスでスペースの問題だったようです…失礼致しました。

 

GONSYさんのおかげでやり方がわかっていないと思い見直すことができました、ありがとうございました！

♥ 0

いいねをした人: 居ません

[shone]

連投失礼致します。

先頭行の<?phpを削除するとドロワーナビゲーション内に画像を出力することができたのですが、ポジションが中央に寄ってしまっています。

サイズや位置を調整するにはどのようにすれば良いでしょうか？

♥ 0

いいねをした人: 居ません

[投稿者]

投稿