WordPress独自のCSCC(カスタムCSS)を追加してみた

wordpress

記事の一部でテーマ、マークダウンだけでは装飾できない独自の装飾をしたいと思い、カスタムCSSを追加してみました。

環境

WordPress 5.4

装飾のスクリーンショット

Terminalの出力イメージを表現したかったのです。
背景が黒で、文字が白。

file

カスタムCSSの設定

サイドメニューの外観 > カスタマイズを選択します。
file

サイドメニューの追加CSSを選択します。
file

CSSを追加します。
file

マークダウンは、HTMLイメージで記入します。
今回はdivタグを使用しました。
マークダウンエディタのWP Githuber MDのプレビューではちゃんと表示されないので、ページのプレビューで確認して下さい。

<div class="console-output">
PHP 5.6.40-29+ubuntu20.04.1+deb.sury.org+1 (cli) 
Copyright (c) 1997-2016 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies
    with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2016, by Zend Technologies
    with Xdebug v2.5.5, Copyright (c) 2002-2017, by Derick Rethans
</div>

WP Githuber MDのプレビューイメージ
file

コードのハイライト表示でいいこに気がついた

これだけのことなら、コードのハイライト表示でいいことに気がついてしまった。。。

<pre  class="console">

こちらが、ハイライト表示の結果。

PHP 5.6.40-29+ubuntu20.04.1+deb.sury.org+1 (cli) 
Copyright (c) 1997-2016 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies
    with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2016, by Zend Technologies
    with Xdebug v2.5.5, Copyright (c) 2002-2017, by Derick Rethans

コメント