見出しが崩れた

見出しのスタイル変更

見出しのスタイルを変更したが、表示がおかしくなった。

webpage1

見出し3で表示している部分が変り、サイトのキャッチフレーズまで同じ表示になってしまった。

原因は、親テーマのスタイルシートと子テーマのスタイルシートの両方に変更を加えたため起こった模様

親テーマのcssの変更部分を戻した結果

top2

このような表示の戻せました。

記事を開くと見出しが変更されていることが分かります。
見出しの字も白抜きなり元々の見た目になりました。

見出し変更

重要な変更を加える場合は、変更前のバックアップを忘れずに。

おかしくなってもすぐに戻せますから。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. radio より:

    http://blog.zius.jp/wordpress/124/
    上記のサイトの質問欄から飛んで来ました。
    他サイトでのことなのですが、自己解決できないため、申し訳ないのですが質問させてください。

    「白抜きグラデーションだけで表現するシャープなタイトルデザイン」に関して、IEで表示されないというサイト主様と同様の症状で困っています。
    元サイトでも質問したのですが、返答が得られず途方にくれています。

    サイト主様は、自己解決なされたようですが、ご面倒とは思いますが、ヒント等いただけたらと思います。
    お忙しいかとは思いますが、よろしくお願いします。

    • はなな より:

      コメントありがとうございます。

      スタイルシートのCSSのh2に下記のものを貼り付けて
      試してみてはいかがでしょうか。
      お役に立てるかどうかわかりませんが・・・・
      返信が遅くなり申し訳ありません。

      .article h2 {
      font-size: 18px !important;
      color: #ffffff !important;
      margin: 5px 0px !important;
      padding: 5px 20px !important;
      font-weight: bold !important;
        background:cornflowerblue;
      background: -moz-linear-gradient(top,#0099CC 0%,#006699) !important;
      background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)) !important;
        background:-ms-linear-gradient(top, #0099CC 0%,#006699); /* IE */
      border: 1px solid #dddddd !important;
      border-radius: 7px !important;
      -moz-border-radius: 7px !important;
      -webkit-border-radius: 7px !important;
      -ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#000088′, endColorstr=’#ccccff’)”;
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#000088′, endColorstr=’#ccccff’); /* IE5.5+ */

      /* IE10 Consumer Preview */
      background-image: -ms-linear-gradient(top, #0099CC 0%, #006699 100%) !important;
      /* Mozilla Firefox */
      background-image: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%) !important;
      /* Opera */
      background-image: -o-linear-gradient(top, #ffffff 0%, #cccccc 100%) !important;
      /* Webkit (Safari/Chrome 10) */
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #cccccc)) !important;
      /* Webkit (Chrome 11+) */
      background-image: -webkit-linear-gradient(top, #ffffff 0%, #cccccc 100%) !important;
      /* W3C Markup, IE10 Release Preview */
      background-image: linear-gradient(to bottom, #0099CC 0%, #006699 100%) !important;