Simplicityの特徴 › フォーラム › Simplicityについての質問 › 見出しのデザインが反映されません
- このトピックには29件の返信、2人の参加者があり、最後にカナリアにより6年、 11ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年6月27日 11:05 PM #43005ノスゲスト
こんにちは、ノスといいます。
Simplicity2バージョン2.2.0、小テーマはバージョン20151225です。
小テーマのスタイルシートにCSSを書いて、見出しにする文字を「<h2><b>見出し文字</b></h2>」
の様に指定しているのですが反映されません。下の画像のarticle h2の部分が見出しのCSSです。
https://gyazo.com/01a735006f2411c47e47c805a4e91cb9さらに、下の画像のように指定したデザインとは違うデザインになってしまいます。
https://gyazo.com/a3b0a80a0de489220dddd037f114ab81html/cssに関しては、ほぼ初心者です。どうすれば、CSSに書き込んだ通りに見出しのデザインを反映出来ますか?
- このトピックは7年、 9ヶ月前にわいひらが編集しました。理由: 画像が表示されていなかったので修正
-
2016年6月28日 1:07 AM #43012Hidekichiゲスト
> 小テーマのスタイルシートにCSSを書いて、
> 見出しにする文字を「<h2><b>見出し文字</b></h2>」
> の様に指定しているのですが反映されません。cssにどのように書かれたかを書いてみてください。また子テーマが有効になっているかを再確認しておいて下さい。
投稿される際、
h2 { //何かしらのプロパティ }
このような表示にするには、まずcssを投稿のテキストエリアにコピペした後、そのコピペ部分をマウスで範囲選択してからcodeボタンを押すことでこのように書かれたものがハイライト表示されます。
そのまま投稿すると、クォートなどが全角に変換されてしまうので、何が間違いなのかがわかりにくくなるため、必ずソースはハイライト表示して下さい。
画像については、「初めての方は必ずお読み下さい」にも説明がありますが、アップローダーや、スクリーンショット等を置けるwebサービス等のアドレスがあるので、そこにアップロードして、そのリンクを書いて、更にlinkボタンでアドレスを入れて下さい。
これらはwordpressの編集時のボタンの使い方と同じです。
-
2016年6月28日 3:26 PM #43030わいひらキーマスター
できれば、変更部分のソースはテキストでそのままコピペして投稿時に貼り付けてください。
テキスト形式の方が不具合箇所がわかりやすいので。もっと手っ取り早いのは、そのCSSが反映されないページのURLを掲載していただけると、こちらからもソースの状態を見ることができるので原因がわかるかと思います。
-
2017年4月15日 9:41 AM #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);
} -
2017年4月15日 10:53 AM #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); }
に変更してください。
:
が抜けているところがありました -
2017年4月15日 11:00 AM #51860みきゲスト
おいてはいけませんが
文法が…とかはおいといて
Chrome、Firefoxでは問題なかったです。どのような端末、ブラウザで確認されていますか?
見ていけば分かると思うので念のためです。
あと、バックアップがあるならバックアップから復旧したほうが早いです。
-
2017年4月15日 11:18 AM #51861カナリアゲスト
ありがとうございます。
とりあえずいただいたものをコピペしてみましたが直りません。
Macbook AirでChromeから見ています。safariで開いてもダメでした。
バックアップは取れてないと思います。。 -
2017年4月15日 11:39 AM #51862みきゲスト
もちろん
.article h2
は合っていますよね?僕のサイトと寝ログでも試してみましたが動作しました
Chromeで具体的な解決法ではないですが
一つ一つ//
でコメントしてみてはいかがでしょうか?Stylishと言う拡張で確認しているのでそれが問題なのかもしれませんが…
-
2017年4月15日 12:04 PM #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);
} -
2017年4月15日 12:45 PM #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); }
を一つずつ行えば特定できるはずです。
↑複数での相性みたいなのだと特定できないかもしれませんが… -
2017年4月19日 9:02 AM #51930カナリアゲスト
うーん、表示されないです。
プラグインとかが悪さしているんでしょうか。 -
2017年4月19日 5:18 PM #51934みきゲスト
プラグインとかが悪さしているんでしょうか。
可能性はあります。
(寝ログ等では動作しているので)
一度すべてとめてみてください
↑とめた後はキャッシュ削除をお忘れなく -
2017年4月19日 5:52 PM #51937わいひらキーマスター
>カナリアさん
もしプラグインが停止しても動作しない場合は、不具合が出ているページのURLを掲載していただくことは可能でしょうか?
CSSが原因なら、ソースコードを見れば、原因がわかるかと思います。 -
2017年4月21日 3:45 PM #51993カナリアゲスト
>みきさま
ありがとうございます。
プラグイン1つ1つ停止してみてみましたが変わらず。
全部停止してキャッシュも消して再度見てみましたが変わりませんでした。。>わいひらさま
こちらのサイトです。
http://happy-health30.comまた、固定ページを作ったのですが、
こちら、本文中におなじページのリンクが生まれる現象が発生しています。
http://happy-health30.com/privacy-policy/
自分で本文を作成する画面には出てこないのですが、消す方法がわからず・・・。
解決方法をご存知でしたら、あわせてご教示いただけますと幸いです。 -
2017年4月21日 4:00 PM #51994みきゲスト
こちら、本文中におなじページのリンクが生まれる現象が発生しています。
ソースを見たところウィジェットのclassが入っていたのでウィジェットを確認してみてください
(管理画面>外観>ウィジェット)
位置的に[固定ページ本文上]を確認してみてください
おそらく何かしらのウィジェットが入っているかと… -
2017年4月21日 4:13 PM #51995みきゲスト
Stylishで見てみましたが動作に問題はなさそうですね…
style.cssを見てきました
!important
をつけているのは反映されないからですか?あと、ところどころいらない記述があります
(文法エラー)すべてコピペして確認すると適用されなくなりました
あとで文法エラーを書き出します
-
2017年4月21日 4:17 PM #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項目を削除すれば反映されるようになります
-
2017年4月21日 4:28 PM #51997Akiraゲスト
<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; /* 内側の余白 */ }
-
2017年4月21日 4:39 PM #51999Akiraゲスト
おぅ… ごめんなさい かぶってしまった
-
2017年4月21日 11:35 PM #52004カナリアゲスト
みきさん
Akiraさん直りましたーーーーーーーーー!!!!!!
ありがとうございます!!!!!!!!!
CSSが読めるって素晴らしいです。あの、重ねての質問で大変恐縮ですが、
このh2の縦幅を広くしたいのですが、
widthがあればそれを変えればと思ったのですが、
ないのでどの部分を触ったらいいでしょうか・・・。 -
2017年4月22日 12:50 AM #52005カナリアゲスト
あと、グローバルナビをアニメーション化したく
http://photoshopvip.net/84144の07. 上下にラインをフェードイン
するようにしたいのですが、こちらのCSSのコピペではうまくいきません。今のCSSの何を消して、上記のCSSの何をさわればいいのかご教示いただけませんか。
-
2017年4月22日 2:25 AM #52009みきゲスト
直りましたーーーーーーーーー!!!!!!
ありがとうございます!!!!!!!!!解決できてよかったです。
あと、プライバシーポリシーのほうも解決できたようでよかったです。
(場所とかあっていましたか?)このh2の縦幅を広くしたいのですが、
widthがあればそれを変えればと思ったのですが、
ないのでどの部分を触ったらいいでしょうか・・・。どのようにしたいかがいまいちつかめませんが
font-size
を大きくすれば縦幅も変わります。余白を変更したければ
padding
で変更できますし…ちなみに高さを変更するのは
height
ですが
ただheightを追加するだけだと左寄せ中央にならないのでおすすめしません今の感じだと…
font-size: 21px;
を変更
font-size: 30px;
padding: 5px 10px;
を
padding: 6px 10px;
ぐらいだと見やすいかもしれません
-
2017年4月22日 2:56 AM #52010みきゲスト
aタグがおかしいので念のため
http://photoshopvip.net/84144こちらのCSSのコピペではうまくいきません。
class等が違うのでもちろん動きません。
※コピペでは動かないことが殆どです。(と言うか動いたら奇跡ぐらいでも良い)あと、メニューはカスタマイズを行われているようですし
Simplicityの方でスタイルされているので動作するように変更しても若干崩れます。
※僕のサイトで確認
※メニュー系のカスタマイズを消すようにした状態で簡単にだけ…
.snip1211
を.menu
に変更すればある程度は動作します。
※.current
の部分はどんな感じにするのかが分からないので省きます。ちなみにbodyのところはいらないので追記しないようにご注意ください
-
2017年4月22日 4:10 PM #52018カナリアゲスト
みきさん
度々ありがとうございます!
>あと、プライバシーポリシーのほうも解決できたようでよかったです。
(場所とかあっていましたか?)こちら返しておらずすみません!無事解決しました!!場所もバッチリあってました、さすがです☆
このh2の縦幅の件、
>今の感じだと…font-size: 21px;を変更
font-size: 30px;padding: 5px 10px;を
padding: 6px 10px;ぐらいだと見やすいかもしれません
変えてみました。font-size24pxだと文字がデザインの中にパンパンに収まっている感じがイヤだったんで
文字とデザインの間にもう少し余白を取りたかったんです。>class等が違うのでもちろん動きません。
※コピペでは動かないことが殆どです。(と言うか動いたら奇跡ぐらいでも良い)そうなんですね・・・。全く同じとは言わなくてもアニメーションをつけたかったんですけど、
>あと、メニューはカスタマイズを行われているようですし
Simplicityの方でスタイルされているので動作するように変更しても若干崩れます。テーマの編集に入っているグローバルナビの情報を消してからでもダメでしょうか。
ちょっと自分でもトライしてみます -
2017年4月22日 7:18 PM #52025みきゲスト
フォントサイズ、余白とかは問題ない感じですか?
(もうすこしこうしたいとかあれば…) -
2017年4月23日 8:02 PM #52089カナリアゲスト
みきさん
ありがとうございます。おかげさまで見出しについては満足しています。
今はグローバルナビを
・英語の日本語表記を2行表記にする
・アニメーション化する(結局まだできていない・・・)
の2つですので。 -
2017年4月24日 12:43 PM #52103Akiraゲスト
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つで上下のラインの太さとスタイル、色を変更可能です。
-
2017年4月28日 1:27 AM #52216カナリアゲスト
Akiraさん
ありがとうございます。
コピペで試してみましたがうまくいきません。。。
また、他のCSSの内容が邪魔しているんでしょうか。
グローバルなびについては幅調整などの情報も入れているのですが。 -
2017年4月28日 11:28 AM #52218Akiraゲスト
サイトを拝見すると、グローバルナビはしっかり「上下にラインをフェードイン」のアニメーションが動作しています。
ご確認できないはブラウザのキャッシュが原因だと思うので、ご使用中のブラウザのキャッシュを削除後に再度サイトをご確認ください。サイトの雰囲気がガラリと変わりましたね。
色使いがすごく好きです。 -
2017年4月28日 9:36 PM #52220カナリアゲスト
Akiraさん
本当だ!キャッシュ消したら 反映されました!
サイトの色使いも褒めていただき恐縮です!
グローバルナビの線の色も合わせて変えました!
ありがとうございます!
-
-
投稿者投稿
- トピック「見出しのデザインが反映されません」には新しい返信をつけることはできません。