サポート » 使い方全般 » 追加CSSにタグを貼るも見出しが灰色になる

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

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

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは

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

    #contentInner h2 {
    	background-color:pink;
    }
    #contentInner h2:before {
    	left: 0;
    }
    #contentInner h2 span {
    	margin-left:2em;
    }
    スレッド開始 manjyusyage

    (@manjyusyage)

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

    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ヶ月、 1週前にmanjyusyageが編集しました。
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • このトピックに返信するにはログインが必要です。