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

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

このトピックには25件の返信が含まれ、2人の参加者がいます。6 時間、 42 分前 カナリア さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #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に書き込んだ通りに見出しのデザインを反映出来ますか?

    • このトピックは9 ヶ月、 4 週間前に わいひら わいひら さんが編集しました。理由: 画像が表示されていなかったので修正
  • #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つですので。

返信先: 見出しのデザインが反映されません
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)