「ミックスグリーン) 」利用中♪スキン利用歴はこちらから♪

独自CSSでソースコードラベル表示してたけどCocoonスキン「Season」だと不要になった

Cocoonブログ
この記事は約6分で読めます。

これまでソースコード表示の際に、CSS、HTML、CODEをラベルみたいに表示させるカスタマイズをしていたのですが、Cocoonスキン「Season」では、ラベル表示のCSSがあるようなので、調整してみました。

これまでのソースコードのカスタマイズ

ワタシのカスタマイズはちょっと一手間かかるものになってまして…
まず、ソースコードの手前に以下のタグを入れてました。

HTML CSS ショードコード

<!-- HTMLラベル用 -->
<span class="sauce shtml">HTML</span>

<!-- CSSラベル用 -->
<span class="sauce scss">CSS</span>

<!-- ショートコード用ラベル -->
<span class="sauce scode">ショードコード</span>

上記を「再利用ブロック」として登録しておいて、
「HTML」「CSS」「CODE」それぞれのソースコードの手前にブロックを呼び出して追記してました。

CSSは↓こんな感じ。(子テーマのstyel.cssに記述)

/* ---------------------------
ソースコードのラベル
------------------------------*/
.scode {
    background: #e4007f;
}
.shtml {
    background: #008080;
}
.scss {
    background: #f89174;
}
.sauce {
    user-select: none;
    -ms-user-select: none;
    font-size: 12px;
    position: absolute;
    color: white;
    line-height: 1em;
	padding: 2px 5px;
	margin-top:0;
	z-index: 99999;
    font-family: Arial,sans-serif;
}

スキン「Season」に変更するとこうなった

かぶってしまってるのを発見。
オレンジが、ワタシ。青が「Season」のCSSと思われます。

そっか、「Season」にはソースコードのラベル表示が標準でついてるんだな…と思ったのですが…
デモサイトにて、「HTMLとCSSのコード【オリジナル】」という説明を発見。

利用するにはプラグイン「AddQuicktag」を導入する必要があります。

HTMLとCSSのコード【オリジナル】

でも、「AddQuicktag」入れてなくても表示されてます。
あまり深いことは考えず、ただ余計な手間が増えないので、ラッキ~♪と思いました。(^▽^;)
これで「span」タグ入れなくても良くなる…とブロックを削除。

無事ラベルのかぶりは解消されました。

「HTML」ラベルが表示されないのを調整

でも、「CSS」のラベルは表示されますが「HTML」としてた方は表示されない。
やっぱり、「AddQuicktag」入れなきゃいけないのかしら…と思いましたが、以下の対応でOKでした。

CSSラベルの箇所のソースを確認したところ…
「before」でCSS指定している様子。

<!-- CSS -->
<pre class="wp-block-code hljs css">
::before
pre.css:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "CSS";
    background: #0e7ac4;
    color: #fff;
    padding: 0 1em;
    font-size: 16px;
}

なので、HTMLの箇所をページから探したところ…
↓こんな記述が…。

<!-- HTML -->
<pre class="wp-block-preformatted hljs xml">

あ…表示させてたソースコード「HTML」じゃなくて、「xml」だったのね…。
「xml」で指定すればいいんだと…子テーマのStyle.cssに以下を追記。

pre.xml:before {
    position: absolute;
    top: 0;
    left: 0;
	content: "HTML";
    background: #ffa952;
    color: #fff;
    padding: 0 1em;
    font-size: 16px;
}

表示されるようになりました!!

上部にきっちり詰まってなくて余白があるのが気になりますが…
これは、ソースコード表示がスライドになってるせいかなと思ってます。
スライドさせないようにしたいのですが、これまでその方法をちゃんと探してなかったので…(頻繁にソースコード表示を利用してはいないので後回しにしてました。)
そろそろ、ちゃんと調べようかな…と思ってます。(-。-;)

「AddQuicktag」は嫌いではないけど

頑なに「AddQuicktag」を入れないようしてるように見えると思いますが…(苦笑)
なんでかっていうと…
ブロックエディターに慣れきってしまったせいか…
Classicブロックでさえ、使うのが面倒になってしまってるんですよ、ワタシ。(^▽^;)

「AddQuicktag」は、Gutenbergに対応する予定はないんですかね~。
と、探してみたら↓こんな記事発見!

なるほど…。

「再利用ブロック」で対応可能、要望をそれほどもらっていない…ってことなので、
現状、Gutenbergへの対応はしなさそうに見えました。

「再利用ブロック」…
確かに便利で、最初の頃はめっちゃ喜んでたんですけど…

「再利用ブロック」を呼び出したら、エラーになったり…
以前の再利用ブロックとかが、無効ですって表示されて「HTMLに変換」ボタンを表示されることが多いので、使うの怖くなって最近は利用してないんですよね。

エラーの原因も探しにいかなきゃ…。(-。-;)

「AddQuicktag」をインストールするか、
「再利用ブロック」で代用するか…今後も検討していく予定です。

おわりに

「Season」は、基本「AddQuicktag」を入れなくても充分すぎるほど素敵なスキンですが、せっかく「オリジナルスタイル」というスタイルがあるので、ぜひ、取り入れたいところ。

しかし、センスのないけろら~は、
装飾にこだわってゴチャゴチャさせスキンを台無しにしそうな気もするので、
しばらくは、あまりいじらずこのままやっていきます♪

それでは、また!けろら~でした♪\(^▽^)/

コメント

タイトルとURLをコピーしました