見出しが反映されません。

PR 2017/4/25

このトピックには6件の返信、1人の参加者があり、最後にひろめにより9年、 4ヶ月前に更新されました。

6件の返信スレッドを表示中

投稿者

投稿
- 2017年4月24日 12:05 AM #52091
  ひろめ
  ゲスト
  子テーマに記述した見出しがうまく反映されなくなってしまいました。
  
  ブラウザキャッシュを削除してもダメでした。
  
  レンタルサーバーは「さくらインターネット」を利用しているのですが、心当たりがあるとすれば、2種類あるうちのバックアップファイルのうち、SQLファイルのみエクスポートして復元作業を行ったことくらいです。
  
  復旧作業後に、サイドバーの見出しを子テーマに入れて変更したのは反映されたので、もしかしたら別の原因かもしれません。
  
  現状、すでに投稿済みの記事はきちんと反映されているものが多いのですが、新規作成の記事を書いて、プレビューで見出しを表示させると、うまく反映されなくなってしまいます。
  
  http://hiromethod.com/financial-result-of-ibm-for-the-first-quarter-in-2017
  
  <h4>決算概要</h4>　　⇒　これだと左側に表示されるハズの四角２つが表示されません。
  
  <h4><span id=”i”>決算概要</span></h4>　⇒　これだとすべて表示されます。
  
  子テーマに記述したのはこちらです。
  
  .article h4 {
  position: relative;
  margin: 0 0 0.1em;
  padding: 0.5em 0.5em 0.5em 1.7em;
  color: #000000; /* テキスト色 */
  font-size: 1.25em; /* フォントサイズ */
  font-weight: bold; /* フォント太さ */
  border-bottom: 5px solid #D7EEFF; /* 下線：太さ線の種類色 */
  }
  .article h4 :before {
  content: “”;
  position: absolute;
  background: #87cefa; /* 上の□の色 */
  top: 0;
  left: 0.4em;
  height: 12px;
  width: 12px;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  }
  .article h4 :after {
  content: “”;
  position: absolute;
  background:#a0d8ef; /* 下の□の色 */
  top: 1.0em;
  left: 0;
  height: 8px;
  width: 8px;
  transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  }
  
  また、見出し2でも上記と同じコードを入力しましたが、キャッシュを削除してもプレビューでは子テーマに記述した以前のデザインのままでした。
  
  いろいろ調べても原因が何かわからず、こちらのフォーラムに質問させていただきました。
  お手数をおかけして申し訳ありませんが、よろしくお願いいたします。
  - このトピックはわいひらが9年、 4ヶ月前に変更しました。
- 2017年4月24日 1:14 AM #52094
  Hidekichi
  ゲスト
  .article h4 :before
  
  このように、:before(:after)が要素と離れていると間違いです。
```
.article h4::before
.article h4:before
```
  こんな感じで要素にくっつけます。:beforeでも間違いではありませんが、擬似クラスと擬似要素は:もしくは::で区別します。
  
  擬似クラスは、要素:nth-of-type()とか、要素:last-childなどで、
  疑似要素は、要素::before、要素::afterです。
  
  cssにおける半角スペースは、例えば、.article h4 :beforeであれば、.articleの子要素のh4の子要素の:beforeということになり、子要素に:beforeは指定できないことからキャンセルされるというわけです。
- 2017年4月24日 1:19 AM #52095
  
  Hidekichi
  ゲスト
  
  ちなみに、次からcssなどのソースをフォーラムに貼り付ける際は、codeボタンを利用して下さい。
  ソースを範囲選択してcodeボタンを押すだけです。
  
  wordpressの性質上、そのままテキストとして貼り付けると特殊文字が変換されたり、スペースが取り除かれたりと、貼り付けられたソースが正しく書けているかどうかが判別できない場合があるからです。
  
  もしhtmlなどで閉じタグなどがなかったりした場合、フォーラム自体のレイアウトが崩れる場合もありますので注意して下さい。
- 2017年4月24日 2:14 AM #52097
  
  ひろめ
  ゲスト
  
  ＞Hidekichi様
  
  .article h4:before
  
  の部分を修正して更新したところ無事、<h4>決算概要</h4>で左2つの四角が表示されるようになりました。
  迅速な返信ありがとうございます。非常に助かりました。
  
  重ねての質問で申し訳ないのですが、見出し2(.article h2)も同じようにカスタマイズしたところ、子テーマに記述したデザインが表示されるのはいいのですが、左側に縦の線が1本入ってしまいます。
  
  この左側の縦の線を消すことはできないのでしょうか？
  
  また、見出し2(.article h2)は、これまでほとんど使ってこなかったのですが、もしおすすめのカスタマイズがありましたら教えていただけるとありがたいです。
- 2017年4月24日 2:41 AM #52098
  Hidekichi
  ゲスト
  > 左側に縦の線が1本入ってしまいます。
  > この左側の縦の線を消すことはできないのでしょうか？
  
  できますよ。
```
.article h2 {
  border: 0;
}
```
  で消えます。borderが全部消えるので、必要に応じてその部分だけを消すのもできますが、1からスタイルするなら、まずborder: 0;で初期化して、追加でスタイルします。
```
.article h2 {
  border: 0;
  border-left: 1px solid #111;
}
```
  こうすれば、左側のボーダーだけ有効になります。borderというプロパティは、
  
  border-top,
  border-bottom,
  border-left,
  border-right
  
  のショートハンド(ひとまとめに指定するもの)なので、border: 0で、四方のborderのborder-widthが0になります。
  何かしらを1からスタイルする時はこのようにして、まず初期化をしてから、あるいはものによっては値を0にしたりしてスタイルをリセットした状態からやるのが楽かと思います。
  
  そのプロパティの初期値がわからない場合は、プロパティ: initial;(モダンブラウザを対象に(IEを無視)するなら、プロパティ: unset)で初期化できますが、前述したようにプロパティの初期値が0であるとは限りません。
  例えばmarginなどは初期値が0ですが、widthはautoです。何かしらのアニメーションを付けたい時、0pxから100pxまで拡大したいとした場合は、width: initialより、width: 0と明示的に値を入れたほうが正しい表示になります。
  
  このように用途によって使い分ける必要があります。それぞれのプロパティの初期値などはMDNがわかりやすいです。(widthの説明ページ | MDN)
- 2017年4月24日 2:59 AM #52099
  Hidekichi
  ゲスト
  ちなみにborderは特殊です。
```
border: none;
border: 0;
```
  どちらもボーダーが非表示になりますが、border: noneは記憶が確かならborder-styleがnoneであって、border: 0はborder-widthが0です。
  
  サンプル: ボーダーあれこれ | jsFiddle
- 2017年4月25日 12:04 AM #52126
  
  ひろめ
  ゲスト
  
  ＞Hidekichi様
  
  詳細かつ丁寧なご説明ありがとうございます。
  
  border: 0;を追加したところ、カスタマイズした見出しがきれいに表示されるようになりました。
  
  おかげさまで一人では解決できなかった問題がすんなり解決でき、
  新しいデザインの見出しでブログを書けるようになりました。
  
  ありがとうございました。
投稿者

投稿