新しく導入した First テーマに対する子テーマで更に調整です。

ブログを記載しているときに内容的に話題の切れ目に入れる感じで『水平線のタグ＝hr』 を入れるのですが First テーマはちゃんと表示してくれません。なんか透明の線を引いてるような感じなのです。

hrタグに対してこのテーマが何も設定していなければブラウザが標準の水平線が引かれるはず。ですが実際にブログ側の記事に水平線の記述指定を入れても無視されます。ということはやはりCSSで制御されていると推測。

なので Firefox で F12 キーを押下してインスペクターを動かしてみるとやはり定義は存在しました。これも子テーマで要修正でっす。

親テーマの以下の記述を
hr {
    background-color: #eee;
    border: 0;
    height: 1px;
    margin: 0 0 1.5em;
}

子テーマで以下のように修正
hr {
    background-color: #a9a9a9;
    border: 1;
    height: 2px;
    margin: 0px 0px 0px 0px;
    color: #a9a9a9;
    width: 80%;
/*  size: "3"; */
}

これでしっかりと水平線が表示されるようにな

次に Prismatic というプラグインで表示しているコードの表示ですが、これも無駄な部分が描画されているので調整対象です。
コード表示本体の上下に空白や灰色の横線が配置されています。また、コードの文字サイズ大きすぎて見辛い。なのでこれらの正体をインスペクターでチェックして直します。

コードの文字サイズに関しては First テーマの場合は CSS というサブフォルダに normalize.css というファイルがあってそこに code に対するCSS記述があったのでこれをオーバーライドする必要があります。

子テーマの Style.css に追記した内容は下記の通り：

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 12px;    /*←フォントサイズを固定にしてしまう*/
}

次に上下の空白や灰色の横線ですが、インスペクターでチェックしたところでは親テーマの Style.css に pre という内容で記載されていました。

確かにコード自体を画面に表示する場合は、コードを以下のタグで囲む必要があります。
<pre><code class=”language-css”>　〜　</code></pre></code>
なので pre や code に対してCSSに定義があればそれが優先されるので、表示結果が気に入らなければ自分でカスタマイズするしかないですよねー


子テーマの Style.css に追記した内容は下記の通り：

pre {
    border-bottom: none;    /*←下部の線は無しとする*/
    border-top: solid 1px #ccc;;
    color: #666;
    font-family: consolas, 'courier new', monospace;
    font-size: 87.5%;
    line-height: 1.4;
    margin: 0 0 1.7em;
    max-width: 100%;
    padding: 0;    /*←上下のパディングもゼロにする*/
    word-wrap: normal;
}

これで結構自分の好みにはなった形です。
今回子テーマを作ってみてかなり勉強になりましに〜(・Ａ・|||)

ちなみに Prismatic プラグインがサポートしている表現の中で Highlight.js の表示サンプルデモは以下のURLで確認できます。
⇒ highlight.js demo
実際にCSSのコード表示がどのような配色で行われるのがリアルタイムに変更して確認することができまっす

＜2019/05/06(月)追記＞
Prismatic プラグインを使っているのに投稿の一覧が表示されているTOPページはコードの表示が何の変化も無い現象を確認しました。これの直し方は Prismatic の個別設定の Highlight.js の設定に在る 「Limit to Posts and Pages」 のチェックを外すことで解決しました。
⇒ TOPページに投稿した記事のサムネイルが並んでいる形式で、内容はサムネイルをクリックして個別にPOSTを表示する形式であれば、このチェックは入ったままでOKだと思います。コードの表示は個別POSTの表示の時にしか必要無いゆえに。
⇒ ですが、FirstテーマのようにTOPページに内容がそのまま表示される場合は、逆にこのチェックを外していないとチグハグな表示になってしまいます。
(こういうU/Iに関わるところは両方OKな方にデフォルトを設定しておいて欲しいですよね・・・)

いままで愛用していた Graphene というテーマは更新すると表示が崩れることが判っており、直し方は面倒なので更新はあえて止めていたのですが、さすがにそろそろ問題かなと思われたので変更しても表示が崩れないテーマに変更しました。

日本の方が作られた First というテーマです。

グローバルに使われることが想定されているようで、引用の部分(blockquote)は日本語向けでは無いと感じます。

引用部分の先頭にダブルクオート(をひっくり返した記号？)を表示して、引用部分の本文は斜体(イタリック)で表す物ですが、この作法は英語圏向けの作法で日本語表記のブログ向けでは無いと、個人的には思ってます。

※そもそも斜体自体が日本語の様式にそぐわないと思われます

で、このあたりは Style.css に定義が載っているのでそれを修正すればOKなのですが、テーマが更新される度に手修正が必要になるので、子テーマを作って上書きするのが後からの手間を省けるやりかたです。

子テーマの作り方は以下のサイトが一番判り易かったです：
「10分で終わらせてくるっ！」WordPress子テーマの作り方を2ステップで簡単解説！

First の blockquote の記述は

blockquote {
    color: #888;
    font-style: italic;
    margin: 0 0 2.4em;
    padding: 12px 0 0 44px;
    position: relative;
}
blockquote:before {
    color: #ddd;
    content: "\201C";
    font-family: Georgia, serif;
    font-size: 84px;
    left: -5px;
    line-height: 1;
    position: absolute;
    top: -5px;
}

これを子テーマで以下のようにオーバーライドします。

blockquote p { margin: 0px; }    /*←blockquote 自体のp要素の上下空白を無くす*/
blockquote {
    color: #000000;
    border: 1px solid #a9a9a9;
    background-color: #efefef;
    font-style: normal;
    font-size: 90%;
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    position: relative;
}
blockquote:before {
    color: #000;
    content: "";       /*←ダブルクオートの表示はしないように無設定にする*/
    font-family: Georgia, serif;
    font-size: 12px;
    left: 0px;
    line-height: 0;
    position: absolute;
    top: 0px;
}

完全にオーバーライドするためには、要素を全部子テーマ側に記述して修正しないと駄目みたいです。
例えば、blockquote:before(←引用文本体の前にダブルクォート付ける記述)ですが、子テーマ側で全てコメント化して無効にしようとしても駄目です。

あくまで親側の記述は生きているので、子の方で無かったことにしようと全てコメント化しても、この行為は子の方で親側の記述に対して何も変更しないという指示になるので意味がありません。

なので打ち消したい要素を全て子側に記載して、それらを直し、オーバーライドする必要があります。上記の場合は、ダブルクオートの表示をしないように文字設定を無い状態にして、blockquote:before自体は生きつつも実質なにも表示されない仕掛けに変えてます。

しかし問題がありまして、実験用のローカル環境では問題無く子テーマのオーバーライドが効いているのですが、本番環境は無視されまくりなんですよね・・・他にも上記のCSSのコードを表示しているところはSyntaxを色別に表示する仕組みの Prismatic というプラグインを入れているのですが、これも同様にローカル環境では反映されるのに、本番環境では同じ表示ならない(編集中のプレビュー表示だけ反映されている)・・・

なんかWordpressってそのへん素直に行かないこと多いなぁ。原因究明するのほんと面倒です
(・Ａ・|||)

追記：blockquote の表示問題は解決
参照：WordPressで子テーマを作る際に知っておくべき仕組みと注意点 に記載の「子テーマのCSSがうまく反映されない場合（プルダウン）」の内容を参照して解決した模様です
⇒ 親テーマの後に明示的に子テーマを読み込むように指示する書き方を導入

と同時にこの参考サイトには 『なおTCDテーマであれば、テーマオプション内の「カスタムCSS」に追記してもOK。テーマをアップデートしてもそのまんま残ります。子テーマ同様の安心。優しさ。初心者への愛』 といふ記載がありました。

TCDというのはブランド名らしく、いわゆるテーマ屋のようです。それはさておき「カスタムCSS」は First テーマにも存在してまして、子テーマを作り、その子テーマの Style.css の内容を WordPress のテーマエディタで修正しようとしたら警告みたいのが出たんです。　『直接テーマエディタでCSS直さんでもカスタムCSSに書いた方がお薦め』 のような表示が！

しかしこれは了解しつつ 「わしは子テーマを勉強中なんや！」と無視して続行しちゃってるわけですｗ

で、参考サイトのこの表記を帰納法的に考えると 『カスタムCSSをサポートしているテーマなら、子テーマ無しでCSSをカスタマイズできるんや』 ということになるかなと。

これに関してはローカル環境で別のテーマ導入してみてそのうち実験ですに．．．

さらに追記：Syntaxを色別に表示する仕組みの Prismatic というプラグインの表示問題
⇒ うーむ・・・これは翌日になったら正しく表示されるようになっていました。いちおう表示系が正しくならない場合はブラウザのキャッシュを削除する形で最新化されるはずなのですが（謎

ずっと Graphene というテーマが気に入って使ってます。

使ってますが今のバージョンは 1.9.4.3 で、この記事を書いている時点の最新が 2.5.2 なのでメジャー・バージョンが上がっているんですね。でもバージョンアップするとウィジェットの表示が右サイドからフッターに移動してしまう、という現象に見舞われます。

これは div タグのペアリングが合ってないと発生するらしいのですが、ではなぜ今まで平気だったのか？　あるいは他のテーマではなぜ発生しないのか？　と言うそこはかとない疑問が出てきます。　基本的にWordpressのエディタで書き込んでいる記事であり、手組でちょこちょことタグを打ち込んだりはしてないのでどこかで div タグ忘れた、なんて事が起きる方が希有で不思議なのですね。
＜参考にしたサイト：ブログ記事のレイアウトが崩れた時に確認すべきはdivタグ＞

Graphene もv2.xからデザインが変わってちょと 「これじゃない」 感がでてしまったので、今更900件ある過去記事の中から タグの不一致箇所を探すなどという労力は100％無駄に感じているところでっす。ゆえに新しいテーマ探してます。

これがなかなか良いのが無い。大抵のテーマがアルファベット系文化圏のものなので日本語の場合は、英文サンプルの見た目に対して実際に適用すると全然美しくありません。

テーマ自身が保持しているフォント情報は英文用なので、英語圏の人らはサンプル通りの表示なりますが、日本語の場合はフォントが「MS Pゴシック」に置き換わって表示されるので美しくない・・・

どうやら子テーマファイルを作って(*1)親の内容に対してフォント情報をオーバーライドして「メイリオ」とか指定するとまだましになる模様。

(*1)親テーマのフォント情報を直しても有効だけど、テーマの更新がある度にそれが元に戻るので、子テーマにフォント情報を持たせて常にオーバーライドさせるため

最近主流のテーマは1つ1つの記事にサムネイル画像を用意して、タイル状に並べる系の物が多いです。あとフリー版とプロ版があって「プロ版だともっといろんなこと出来ますよ」ってヤツ。SEO対策してます、よりたくさんの人にヒットします、とか・・・

いらんわっ！！　かつてのようにもっとシンプルながらも美しいテーマってあったけどなんか今のは商用を意識したというか商売臭いテーマばかりです。こうなる前は「どうだ私のカスタマイズりょくは！」的なハッカーが己が技術を世に示すという風情があったのですが、それが転じて商売にしちゃってる「テーマ売り家」になってるようで。

あてくしのブログは名も無き趣味サイトなので有償テーマとか使う気が全くなくて、無料でなんか良いのないかと探していますが、母数が膨大なのでなかなかどうして・・

もう少しいろいろ見て、ある程度妥協しつつも見やすいテーマないかなぁと・・・