見出し付きの囲い枠のレイアウトが崩れないようにするにはどうしたらいいですか?

0
いいねをした人: 居ません
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #12515
    アバター画像うぽぽい
    参加者
    0

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】v5.0.0
    【お使いのブラウザ】Google Crome
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)https://41bengo.com/bloghistory


    こんにちは。
    初めて投稿します。

    先日、lightning ProからSnow Monkeyに変更をいたしました。

    そうしましたら、

    のページにあるような、見出し付きの囲い枠のレイアウトが崩れました。

    今は、

    のページをみていただくと分かりますが、レイアウトが崩れてしまいます。

    崩れないようにするには、どうしたらいいでしょうか?

    どうか、宜しくお願い申し上げます。

    0
    いいねをした人: 居ません
    #12531
    アバター画像キタジマ タカシ
    参加者
    2421

    「lightning Pro から Snow Monkeyに変更」以外にも何か操作をされましたか?

    では、

    <span style="padding:6px 10px; background:#000066; color:#ffffff; font-weight:bold;">■タイトルはこちら■</span><div style="border:1px solid #000066; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

    のように div と span を書いて装飾しているようですが、

    では普通の p タグで記述されているようです。

    もしブロックエディターをお使いで、「ブロックに変換」をされたのでしたら、そのような HTML はブロックに変換できず p になってしまうかもしれません。もしブロックに変換をされたのでしたら、リビジョンで前の状態に戻すか、Snow Monkey Blocks のアラートブロックなどを使って新たに装飾しなおすのが良いかもしれません。

    0
    いいねをした人: 居ません
    #12648
    アバター画像うぽぽい
    参加者
    0

    キタジマさん、ご回答ありがとうございます。

    「lightning Pro から Snow Monkeyに変更」以外にも何か操作をされましたか?

    詳しい方に変更をやっていただいたので、何か操作したかについては、今は答えられません..
    すみません。

    ご教示を元に、トライしてみました。
    ただ、まだ解決しません。

    もう1度、状況を再説明させてください。

    この状況でしたら、きちんと表示をされます。
    ただ、

    ブロックへ変換ボタンをおすと、

    このように2つに分かれてしまいます。
    そして、

    このように2つに分かれてしまいます。

    <div style="height:12px;"><span style="margin-left:8px; padding:6px 10px; background:#FF99CC; color:#ffffff; font-weight:bold;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;"><font size="3">【ここにタイトルを入力】</font></span></div><div style="border:2px solid #FF99CC; padding:25px 12px 10px; font-size:1em;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">ここに本文を入力します</div>
    

    このようにひとまとまりだったのが、

    <div style="height:12px;"><span style="margin-left:8px; padding:6px 10px; background:#FF99CC; color:#ffffff; font-weight:bold;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;"><font size="3">【ここにタイトルを入力】</font></span></div>
    
    <div style="border:2px solid #FF99CC; padding:25px 12px 10px; font-size:1em;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">ここに本文を入力します</div>

    と2つに分かれてしまいます…

    0
    いいねをした人: 居ません
    #12657
    あげ
    参加者
    1

    ↑これを、

    ↑こう表示されたいのだとすれば、分割された2つのブロックのうち後者のstyle属性に margin-top: 0; を追記すれば解消される可能性があります。

    例えば、

    <div style="padding: 30px 15px 10px; border-radius: 5px; border: 1px solid #e9546b;">
      <a href="https://41bengo.com/archives/4169">「分限裁判の記録」(岡口基一)のサイトにブログ記事が貼られてびっくり(平成31年1月25日のブログです)</a>
    </div>
    

    であれば、

    <div style="margin-top: 0; padding: 30px 15px 10px; border-radius: 5px; border: 1px solid #e9546b;">
     <a href="https://41bengo.com/archives/4169">「分限裁判の記録」(岡口基一)のサイトにブログ記事が貼られてびっくり(平成31年1月25日のブログです)</a>
    </div>
    

    のようにです。

    …ただし、参考元の記事自体が古いですので、そもそも別の方法(Snow Monkey Blocksのアラートなりボックスなり)での表現を検討されたほうが安心な気がしました。

    仮に fieldsetとlegendタグで表現するにしても、スタイル(CSS)の指定方法があまりよろしくないので変えたほうが良さそうです。また、これらのタグはWebフォーム用と私は認識しており、記事本文内で利用するのが望ましいのか自体わかりませんが…!

    ひとまず、例えばこのように書くと、

    <fieldset>
      <legend>見出し</legend>
      ほげほげ
    </fieldset>

    SNOW MONKEYではこのように表示されます。

    それをstyle属性で次のように書き加えると、

    <fieldset style="border: 1px solid #ff1493; padding: 10px; border-radius: 4px;">
      <legend style="padding: 6px 10px; background: #ff1493; color: #ffffff; font-weight: bold; border-radius: 6px;">見出し</legend>
      ほげほげ
    </fieldset>
    

    このように表示されるはずです。

    0
    いいねをした人: 居ません
    #12668
    アバター画像キタジマ タカシ
    参加者
    2421

    @水谷 真実 さん

    ブロックへ変換ボタンをおすと、

    「ブロックへ変換」は、ブロックエディターに用意してあるブロックになんとか変換を試みようという機能です。「見出し」「段落」「画像」のような汎用的な HTML タグであれば問題なく変換されますが、独自に記述した HTML は適したブロックが存在しないため、意図しない形に変換されることがあります。そのため、独自に HTML を書いているのでしたら、その部分については変換しないがベターだと考えます。

    @rokuzeudon さんが書かれているように、ブロックエディターを使用されるのであれば、Snow Monkey Blocks のアラートなりボックスなりに置き換えるのがおすすめです。最初は置き換えの手間がかかると思いますが、今後の運用を考えると、見たまま編集ができるブロックに置き換えてしまったほうが結果的には運用しやすいと思います。

    @rokuzeudon さん、コメントありがとうございます!

    0
    いいねをした人: 居ません
    #12889
    アバター画像うぽぽい
    参加者
    0

    rokuzeudon様

    詳しく御説明をいただき、どうもありがとうございます。
    ほげほげ、が面白いですね!サンプルプログラムなどのときに、使われるんですかね。

    <fieldset style=”border: 1px solid #ff1493; padding: 10px; border-radius: 4px;”>
    <legend style=”padding: 6px 10px; background: #ff1493; color: #ffffff; font-weight: bold; border-radius: 6px;”>見出し</legend>
    ほげほげ
    </fieldset>

    こちらを作成していただき、ありがとうございます。
    応急処置といっては変ですが、使わせていただこうと思います。

    Snow Monkey Blocksのアラートやボックスは、どういうときに使うのかまだ分かりません。
    今回の場合に、アラートやボックスが関係しているのか、分かりません。
    すみません…

    でも、

    のページをみて、想像つきました。
    アラートやボックスで表現する方が、シンプルだし、簡単だし、素敵に表現ができるよ、ということですね!

    別の方法も教えていただき、重ねてありがとうございます。

    これから、少しずつ、学んでいきたいと思います。
    どうもありがとうございました。

    0
    いいねをした人: 居ません
    #12890
    アバター画像うぽぽい
    参加者
    0

    キタジマ様

    ブロックの変換について、教えていただきありがとうございます。
    かしこまりました。

    Snow Monkey Blocks のアラートやボックスは、シンプルですし綺麗で使いやすそうですね。
    これから、少しずつマスターしていこうと思います。

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

     

    0
    いいねをした人: 居ません
    #12891
    アバター画像うぽぽい
    参加者
    0

    再度、失礼いたします。

    rokuzeudon様、キタジマ様のご助言を元に、自分のページ全体をリライトいたしました。

    前とは、ずいぶんと違って、パワーアップしたと思っております。
    重ねて、どうもありがとうございました。

    0
    いいねをした人: 居ません
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • トピック「見出し付きの囲い枠のレイアウトが崩れないようにするにはどうしたらいいですか?」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。