元『企業戦士』の1日1歩ブログ ~素晴らしき日常~

のんびりいこうやない。今日も明日も、明後日も。

f:id:chihiro_dayori:20170523173117p:plain

1ニチ1ポブログ

キニナル日常をポジティブに発信するブログ

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

f:id:chihiro_dayori:20170811205302j:plain

 

はじめに

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

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

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

SPONSORED LINKS
?

1.<code>とは

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

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

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

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

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

 

実際の入力方法はこちら

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

入力後はこうなります。

f:id:chihiro_dayori:20170811194646p:plain

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

 

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

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

例えば

1.英語もOK:『例:Hello World

2.ひらがなもOK:『例:こんにちは

3.数字もOK:『例: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

最後に

慣れればとても活用しやすいので、ぜひお試しください。

カスタマイズ基礎を勉強されたい方は、こちらの本がおすすめです。筆者が、一番最初に読んだ本です。この本を読んで、構造を理解してから、進めると理解度は深まると思います。

おしまい。【文字数:1905文字、作成時間:1時間15分】

SPONSORED LINKS
?