【WordPress】無料テーマ「Cocoon」標準機能のhighlight.jsの表示をおしゃれにカスタマイズ!

【WordPress】無料テーマ「Cocoon」標準機能のhighlight.jsの表示をおしゃれにカスタマイズ!wordpress
この記事は約6分で読めます。

こんにちは!
Naoya(@lisbiz_info)です。

 

前回、


こちらの記事で一部のカスタマイズ方法をお伝えしました。

 

今日のカスタマイズは、
highlight.jsの表示のカスタマイズについてご紹介します。

 

 

highlight.jsとは
highlight.js
こうしてコードの表示ができるJavaScript ライブラリです。

 

このhighlight.jsですが、そのまま設定だと幅いっぱいになってしまっていて、
尚且つ少しデザインが気にいらなかったので、ほかの方のサイトなどを参考に
カスタマイズをしてみました。

 

通常は下の画像のような感じ。

highlight.js 通常

highlight.js 通常

 

 

カスタマイズをすると…

.blogcard {
	padding: 1rem;
	color: #666;
	position: relative;
	border-color: #ff7200 !important; /* 枠線の色を変更 */
}

このようになります。

 

言語を選ぶと上にCSSなど表示するようになりました。
ただ、あまり使う機会はないので、お好みですね(笑)

CSSコード

では早速、「外観」⇒「テーマの編集」から
子テーマのスタイルシート(style.css)に以下のコードをコピペしましょう。

main pre{
	background: #ff8300;
    color: #ddd;
	font-family: Menlo, Consolas, 'Noto Serif', monospace !important;
    font-size: 14px;
    line-height: 1.4;
	padding: 3.5rem 2rem 2rem !important;
	position: relative;
	border: none;
	border-radius: 6px;
	font-weight: bold;
	margin: 1em 2em;
}

main pre code, .article pre code:focus{
	font-family: Menlo, Consolas, 'Noto Serif', monospace !important;
	background: none;
	color: inherit;
}

main pre.css::before{
	content: 'CSS';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	background-color: #ff8300;
	height: 1.5rem;
	width: 100%;
	line-height: 1.5em;
	border-radius: 4px 4px 0 0;
	text-indent: 1.5em;
}

main pre.html::before{
	content: 'HTML';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	background-color: #ff8300;
	height: 1.5rem;
	width: 100%;
	line-height: 1.5em;
	border-radius: 4px 4px 0 0;
	text-indent: 1.5em;
}
main pre.php::before{
	content: 'PHP';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	background-color: #ff8300;
	height: 1.5rem;
	width: 100%;
	line-height: 1.5em;
	border-radius: 4px 4px 0 0;
	text-indent: 1.5em;
}

nav#navi, .menu-header .sub-menu{
    font-weight: bold;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2);
}

.menu-header .sub-menu .item-label{
    font-size: 80%;
}
.menu-header .item-label{
    color: #bcb1b1 !important;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
    color: #ffffff !important;
    border-bottom: 3px solid #841c00;
    transition: all .2s ease;
}

.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
    border-bottom: none;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
    color: #ffffff !important;
    transition: all .2s ease;
}

色の変更などはサイトに合わせて適用をしてください(^^)/

 

今日はhighlight.jsの表示のカスタマイズでした!

 

 

 

最後までお読みいただきありがとうございました。

ではまた。

コメント

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