追加CSSにタグを貼るも見出しが灰色になる

  • manjyusyage

    (@manjyusyage)


    3年、 5ヶ月前

    こんにちは。
    カスタマイズで見出しのデザインを変更しようと、追加CSSにタグを貼り付けました。
    リンク先の様にh2の見出しの色が灰色で、またお花の位置も文字にかぶってしまい、正しく表示されません。
    どうすれば正しく表示されますでしょうか？
    宜しくお願い致します。

    ヘルプの必要なページ: [リンクを見るにはログイン]

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • munyagu

    (@munyagu)

    3年、 5ヶ月前

    こんにちは

    追加CSSにどう記述されたのか分からないですし、何が正しいのかもよく分からないですが、こんな感じでしょうか。

    #contentInner h2 {
	background-color:pink;
}
#contentInner h2:before {
	left: 0;
}
#contentInner h2 span {
	margin-left:2em;
}
    トピック投稿者 manjyusyage

    (@manjyusyage)

    3年、 5ヶ月前

    ありがとうございます！
    すみません、初めての質問で質問の仕方がわからない中、ご丁寧にありがとうございます！

    h2 {
	background-color: #f5d5da; /* 背景色 */
	border-radius: 5px;
	color: #ef858c; /* 文字色 */
	padding: 10px 10px 10px 60px; /* 上・右・下・左の余白 */
	position: relative;
	text-shadow: 0px 0px 10px #fff, 0px 0px 6px #fff, 0px 0px 4px #fff, 0 0 0.5px #fff; /* 文字の影 */
}
h2:before {
	content: '＊*'; /*花に見せかけるためのアスタリスク*/
	color: #fff; /* アスタリスクの色 */
	display: inline-block;
	font-size: 30px; /* アスタリスクの大きさ */
	font-weight: bold;
	margin-right: 10px;
	position: absolute;
	top: 0px;
	left: 0px;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	text-shadow: 0px 0px 3px #fff, 0px 0px 2px #fff, 0 0 0.5px #fff; /* アスタリスク周りの影 */
}
h2:after {
	border-bottom: 2px dotted #fff; /* 下線 */
	content: '';
	position: absolute;
	bottom: 3px;
	left: 3px;
	right: 3px;
}

    https://0edition.net/archives/1448
    こちらのサイトで公開されている、上記のタグをCSSに追加したところ、灰色になり、お花の位置も文字にかぶってしまい大変困っていました。

    ご教示頂きましたCSSをコピペしたところ、いい感じに仕上がりました！
    ありがとうございました！！

    • この返信は3年、 5ヶ月前にmanjyusyageが編集しました。
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「追加CSSにタグを貼るも見出しが灰色になる」には新たに返信することはできません。

タグ