記事内の文字を囲む際のカスタマイズについて

PR 2017/11/21

このトピックには7件の返信、1人の参加者があり、最後にかうたっくにより8年、 9ヶ月前に更新されました。

7件の返信スレッドを表示中

投稿者

投稿
- 2017年11月20日 11:41 AM #57049
  はるこま
  ゲスト
  いつもお世話になっております。
  
  記事内に貼り付けるボックスデザインのカスタマイズをしているのですが、上手くいきません。
  AddQuicktagのプラグインも同時に使いたいと思っています。
  
  ボックスデザインの参考にしているサイトはコチラです。
  https://saruwakakun.com/html-css/reference/box#section1
  
  こういうデザインにしたいと思っていて、子テーマのスタイルCSSに以下を貼り付けて、htmlで<div class=”box25″>ここに文章</div>を指定するのですが、うまく反映されません。
  
  改善方法を教えて頂きたいです。
```
.box25{
    position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
}
.box25:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25 p {
    margin: 0; 
    padding: 0;
}
```
- 2017年11月20日 3:49 PM #57052
  かうたっく
  ゲスト
  ”box25″が全角文字になっているようです。半角文字"にして以下のように追加したらうまく反映されるかと思われます。
```
<div class="box25">

ここに文章

</div>
```
  後はCSSのcontent: ”;もなんか変です。
  content: '';に変更してもらえますか。サイト内のコードをコピペすればイケると思います。
- 2017年11月20日 4:27 PM #57055
  
  はるこま
  ゲスト
  
  かうたっく様
  
  ご指摘ありがとうございました！
  カスタマイズについては、うまくいきました。
  
  文章の編集画面のビジュアルには、画像が出てこないので、テキストで編集するしかないようなのですが、
  それで合っていますでしょうか？
- 2017年11月20日 4:53 PM #57056
  
  かうたっく
  ゲスト
  
  ビジュアルエディタにスタイルが反映しないって事でしら、同じコードをSimplicity2 child: ビジュアルエディターのスタイルシート (editor-style.css)に貼り付けると反映します。
  
  アドクイックタグで編集する際の事でしたら、開始タグに<div class="box25">　終了タグに</div>　と入れたらOKです。2個以上段落があるとき範囲指定してタグを追加すれば、ビジュアルエディタからでも使えますよ。※ただ場合によって段落が2つ以上あるとき、使えない事もあるので色々工夫して試してみてくださいね。
- 2017年11月20日 6:47 PM #57064
  
  はるこま
  ゲスト
  
  かうたっく様
  
  アドクイックタグでも使えていたのですが、ビジュアルエディタが反映されなかったのですが、
  同じコードをSimplicity2 child: style.cssのコードを外して、ビジュアルエディターのスタイルシート (editor-style.css)だけに貼り付けてみましたら、うまくいきました。
  
  これで、編集がやりやすくなりましたm(_ _)m
  ありがとうございました！
- 2017年11月20日 8:04 PM #57069
  
  かうたっく
  ゲスト
  
  同じコードをSimplicity2 child: style.cssのコードを外して、ビジュアルエディターのスタイルシート (editor-style.css)だけに貼り付け
  
  ・style.cssはユーザーさん用・公開しているサイト用の装飾なので、消すとサイトのスタイルがなくなります。
  
  ・editor-style.cssはサイトオーナー専用装飾で、WordPressのダッシュボード内、投稿にあるビジュアルエディタでのスタイルです。
  
  style.css・editor-style.cssどちらも同じコードを付けていると、都合良いと思いますよ。
- 2017年11月20日 9:32 PM #57070
  
  はるこま
  ゲスト
  
  style.cssはユーザーさん用・公開しているサイト用の装飾なので、消すとサイトのスタイルがなくなります。style.css・editor-style.cssどちらも同じコードを付けていると、都合良いと思いますよ。
  
  だったのですね。
  
  言葉足らずだったのですが、さっきは、どちらにも張ってみたら、ビジュアルエディタに出てこなかったのですよ。（キャッシュも消してみましたが。）
  
  今、style.cssにも張ってみたら、きちんとビジュアルエディタも作動したので、どちらにも張りました。
  ありがとうございました！
- 2017年11月21日 3:55 AM #57074
  
  かうたっく
  ゲスト
  
  どちらにも張ってみたら、ビジュアルエディタに出てこなかったのですよ。（キャッシュも消してみましたが。）
  
  もしかしたら、まだキャッシュが残っていたのかもしれませんね？
  
  editor-style.cssはサイトオーナー専用装飾で、WordPressのダッシュボード内、投稿にあるビジュアルエディタでのスタイルです。
  
  editor-style.cssは、公開された本番環境のスタイルではなくて、ダッシュボード内にある投稿画面で編集できる人＝管理画面のビジュアルのみに反映するスタイル・装飾なので、スタイルが見れるのは管理画面に入れる人だけ。といえば良かったかもしれないですね。
  
  同じCSSでも反映する場所が全く違うって事でした。初めはやっぱり混乱するかもしれないですね。時間とともにわかってくると思います❦
投稿者

投稿