PCの引用符も非表示にしたい

Simplicityの特徴 フォーラム Simplicityについての質問 PCの引用符も非表示にしたい

  • このトピックには10件の返信、1人の参加者があり、最後にdoにより8年、 2ヶ月前に更新されました。
10件の返信スレッドを表示中
  • 投稿者
    投稿
    • #48519
      do
      ゲスト

      お世話になっています!
      simplicityさんはスマホだけ引用符はデフォルトで非表示にしているというのを過去の質問のやり取りで読みました。
      そこでPCからもblockquoteの引用符(前後に出る「”」←こんな記号のマークです)を非表示にしたいのですが、その場合にはどのように設定したらよいでしょうか?
      宜しくお願い致します!

    • #48520
      みき
      ゲスト

      親テーマのstyle.cssで以下が指定してありました

      blockquote:before {
        color: #C8C8C8;
        content: "“";
        font-family: serif;
        font-size: 600%;
        left: 0;
        line-height: 1em;
        position: absolute;
        top: 0;
      }
      
      blockquote:after {
        color: #C8C8C8;
        content: "”";
        font-family: serif;
        font-size: 600%;
        line-height: 0;
        position: absolute;
        right: 0;
        bottom: -16px;
      }

      これを子テーマのstyle.cssに追加して
      contentを消せばできました
      ※親テーマのstyle.cssでも良いですが子テーマを利用されているのであれば子テーマに書いてください

    • #48531
      Hidekichi
      ゲスト
      blockquote::before,
      blockquote::after {
        display: none;
      }

      でもいけるかと。ただ消すだけではなく、幅を広くとりたいがためというようなことなら別の方法もあります。

      例えば、
      サンプル: 微調整は必要だけれどデフォルトより広く使うblockquote | codepen

      とかの3つ目とかどうでしょう?

    • #48533
      みき
      ゲスト

      確かに簡単ですね
      いろいろと書いてあったのでデザインが崩れるかなぁと思って上のレスにしたのですが
      Hidekichiさんのほうがいいですね
      これって:が二つある意味があるんですか?
      下のとおりで動くので

      blockquote:before,
      blockquote:after {
        display: none;
      }
    • #48534
      みき
      ゲスト

      なんかおかしい?・・・

      blockquote :before,
      blockquote :after {
        display: none;
      }
    • #48535
      みき
      ゲスト

      ・・・

      blockquote :before ,
      blockquote :after {
        display: none;
      }

      まぁいっか

    • #48537
      Hidekichi
      ゲスト

      :と::の違いは、疑似クラスか疑似要素かの違いです。
      疑似要素はbefore, after以外にもありますが、まぁこの2つが主です。それ以外は擬似クラスです。
      :hoverや:nth-childとかですね。

      css2ではbeforeも:が一つだけでよかったんですがcss3からは::と2つつけます。

      first-letterという疑似要素がありますが、first-childなどの擬似クラスと混ざるとややこしいので識別しようぜということでcss3からそうなりました。
      今でもcss2の表示は互換性があるのでどちらも使えますが、:beforeは古い書き方です。そのうちcss2のサポートをブラウザがやめるぜということになった場合(まぁないですけど)、それでは正しく動作しません。

      css4では擬似クラスも増えますので、できるだけ区別して書くようにするのが吉です。

    • #48539
      みき
      ゲスト

      Hidekichiさん
      詳しい説明ありがとうございます!!

      そのうちcss2のサポートをブラウザがやめるぜということになった場合(まぁないですけど)、それでは正しく動作しません。

      ない確立のほうが高くても0.00001%ぐらいはあると思うので
      今のうちに勉強しておきます 笑

      css4では擬似クラスも増えますので、できるだけ区別して書くようにするのが吉です。

      いろんなことが増えると覚えるのが大変ですね
      がんばります!!

    • #48545
      do
      ゲスト

      みきさん、ひできちさん返信ありがとうございます!
      早速色々試させていただいたところ、ひできちさんの幅を広げるのが一番イメージに近かったです!
      理想はひできちさんの幅広から上の引用符マークも無しになった状態です(スマホと全く同じ感じです)。
      早速「サンプル: 微調整は必要だけれどデフォルトより広く使う」をCSSにはりつけてみたいのですが、本当に実行していいですか?と出てきてしまいました。
      どのようにサンプルコードを利用させていただけばよいでしょうか?
      いつもすみません。よろしくおねがいいたします!

    • #48573
      Hidekichi
      ゲスト

      まずcssはscssで書いてます。css欄の下向き三角からview compiledボタンを押してcssに変換したものを利用します。子テーマstyle.cssにコピペです。
      コピペ部分の先頭に@charset "UTF-8";が自動で入りますが、これは子テーマstyle.cssに既に入ってあるので、コピペ後削除してください。
      これはコメントを日本語というかcssの文字コードをutfにして読めるようにするものです。

      3つある内、上2つは幅を制限するかしないかだけです。blockquoteにclass=”narrow”と入れれば幅が制限されたものが利用できます。
      この2つはblockquoteの中に(pタグ)がある時、その前後にクォートを入れてます。これらは

      blockquote p::before,
      blockquote p::after {
        display: none;
      }

      をコピペした最後に追記しても消えますし、コピペ内のp::before部分をコメントアウトしたり削除しても消すことはできます。

      3つ目はblockquoteにclass=”morewide”と入れることで使えます。
      blockquote.morewideとあるセレクタを全部コピペしなければこれらは使用できなくなります。
      3つ目のblockquoteのクォートとその背景のグレー部分は、blockquoteそのものにbofore,afterが設定してあるので、

      blockquote.morewide::before,
      blockquote.morewide::after {
        display: none;
      }

      で消すことができます。どのようにしてblockquoteを適用しているかは、html欄の272行目辺りから参考にしてください。
      行番号右側の下向き三角はその開始・閉じタグまでを折りたためます。#mainは折りたたむと中が見えませんがheaderとか、bredcrumbとか、navとかは折りたたんでスクロールを少なくできます。

    • #48603
      do
      ゲスト

      早速アドバイスの通りに試してみたところ、思っていた形にかなり近づきました!
      ありがとうございます!!いつも感謝です。

10件の返信スレッドを表示中
  • トピック「PCの引用符も非表示にしたい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)