Simplicityの特徴 › フォーラム › Simplicityについての質問 › PCの引用符も非表示にしたい
- このトピックには10件の返信、1人の参加者があり、最後に
doにより8年、 2ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年12月9日 10:55 PM #48519
do
ゲストお世話になっています!
simplicityさんはスマホだけ引用符はデフォルトで非表示にしているというのを過去の質問のやり取りで読みました。
そこでPCからもblockquoteの引用符(前後に出る「”」←こんな記号のマークです)を非表示にしたいのですが、その場合にはどのように設定したらよいでしょうか?
宜しくお願い致します! -
2016年12月9日 11:48 PM #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でも良いですが子テーマを利用されているのであれば子テーマに書いてください -
2016年12月10日 2:18 AM #48531
Hidekichi
ゲストblockquote::before, blockquote::after { display: none; }
でもいけるかと。ただ消すだけではなく、幅を広くとりたいがためというようなことなら別の方法もあります。
例えば、
サンプル: 微調整は必要だけれどデフォルトより広く使うblockquote | codepenとかの3つ目とかどうでしょう?
-
2016年12月10日 3:08 AM #48533
みき
ゲスト確かに簡単ですね
いろいろと書いてあったのでデザインが崩れるかなぁと思って上のレスにしたのですが
Hidekichiさんのほうがいいですね
これって:
が二つある意味があるんですか?
下のとおりで動くのでblockquote:before, blockquote:after { display: none; }
-
2016年12月10日 3:12 AM #48534
みき
ゲストなんかおかしい?・・・
blockquote :before, blockquote :after { display: none; }
-
2016年12月10日 3:16 AM #48535
みき
ゲスト・・・
blockquote :before , blockquote :after { display: none; }
まぁいっか
-
2016年12月10日 3:48 AM #48537
Hidekichi
ゲスト:と::の違いは、疑似クラスか疑似要素かの違いです。
疑似要素はbefore, after以外にもありますが、まぁこの2つが主です。それ以外は擬似クラスです。
:hoverや:nth-childとかですね。css2ではbeforeも:が一つだけでよかったんですがcss3からは::と2つつけます。
first-letterという疑似要素がありますが、first-childなどの擬似クラスと混ざるとややこしいので識別しようぜということでcss3からそうなりました。
今でもcss2の表示は互換性があるのでどちらも使えますが、:beforeは古い書き方です。そのうちcss2のサポートをブラウザがやめるぜということになった場合(まぁないですけど)、それでは正しく動作しません。css4では擬似クラスも増えますので、できるだけ区別して書くようにするのが吉です。
-
2016年12月10日 4:04 AM #48539
みき
ゲストHidekichiさん
詳しい説明ありがとうございます!!そのうちcss2のサポートをブラウザがやめるぜということになった場合(まぁないですけど)、それでは正しく動作しません。
ない確立のほうが高くても0.00001%ぐらいはあると思うので
今のうちに勉強しておきます 笑css4では擬似クラスも増えますので、できるだけ区別して書くようにするのが吉です。
いろんなことが増えると覚えるのが大変ですね
がんばります!! -
2016年12月10日 12:03 PM #48545
do
ゲストみきさん、ひできちさん返信ありがとうございます!
早速色々試させていただいたところ、ひできちさんの幅を広げるのが一番イメージに近かったです!
理想はひできちさんの幅広から上の引用符マークも無しになった状態です(スマホと全く同じ感じです)。
早速「サンプル: 微調整は必要だけれどデフォルトより広く使う」をCSSにはりつけてみたいのですが、本当に実行していいですか?と出てきてしまいました。
どのようにサンプルコードを利用させていただけばよいでしょうか?
いつもすみません。よろしくおねがいいたします! -
2016年12月11日 3:37 AM #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とかは折りたたんでスクロールを少なくできます。 -
2016年12月12日 11:40 AM #48603
do
ゲスト早速アドバイスの通りに試してみたところ、思っていた形にかなり近づきました!
ありがとうございます!!いつも感謝です。
-
-
投稿者投稿
- トピック「PCの引用符も非表示にしたい」には新しい返信をつけることはできません。