Blog

【JINカスタマイズ】codeタグを、マナブログ風にしてみた【オシャレ】

JIN wordpress カスタマイズ codeタグ manablog
JINを使っている人
JINを使っている人
いまJINを使っているけど、文章の途中でエッジの聞いたデザインを使いたいな…。

たとえば、ブログ界の神様「マナブさん」みたいなデザインにしたいな…。

この記事では、上記のような悩みを解決していきます。

 

この記事の想定読者

  • JINユーザー
  • だけど、マナブさんのデザインも好きな人
  • codeタグを使ってみたい人

想定している読者は、上記のとおりです。

 

この記事では、「JINをカスタマイズして、codeタグのスタイルを変更する方法」について書いていきます。

もしかすると、僕と同じように「ヒツジさんも崇拝しているし、マナブさんも崇拝している人」がいるかと思い、記事にしました。

 

まだJINを持っていない場合は、下のリンクからどうぞ!(※アフィリエイトではないし、純粋におすすめです!)

参考ページ >> JIN(ジン)|真の使いやすさを追求したWordPressテーマ

 

また、マナブさんも最近Manablog Copyを公開しています。

参考ページ >> Manablog Copy|SEOと読みやすさを追求したテーマ

 

 

【JINカスタマイズ】codeタグとは?

 

codeタグというのは、<code></code>のことで、プログラミングのコードを書くときなんかに使います。

下の画像でいうと、”smtp_host”とか”smtp_port”のことです。

JINカスタマイズ codeタグ1

 

これが、JINのデフォルト設定だと、下の画像のようにStyleが何もついていない状態になっています。

JINカスタマイズ codeタグ

少しコードっぽいフォントにはなっているものの、背景色がついていないので分かりにくいですよね。

 

そして、この<code>ですが、マナブさん(@manabubannai)の場合だと、検索キーワードを囲うときに使っていたりします。

manablog text

参考記事 >> ブログのアクセスアップに必要な記事数は100本【失敗例も解説する】

 

こんな感じで、おそらく黒文字だけで書いていたら、読んでいて「うーん。。。」となるのですが、<code>を使うことで非常に見やすくなっています。

※manablogの場合、黒文字だけでも非常に見やすいですが、、、

 

なので、プログラミングのコードを書かなくても、「マナブさんと似たような使い方をしたいJINユーザーがいるのでは?」と思い、記事にしました(`・ω・´)!

 

【JINカスタマイズ】codeタグを、マナブログ風にしてみた

 

前提が長くなりましたが、ここから<code>をマナブログ風にする方法を紹介していきます。

 

STEP1 : CSSの追加方法

 

まずは、WordPressトップに行ってあげて、「外観」をクリックします。

JINカスタマイズ codeタグ

次に、外観の中の「カスタマイズ」をクリックです。

JINカスタマイズ codeタグ

 

そうすると、色々とカスタマイズできるわけですが、今回は1番下にある「追加CSS」をクリックします。

JINカスタマイズ codeタグ

そうすると、下の画像のように、CSSを追加できるようになるので、後ほど紹介する<code>から好きなものを貼り付ければOKです。

 

おそらく、割と簡単にできるかと思います(`・ω・´)!

※注意 : 「Google HTML/CSS Style Guide」にあるとおり、これはGoogleに推奨されていないやり方です。もし、子テーマを編集できるようでしたら、「子テーマで編集→反映」しましょう。

 

STEP2 : CSSの貼り付け

 

それでは、コピペ用の<code>の CSSを書いておきます。

 

codeタグのデザイン1 : よくある一般的なやつ

 

まず、よくある<code>のスタイルが、下の画像のデザインですね。

JINカスタマイズ codeタグ
code{
	color : #1D1C1D;
	background-color: rgba(29,28,29,0.04);
	font-size: 110%;
	padding: 2px 3px 1px;
}

背景色がグレーで、文字が黒のデザインを使いたい場合は、こちらが良いかと思います。

背景色と色のコードは、slackを参考にしました。

font-sizeに関しては、文字サイズをデフォルトから変えていない場合、「110%」くらいがちょうど良いと思います。

 

codeタグのデザイン2 : マナブログ風

 

そして、今回マナブログ風に作成したのがこちらのデザイン。

JINカスタマイズ codeタグ
code{
	color : #d32f2f;
	background-color: #f5f5f5;
	font-size: 110%;
	padding: 2px 3px;
	border-radius: 4px;
}

本家マナブログだと、背景色も赤みがかかっているのですが、僕のJINのデザインだとグレーの方がマッチしました。

Slackとかも、こんな感じのデザインになっていますね。

 

本家マナブログと同じcodeタグを使いたい場合

本家マナブログと同じ<code>タグを使いたい場合は、デベロッパーツールでご確認ください。

著作権の問題等々ありますので、僕の方では対処できませんm(_ _)m

 

もしもマナブさんのデザインを使いたいのであれば、Manablog Copyをご活用ください。

参考ページ >> Manablog Copy|SEOと読みやすさを追求したテーマ

※僕には1円も入らないので、安心して購入してください。笑

 

STEP3 : codeタグを利用

 

最後に、今回Styleを当てた<code>タグの使い方ですが、下記の2つあります。(classic editor前提)

  • ビジュアル : バッククォート(`)で囲む
  • テキスト : <code>〇〇</code>で囲む

いずれかの方法で囲んでいただけると、使えるようになります(`・ω・´)!

おしまいです。

 

おすすめの記事