ブログでカスタマイズの紹介をするなら、<code>をフル活用しよう！｜Webデザイン

f:id:chihiro_dayori:20170811205302j:plain

はじめに
１．<code>とは
- 実際の入力方法はこちら
- 入力後はこうなります。
2．コードじゃなくても、活用できます。
- 3-1.筆者がコード以外に活用するなら
3.【8月27日追記】CSSでサンプル作成してみました。
4.<code>タグはカスタマイズでCSSで装飾も出来ます！
最後に

はじめに

ブログをはじめて4カ月、WEBデザインを勉強してきた中で、最近ちらほらデザインの相談やご依頼が来ている状況で、その際「Gisthub」でコードを作成しています。

例えば、ブログ内でカスタマイズコードを紹介する際も同様に、GistHubで紹介をしているのですが、(8/11修正:不具合があった為、現在は使用しておりません。)手順を紹介する際に、今回ご紹介する<code>タグがとても使い勝手が良く、最近知ってからフル活用しております。

今回はこの<code>の入力方法と活用理由、そしてカスタマイズ例をご紹介致します。

１．<code>とは

プログラミングのソースコードやコンピューター用語を表示するタグです。タグで囲まれた部分がコードであるということを意味します。

例えばHTMLやCSSで作成したコードを記事内に掲載する際に、活用致します。

※但し、HTMLを直接codeの中に書かない

修正理由:タグを示す記号である < や > は、本文中にそのまま記述するとタグと認識されてしまう為。もしHTMLコードの紹介をしたい場合は、< などの記号を"実体参照"を用いて、タグとしての認識を回避する必要が御座います。

実体参照についてはこちらから

実際の入力方法はこちら

記事内にコードを書きたい場合は <code>この中に</code>に書きます。

入力後はこうなります。

f:id:chihiro_dayori:20170811194646p:plain

他のブログツールは、どのような設定になっているかは試していない為、わからないのですが、はてなブログでの初期値は背景が灰色の状態に設定されています。

2．コードじゃなくても、活用できます。

※ご注意:中身がコードでない為、基本的には活用しないほうがいいです。しかし、コード以外でも活用は出来るという点でご紹介致します。あくまでネタという視点で書きます。

例えば

１．英語もＯＫ：『例：Hello World』

２．ひらがなもＯＫ：『例：こんにちは』

３．数字もＯＫ：『例：08月11日』

強調したい時に活用するのもいいかもしれません。

3-1.筆者がコード以外に活用するなら

吹き出しを使わず、横並びの会話形式も可能に(笑)

寺門：俺やるよ！ 肥後：いや、俺やるよ！ 上島：…俺やるよ！ 肥後・寺門：どうぞ、どうぞ！

勿論、縦並びの会話形式も出来ますよ(笑)

寺門：俺やるよ！

肥後：いや、俺やるよ！

上島：…俺やるよ！

肥後・寺門：どうぞ、どうぞ！

3.【8月27日追記】CSSでサンプル作成してみました。

www.1nichi1ppo.com

NEWボタンとして作成しましたが、文字を変更すれば、同様に活用できますので、宜しければ参考にご活用下さい。

4.<code>タグはカスタマイズでCSSで装飾も出来ます！

読んでいる中で気づいたかと思いますが、筆者のcodeタグはCSSでアレンジしております。参考までに筆者のコードを掲載いたします。

.entry-content code {
    padding: 2px 4px;　/***文字の余白調整***/
    background: repeating-linear-gradient(60deg, #fff 1px, #dcc9b3 4px);　/***背景色***/
    border: 1.5px solid #dcc9b3; /***枠線***/
    border-radius: 3px; /***枠の丸み***/
    color: #111;　/***文字色***/
    font-weight: 600;　/***文字の太さ***/
}

背景色を変えたい方は、こちらを参考にして変更してみて下さい。

www.colordic.org