CSSを使い、文章の変更や非表示する方法が知りたい。

Question

custom CSSを利用して文章の一部を書き変えようと思っています。

http://twotic.online/registration/
リンク先のページのプロフィール詳細にある、

このフィールドを表示できるユーザー: 全員

と書かれた文字を非表示にしたいのですが、どのようにすればいいのでしょうか？

#field-visibility-settings-toggle-10
 {
	content: "none";
    }

と書いたのですが、id、class、何を指定して変更をすればいいのかわかりません。１つわかれば全部できると思うので１つだけ教えてもらえないでしょうか。

また、
http://twotic.online/login
のページの登録と書かれた文字を書き換えたくて、

a.bp-login-widget-register-link{
  content: "新規アカウント登録";
}

と書いたのですが、これも反映されず困っています。

---

【追記】

#field-visibility-settings-toggle-10
 {
	display:none;
    }

として、文字を非表示にできたが下のスペースまで一緒に失われてしました。
このスペースは必要なので、失われることなく文字を非表示にするにはどうすればいいでしょうか？

※また、名前（必須）の欄の”このフィールドを・・”の文字だけは
.visibility-toggle-linkと#field-visibility-settings-toggle-10
で指定すれば、スペースを維持して文字を消すことはできました。
他の場所は方法がありません。どうかお教え下さい。

Comments

[yoshinavi]

2つめの質問で、「ページの登録」と書かれているところが、リンク先を見ても見当たりませんが、どこなのでしょうか？
-追記-スミマセンありました。私が見落としていました。

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

[facebook]

解決したかと思ったのですが、解決してなかったので追記させてもらっています。

Answer 1

CSSのcontentを使えるのは、::afterと::beforeに限られていて、普通の要素の表示をcontentで書き換えることはできません（MDN）。

要素を消したい場合は、display:noneがいちばん手軽です。

Comments

[facebook]

回答ありがとうございます。
それも間違えていたんですねw

そこだけでなく、#field-visibility-settings-toggle-10やa.bp-login-widget-register-linkが間違えているようなので、id、classなど何を指定すればいいのかと質問しました。解りにくい質問をしてしまいすみません。

[facebook]

と、返答したのですが、
間違っていると思っていた#field-visibility-settings-toggle-10は正しかったようで、
教えてもらったdisplay:none;で変更できました。ありがとうございます。

が、http://twotic.online/loginの登録の書き換えだけは成功しません。
a.bp-login-widget-register-linkではなく、何を指定すればいいのでしょうか？

Answer 2

この場合に限りになってしまいますが:beforeで「登録」の前に「新規アカウント」を引っ付けるのはどうでしょうか？

span.bp-login-widget-register-link>a:before {
    content: '新規アカウント';
}

---

【追記について】
スペースを維持して文字を消したいということですが、見た目だけでしたら対応できるかと思われます。

.field-visibility-settings-notoggle {
    opacity: 0;
    height: 0;
}

Comments

[facebook]

ありがとうございます。無事解決しました。

Answer 3

2つ目の質問についてです。

変更前

<a href="http://twotic.online/registration/">登録</a>

変更後

<a href="http://twotic.online/registration/">新規アカウント登録</a>

で良いのではないでしょうか？

Comments

[facebook]

回答ありがとうございます。
しかし、custom CSSを利用したかったので、e_le_mさんの回答を利用させてもらいました。

[yoshinavi]

解決済になって無いのは行間の問題があるからでしょうか？マージンの調整ではダメなのでしょうか？

[facebook]

はい、解決済になっていないのは行間の問題です。WordPressのcustom CSSというのを利用してテーマをいじっているのでCSSで処理できるのであれば何でもokです。マージンの調整はCSSで出来るのでしょうか？よければ教えてもらえないでしょうか？

[yoshinavi]

マージンに限らず、表示するテキストや画像等に対しての装飾（色を変えたり、大きさを変えたり等、この場合は行間の幅）はCSSで行います。

たとえば、CSSの「fieldset」「margin:」の下側等を調整する事で対応できないでしょうか？