見出しのデザインが反映されません

Simplicityの特徴 フォーラム Simplicityについての質問 見出しのデザインが反映されません

  • このトピックには29件の返信、2人の参加者があり、最後にカナリアにより6年、 11ヶ月前に更新されました。
29件の返信スレッドを表示中
  • 投稿者
    投稿
    • #43005
      ノス
      ゲスト

      こんにちは、ノスといいます。

      Simplicity2バージョン2.2.0、小テーマはバージョン20151225です。

      小テーマのスタイルシートにCSSを書いて、見出しにする文字を「<h2><b>見出し文字</b></h2>」
      の様に指定しているのですが反映されません。

      下の画像のarticle h2の部分が見出しのCSSです。
      https://gyazo.com/01a735006f2411c47e47c805a4e91cb9

      さらに、下の画像のように指定したデザインとは違うデザインになってしまいます。
      https://gyazo.com/a3b0a80a0de489220dddd037f114ab81

      html/cssに関しては、ほぼ初心者です。どうすれば、CSSに書き込んだ通りに見出しのデザインを反映出来ますか?

      • このトピックは7年、 9ヶ月前にアバター画像わいひらが編集しました。理由: 画像が表示されていなかったので修正
    • #43012
      Hidekichi
      ゲスト

      > 小テーマのスタイルシートにCSSを書いて、
      > 見出しにする文字を「<h2><b>見出し文字</b></h2>」
      > の様に指定しているのですが反映されません。

      cssにどのように書かれたかを書いてみてください。また子テーマが有効になっているかを再確認しておいて下さい。

      投稿される際、

      h2 {
        //何かしらのプロパティ
      }

      このような表示にするには、まずcssを投稿のテキストエリアにコピペした後、そのコピペ部分をマウスで範囲選択してからcodeボタンを押すことでこのように書かれたものがハイライト表示されます。

      そのまま投稿すると、クォートなどが全角に変換されてしまうので、何が間違いなのかがわかりにくくなるため、必ずソースはハイライト表示して下さい。

      画像については、「初めての方は必ずお読み下さい」にも説明がありますが、アップローダーや、スクリーンショット等を置けるwebサービス等のアドレスがあるので、そこにアップロードして、そのリンクを書いて、更にlinkボタンでアドレスを入れて下さい。

      これらはwordpressの編集時のボタンの使い方と同じです。

    • #43030
      アバター画像わいひら
      キーマスター

      できれば、変更部分のソースはテキストでそのままコピペして投稿時に貼り付けてください。
      テキスト形式の方が不具合箇所がわかりやすいので。

      もっと手っ取り早いのは、そのCSSが反映されないページのURLを掲載していただけると、こちらからもソースの状態を見ることができるので原因がわかるかと思います。

    • #51857
      カナリア
      ゲスト

      こんにちは。カナリアと申します。

      小テーマのスタイルシートにCSSを書いて、見出しを変更したりデザインを変更していました。
      最初は特に問題なかったのですが、色々と追記して変更しているうちに、
      見出し2だけが表示されなくなってしまいました。

      このサイトを見てキャッシュの削除などもしてみましたが、変わりません。
      どのようにしたら見出しが表示されるようになるのでしょうか。

      下にバージョンとCSSの問題となっている部分を付記しました。

      ご教示のほどよろしくお願いいたします。

      WordPress 4.7.3 (Simplicity2 child テーマ)
      Simplicity2 childバージョン: 20161002

      /*———————————
      見出し
      ——————————–*/
      .article h2 {
      padding: 5px 10px;
      background: #DD9B9D;
      color: #fff;
      text-decoration: none;
      font-size: 21px;
      font-weight: bold;
      border-radius: 3px;
      -moz-border-radius 3px;
      -webkit-border-radius: 3px;
      text-shadow: -1px -1px #DD9B9D;
      border: 1px dashed #fff;
      -moz-box-shadow: 0 0 0 4px #DD9B9D, 1px 1px 4px 3px rgba(10,10,0,.5);
      -webkit-box-shadow: 0 0 0 4px #DD9B9D, 1px 1px 4px 3px rgba(10,10,0,.5);
      box-shadow: 0 0 0 4px #DD9B9D, 1px 1px 6px 3px rgba(10,10,0,.5);
      }

    • #51858
      みき
      ゲスト

      とりあえず

      .article h2 {
      padding: 5px 10px;
      background: #DD9B9D;
      color: #fff;
      text-decoration: none;
      font-size: 21px;
      font-weight: bold;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      text-shadow: -1px -1px #DD9B9D;
      border: 1px dashed #fff;
      -moz-box-shadow: 0 0 0 4px #DD9B9D, 1px 1px 4px 3px rgba(10,10,0,.5);
      -webkit-box-shadow: 0 0 0 4px #DD9B9D, 1px 1px 4px 3px rgba(10,10,0,.5);
      box-shadow: 0 0 0 4px #DD9B9D, 1px 1px 6px 3px rgba(10,10,0,.5);
      }

      に変更してください。
      :が抜けているところがありました

    • #51860
      みき
      ゲスト

      おいてはいけませんが
      文法が…とかはおいといて
      Chrome、Firefoxでは問題なかったです。

      どのような端末、ブラウザで確認されていますか?

      見ていけば分かると思うので念のためです。

      あと、バックアップがあるならバックアップから復旧したほうが早いです。

    • #51861
      カナリア
      ゲスト

      ありがとうございます。
      とりあえずいただいたものをコピペしてみましたが直りません。
      Macbook AirでChromeから見ています。safariで開いてもダメでした。
      バックアップは取れてないと思います。。

    • #51862
      みき
      ゲスト

      もちろん.article h2は合っていますよね?

      僕のサイトと寝ログでも試してみましたが動作しました
      Chromeで

      具体的な解決法ではないですが
      一つ一つ//でコメントしてみてはいかがでしょうか?

      Stylishと言う拡張で確認しているのでそれが問題なのかもしれませんが…

    • #51863
      カナリア
      ゲスト

      artcile h2です。下記、現状のコピペです。
      やはりダメでした。
      一つ一つ//でコメントというのはどこに//を入れたら良いのでしょうか。
      いつもコピペでやっているのでわからず。。すみません、ご教示いただけますと幸いです。

      .article h2 {
      padding: 5px 10px;
      background: #DD9B9D;
      color: #fff;
      text-decoration: none;
      font-size: 21px;
      font-weight: bold;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      text-shadow: -1px -1px #DD9B9D;
      border: 1px dashed #fff;
      -moz-box-shadow: 0 0 0 4px #DD9B9D, 1px 1px 4px 3px rgba(10,10,0,.5);
      -webkit-box-shadow: 0 0 0 4px #DD9B9D, 1px 1px 4px 3px rgba(10,10,0,.5);
      box-shadow: 0 0 0 4px #DD9B9D, 1px 1px 6px 3px rgba(10,10,0,.5);
      }

    • #51864
      みき
      ゲスト
      .article h2 {
      //padding: 5px 10px;
      //background: #DD9B9D;
      //color: #fff;
      //text-decoration: none;
      //font-size: 21px;
      //font-weight: bold;
      //border-radius: 3px;
      //-moz-border-radius: 3px;
      //-webkit-border-radius: 3px;
      //text-shadow: -1px -1px #DD9B9D;
      //border: 1px dashed #fff;
      //-moz-box-shadow: 0 0 0 4px #DD9B9D, 1px 1px 4px 3px rgba(10,10,0,.5);
      //-webkit-box-shadow: 0 0 0 4px #DD9B9D, 1px 1px 4px 3px rgba(10,10,0,.5);
      //box-shadow: 0 0 0 4px #DD9B9D, 1px 1px 6px 3px rgba(10,10,0,.5);
      }

      を一つずつ行えば特定できるはずです。
      ↑複数での相性みたいなのだと特定できないかもしれませんが…

    • #51930
      カナリア
      ゲスト

      うーん、表示されないです。
      プラグインとかが悪さしているんでしょうか。

    • #51934
      みき
      ゲスト

      プラグインとかが悪さしているんでしょうか。

      可能性はあります。
      (寝ログ等では動作しているので)
      一度すべてとめてみてください
      ↑とめた後はキャッシュ削除をお忘れなく

    • #51937
      アバター画像わいひら
      キーマスター

      >カナリアさん
      もしプラグインが停止しても動作しない場合は、不具合が出ているページのURLを掲載していただくことは可能でしょうか?
      CSSが原因なら、ソースコードを見れば、原因がわかるかと思います。

    • #51993
      カナリア
      ゲスト

      >みきさま
      ありがとうございます。
      プラグイン1つ1つ停止してみてみましたが変わらず。
      全部停止してキャッシュも消して再度見てみましたが変わりませんでした。。

      >わいひらさま
      こちらのサイトです。
      http://happy-health30.com

      また、固定ページを作ったのですが、
      こちら、本文中におなじページのリンクが生まれる現象が発生しています。
      http://happy-health30.com/privacy-policy/
      自分で本文を作成する画面には出てこないのですが、消す方法がわからず・・・。
      解決方法をご存知でしたら、あわせてご教示いただけますと幸いです。

    • #51994
      みき
      ゲスト

      こちら、本文中におなじページのリンクが生まれる現象が発生しています。

      ソースを見たところウィジェットのclassが入っていたのでウィジェットを確認してみてください
      (管理画面>外観>ウィジェット)
      位置的に[固定ページ本文上]を確認してみてください
      おそらく何かしらのウィジェットが入っているかと…

    • #51995
      みき
      ゲスト

      Stylishで見てみましたが動作に問題はなさそうですね…

      style.cssを見てきました
      !importantをつけているのは反映されないからですか?

      あと、ところどころいらない記述があります
      (文法エラー)

      すべてコピペして確認すると適用されなくなりました

      あとで文法エラーを書き出します

    • #51996
      みき
      ゲスト
      .article {
      	width:90%;
      	margin: 0 auto;
      }
      
      }

      最後の}はいりません

      <span style="letter-spacing:2px;">文字と文字の間隔を2ピクセルにします</span>

      /* ---------- 目次の横幅 ---------- */
      div#toc_container {
          min-width: 30%;	/* 横幅の最低値 */
      }
      div#toc_container {
          padding: 1em 1.5em 1.5em 1.75em;	/* 内側の余白 */ 
      }
      CSS

      のCSSって大丈夫なんですかね?
      ここは分かりませんでした

      上記2項目を削除すれば反映されるようになります

    • #51997
      Akira
      ゲスト

      <span style="letter-spacing:2px;">文字と文字の間隔を2ピクセルにします</span>

      style.cssの上記記述を削除されてください。これでご希望の表示になります。

      また、.article h2の各プロパティに記述されている !important も不要なため全て削除を。

      その他、border-radiusとbox-shadowは既にベンダープレフィックスは必要ないため、下記の記述も削除。

      -moz-border-radius: 3px !important;
      -webkit-border-radius: 3px !important;
      -moz-box-shadow: 0 0 0 4px #DD9B9D, 1px 1px 4px 3px rgba(10,10,0,.5) !important;
      -webkit-box-shadow: 0 0 0 4px #DD9B9D, 1px 1px 4px 3px rgba(10,10,0,.5) !important;

      106行目の「CSS」との記述も削除されてください。106行目は以下の記述の下です。

      /* ---------- 目次の横幅 ---------- */
      div#toc_container {
          min-width: 30%;	/* 横幅の最低値 */
      }
      div#toc_container {
          padding: 1em 1.5em 1.5em 1.75em;	/* 内側の余白 */ 
      }
    • #51999
      Akira
      ゲスト

      おぅ… ごめんなさい かぶってしまった

    • #52004
      カナリア
      ゲスト

      みきさん
      Akiraさん

      直りましたーーーーーーーーー!!!!!!
      ありがとうございます!!!!!!!!!
      CSSが読めるって素晴らしいです。

      あの、重ねての質問で大変恐縮ですが、
      このh2の縦幅を広くしたいのですが、
      widthがあればそれを変えればと思ったのですが、
      ないのでどの部分を触ったらいいでしょうか・・・。

    • #52005
      カナリア
      ゲスト

      あと、グローバルナビをアニメーション化したく

      http://photoshopvip.net/84144の07. 上下にラインをフェードイン
      するようにしたいのですが、こちらのCSSのコピペではうまくいきません。

      今のCSSの何を消して、上記のCSSの何をさわればいいのかご教示いただけませんか。

    • #52009
      みき
      ゲスト

      直りましたーーーーーーーーー!!!!!!
      ありがとうございます!!!!!!!!!

      解決できてよかったです。

      あと、プライバシーポリシーのほうも解決できたようでよかったです。
      (場所とかあっていましたか?)

      このh2の縦幅を広くしたいのですが、
      widthがあればそれを変えればと思ったのですが、
      ないのでどの部分を触ったらいいでしょうか・・・。

      どのようにしたいかがいまいちつかめませんが
      font-sizeを大きくすれば縦幅も変わります。

      余白を変更したければpaddingで変更できますし…

      ちなみに高さを変更するのはheightですが
      ただheightを追加するだけだと左寄せ中央にならないのでおすすめしません

      今の感じだと…

      font-size: 21px;を変更
      font-size: 30px;

      padding: 5px 10px;
      padding: 6px 10px;

      ぐらいだと見やすいかもしれません

    • #52010
      みき
      ゲスト

      aタグがおかしいので念のため
      http://photoshopvip.net/84144

      こちらのCSSのコピペではうまくいきません。

      class等が違うのでもちろん動きません。
      ※コピペでは動かないことが殆どです。(と言うか動いたら奇跡ぐらいでも良い)

      あと、メニューはカスタマイズを行われているようですし
      Simplicityの方でスタイルされているので動作するように変更しても若干崩れます。
      ※僕のサイトで確認
      ※メニュー系のカスタマイズを消すようにした状態で

      簡単にだけ…
      .snip1211.menuに変更すればある程度は動作します。
      .currentの部分はどんな感じにするのかが分からないので省きます。

      ちなみにbodyのところはいらないので追記しないようにご注意ください

    • #52018
      カナリア
      ゲスト

      みきさん

      度々ありがとうございます!

      >あと、プライバシーポリシーのほうも解決できたようでよかったです。
      (場所とかあっていましたか?)

      こちら返しておらずすみません!無事解決しました!!場所もバッチリあってました、さすがです☆

      このh2の縦幅の件、
      >今の感じだと…

      font-size: 21px;を変更
      font-size: 30px;

      padding: 5px 10px;を
      padding: 6px 10px;

      ぐらいだと見やすいかもしれません

      変えてみました。font-size24pxだと文字がデザインの中にパンパンに収まっている感じがイヤだったんで
      文字とデザインの間にもう少し余白を取りたかったんです。

      >class等が違うのでもちろん動きません。
      ※コピペでは動かないことが殆どです。(と言うか動いたら奇跡ぐらいでも良い)

      そうなんですね・・・。全く同じとは言わなくてもアニメーションをつけたかったんですけど、

      >あと、メニューはカスタマイズを行われているようですし
      Simplicityの方でスタイルされているので動作するように変更しても若干崩れます。

      テーマの編集に入っているグローバルナビの情報を消してからでもダメでしょうか。
      ちょっと自分でもトライしてみます

    • #52025
      みき
      ゲスト

      フォントサイズ、余白とかは問題ない感じですか?
      (もうすこしこうしたいとかあれば…)

    • #52089
      カナリア
      ゲスト

      みきさん

      ありがとうございます。おかげさまで見出しについては満足しています。
      今はグローバルナビを
      ・英語の日本語表記を2行表記にする
      ・アニメーション化する(結局まだできていない・・・)
      の2つですので。

    • #52103
      Akira
      ゲスト

      PHOTOSHOPVIPの「上下にラインをフェードイン」のようにグローバルナビをアニメーション化するには、下記をstyle.cssに記述します。

      #navi ul li a:before {
        position: absolute;
        content: '';
        -webkit-transition: all 0.35s ease;
        transition: all 0.35s ease;
        opacity: 0;
        top: 25%;
        bottom: 25%;
        left: 0;
        right: 0;
        border-top: 3px solid #34495e;
        border-bottom: 3px solid #34495e;
      }
      
      #navi ul li a:hover:before {
        opacity: 1;
        top: 0;
        bottom: 0;
      }

      さらにカスタマイズするには…

       -webkit-transition: all 0.35s ease;
        transition: all 0.35s ease;

      この0.35s(0.35秒)でアニメーションの変化にかかる時間を指定しています。
      0.2sとすれば0.2秒で、1sとすれば1秒をかけ変化します。

      top: 25%;
       bottom: 25%;

      この2つは上下のラインのアニメーション開始位置を指定しています。

      border-top: 3px solid #34495e;
       border-bottom: 3px solid #34495e;

      この2つで上下のラインの太さとスタイル、色を変更可能です。

    • #52216
      カナリア
      ゲスト

      Akiraさん
      ありがとうございます。
      コピペで試してみましたがうまくいきません。。。
      また、他のCSSの内容が邪魔しているんでしょうか。
      グローバルなびについては幅調整などの情報も入れているのですが。

    • #52218
      Akira
      ゲスト

      サイトを拝見すると、グローバルナビはしっかり「上下にラインをフェードイン」のアニメーションが動作しています。
      ご確認できないはブラウザのキャッシュが原因だと思うので、ご使用中のブラウザのキャッシュを削除後に再度サイトをご確認ください。

      サイトの雰囲気がガラリと変わりましたね。
      色使いがすごく好きです。

    • #52220
      カナリア
      ゲスト

      Akiraさん
      本当だ!キャッシュ消したら 反映されました!
      サイトの色使いも褒めていただき恐縮です!
      グローバルナビの線の色も合わせて変えました!
      ありがとうございます!

29件の返信スレッドを表示中
  • トピック「見出しのデザインが反映されません」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)