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

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

このトピックには10件の返信が含まれ、1人の参加者がいます。9 ヶ月、 2 週間前 do さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #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

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

トピック「PCの引用符も非表示にしたい」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)