[shone]

【お使いの Snow Monkey のバージョン】16.0.3
【お使いの Snow Monkey Blocks のバージョン】14.0.0
【お使いの Snow Monkey Editor のバージョン】7.0.0
【お使いのブラウザ】chrome
【当該サイトのURL】

 

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

現在、『メディアとテキスト』ブロックを使用し、画像のようなイメージのコンテンツを作成しています。

 

 

このとき、モバイルだったり、PCでもデバイスの画面幅によっては『メディアとテキスト』内のタイトル部分が折り返されるかと思います。

 

 

この折り返しの部分をただ折り返すのではなく、下の画像のイメージで数字の部分はそのままに、文章だけ折り返すことは可能でしょうか？

 

 

自分でもタイトルに記述をせず『カラム』を利用してみたり、番号付きリストを試したりと思いついたことはやってみたのですが、理想の表示にはならず…

他のブロックと組み合わせて実現可能なら『メディアとテキスト』の使用はありません。

あるいはCSS等も利用して制御することで実現できますでしょうか？

 

何か良いアイデアがありましたらアドバイスいただけますと幸いです。

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

♥ 0

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

[Olein_jp]

タイトル部分の擬似要素（::before とか ::after）で数字部分（赤文字部分）を持たせて絶対配置することで実現できると思います。

♥ 1

いいねをした人:

[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

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

[Olein_jp]

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

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

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

また実際、どのような仕様・要件でこちらを実現したいということは計り知れないので、あくまでもこの表示を実現するという視点だけで話を進めます。

まず、こちらのコードである程度、目指されている実装が可能になるかと思います。何かしら任意のクラス名を追加した上で細かい部分を調整しながら書き換えてみてください。

.smb-media-text__title {
    position: relative;
    padding-left: 3rem;
}
.smb-media-text__title::before {
    position: absolute;
    content: "1.";
    display: inline-block;
    top: 50%;
    left: 0;
    font-size: 40px;
    line-height: 1;
    margin-top: -20px;
    color: var( --accent-color );
}

あとは、擬似要素で数字を管理しているので、共通部分は共通クラスにまとめ、変更する部分だけ別クラスで記述することでCSSの管理が楽になると思います。その点はご自身で求められる最適な形を探してみてください。

追記ーー
メディアクエリを活用してスマホ表示時、それ以外という形で記述して表示の有無は切り替えてください。メディアクエリの書き方は Snow Monkey で作られているサイトを検証ツールで見ていると、記述があると思うのでわかりやすいかと思います。

♥ 0

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

[shone]

>Olein_jpさん

 

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

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

 

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

 

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

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

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

 

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

♥ 0

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

[Olein_jp]

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

この点は多くの方が悩まれる部分ですし、僕自身も日々悩みながら実装しています。しかし、解決方法としては「とにかく使い倒して理解を深める」以外にないのかなと思うところもありますので、ぜひ今後も WordPress や Snow Monkey、ブロックエディタを触りながら楽しんでいただければと思います。

お疲れ様でした！

♥ 3

いいねをした人:

[投稿者]

投稿