Simplicity2 子テーマのCSSに追記した内容が反映されない

サンプル: 各エントリーの間に1pxのラインを入れる | codepen

子テーマjavascript.jsに、js欄のスクリプトを丸ごとコピペして下さい。
css欄はscssで書いてあるので、同欄の右側にあるview compiledボタンよりcssに変換したものを子テーマstyle.cssに追加して下さい。

で、線が引けます。

.listDivLine {
  display: block;
  margin: 40px 0; //線と上下エントリーの感覚
  height: 1px; //線の幅
  border: none;
  background-color: #ccc; //線の色
}

※ このスタイルの中にある//はcssではエラーになりますので注意して下さい。コメントが必要なら、/**/のコメントで書いて下さい。説明のために入れてあるだけです。

こういう感じです。
jQueryについては、#listがある時、つまりトップページ、検索、カテゴリ、タグ、アーカイブ等でリストが表示されるような時に上記の線が入ります。

もし、スマホなどで必要なければ、メディアクエリで上記cssをいじる感じになります。

さて、質問のcssですがパッと見た感じ問題があるようには思えないので、子テーマを有効にされていないとかではないでしょうか？
有効にして尚これらが効かないのであれば、どこかに全角で入れている文字があるとか、;が抜けているとかそういうのを調べて下さい。

また質問で線を入れられている箇所がdittedになっていたので、

.listDivLine {
	display: block;
	margin: 40px 0;
	height: 1px;
	border: none;
	background: -webkit-linear-gradient(0deg, #333, #333 50%, transparent 50%, transparent 100%);
	background: linear-gradient(90deg, #333, #333 50%, transparent 50%, transparent 100%);
	background-size: 4px 2px;
}

こうすれば点線になります。

.listDivLine {
  display: block;
  margin: 40px 0;
  height: 1px;
  border: none;
  background: -webkit-linear-gradient(0deg, #333, #333 50%, transparent 50%, transparent 100%);
  background: linear-gradient(90deg, #333, #333 50%, transparent 50%, transparent 100%);
  background-size: 16px 10px;
}

こうすればdashになります。何かしらの参考までに。

× また質問で線を入れられている箇所がdittedになっていたので、
◯ また質問で線を入れられている箇所がdottedになっていたので、

Hidekichi様

アドバイスありがとうございます。
無知でお恥ずかしいのですが、

子テーマjavascript.jsに、js欄のスクリプトを丸ごとコピペして下さい。
css欄はscssで書いてあるので、同欄の右側にあるview compiledボタンよりcssに変換したものを子テーマstyle.cssに追加して下さい。

で、線が引けます。

この部分の意味が理解できていません。javascript.jsというのは、どこにあるのでしょうか？
この作業を行ったうえで、改めて私が今まで書いていたコードを書くということでしょうか？
ただ、先ほどの投稿でコピペをした私のCSSを再度確認したところ全角などは見当たりませんでした。
子テーマが有効になっていることも確認済みです。

どうぞよろしくお願いします。

わいひら様

ご指摘の通り、コメント部分を修正したら無事に反映されました！
ここ数日、悶々としていましたが、これでもう少し楽しくカスタマイズが出来るようになりそうです。

ありがとうございました！
Hidekichi様もありがとうございました！

問題点は、いくつかヒントを出していたんですけどね。
>> どこかに全角で入れている文字があるとか
>> コメントが必要なら、/**/のコメントで書いて下さい。
とか(笑)

> javascript.jsというのは、どこにあるのでしょうか？

子テーマの中にあります。ftpで操作しないとwordpress上からは見えないかも知れません。
何かのトラブルがあった際にftpは必須ですから、ソフトで自分のPCから操作できるに越したことはありませんが、サーバーのコントロールパネルなどからも操作できる場合があるので(サーバーの会社が提供していたらですが)、ご存じなければまずここらは覚えてもらうしかありません。

基本的には、サーバーにログインするためのIDとパスワードで接続するだけで、サーバーのフォルダの状況が見れると言うようなものです。

> この作業を行ったうえで、改めて私が今まで書いていた
> コードを書くということでしょうか？

いえ、僕が書いたもので完結しています。
僕が書いたコードのメリットは、元(Simplicity)のコードを変更することなく、jQueryで新たにhtml要素を挿入して、cssでスタイルできるようにするというものです。これにより、親テーマがアップデートされたとしてもカスタマイズの内容が失われることはありません。

なぜ、新しい要素を挿入する必要があるかですが、現在Simplicityは、

<div id="list">
  <div class="entry">リストの中身</div>
  <div class="entry">リストの中身</div>
  <div class="entry">リストの中身</div>
  <div class="entry">リストの中身</div>
</div>

このような構造になっています。.entryと次の.entryの間には、marginがあって隙間ができています。.entryにもpadding-bottom等がありスタイルされています。
通常.entryのborder-bottomに線を入れたら、各リストの間に線があるように見えます。が、その位置の調整はpaddingで行う必要があります。

paddingは要素の内側のスペースで、それ自体には何も問題があるわけではありませんが、そこにmarginが加わると途端にスタイルしにくくなるのです。つまりpadding + marginの値がその要素のスペースとなって、単純に40px離れていて欲しいと思った時に、そのウチの30pxがmarginで10pxがpaddingと理解している中で、ボーダーをもう少し太くしたいと思ったりすると、ボーダーの幅も考慮しないといけません。
box-shadowを入れる時はどうするかとか、まぁ色々と考えなければならないことが多いわけです。

Simplicityの.entryはボーダーで囲まれているわけではありませんから、padding + marginでやるだけで良いのですけれども、できるだけ簡単にスタイルするためにはmarginだけでやるのが最も簡単です。
marginはその要素の外側のスペースですから、今回の僕のスタイルで言うと、

<div class="entry">リストの中身</div>
<hr>
<div class="entry">リストの中身</div>

こういうhtmlの状態になって、仮に.entryの上下marginが0だとした場合に、hrの上下マージンを40pxとして設置すると、

<div class="entry">リストの中身</div>
// ここに40px
<hr>
// ここに40px
<div class="entry">リストの中身</div>

こういう状態になって、均等にスペースを開けることができます。もし、スマホ表示になってこのmargin: 40px x;が大きく思ったとすれば、marginを20pxにするなどとするだけで間隔の調整ができます。paddingや.entryのボーダーは考慮しなくて済むわけです。

更に、dottedやdashed等の線分の間隔はブラウザによってマチマチです。それを同じにするという効果もあります。

Hidekichiさん

ヒントを頂いていたのに、すぐに気づかずに申し訳ありません。イチからどころか、ゼロからのスタートなためヒントに気づく余裕がなく・・・(汗)　javascript.jsについては、今はちんぷんかんぷんですが、いずれ理解できるようになりたいと思います！

さて、もう1つお伺いしたいことが出てきました・・・。

CSSに

.keiko-red {
    background: linear-gradient(transparent 60%, rgb(255, 170, 170) 60%);
}

と記載したときは、問題なくブログに反映されていたのですが、

.keiko-red {　/* 赤蛍光 */
    background: linear-gradient(transparent 60%, rgb(255, 170, 170) 60%);
}

と、コメントを追記すると反映されなくなってしまいます。今まではアドバイスしていただいたようにコメント部分を/**/で囲って無事に作業出来ていたのですが・・・。

ちなみにこれはAddQuicktagを使って、<span class=”keiko-red”></span>で使おうとしています。

コメントの書き方がやっぱりよくないのでしょうか？

すみません。解決したかもしれません。

コメント部分の/**/は、{}の外側に出さないといけないということでしょうか？

わいひらさん

返信遅くなりまして申し訳ありません！

ソースコード貼り付けの件失礼しました。
今度からはハイライト表示できるようにしますね。

ありがとうございました！