WordPressのテーマ「First」を更に調整

新しく導入した 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な方にデフォルトを設定しておいて欲しいですよね・・・)