【ブログカスタマイズ】はてなブログでの「ソースコード」の色付け表示方法紹介｜シンタックスハイライト実装方法

f:id:redo5151:20191123174606p:plain

今回はWebデザインのプログラミングに関係するHTML、CSSなどのソースコードをブログで記載するときに色付けして見やすくする方法(＝通称シンタックスハイライト)をご紹介したいと思います。

最近は人工知能(AI)などのプログラミングに対する需要が年々高まってきていますね。車の自動運転も数年前までは高速道路での運転までが限界と言われていましたが、ここ最近では一般道での自動運転も視野に入ってきています。これらを操作している元となっている言語は全てプログラミング言語が元となっています。

この様なソースコードの一部を紹介する場合、やはり色が同一色だと見にくく、内容を理解するのに時間が掛かりますよね。見やすさという観点からSEO対策にも繋がります。Webサイトの見やすさに繋がる重要な対策の一つです。

私も以前は、ソースコードの背景をグレーにして、一部のコードだけ赤色や青色に変更していましたが、凄く見にくいなと感じていました。

他の方々のコードの記載方法を見ると、皆さんカラフルで大変見やすいなと感じていました。色々調べてみたところ”自動で簡単に機能ごとに色付けできる方法=シンタックスハイライト”がありました。

「はてなブログ」でコード紹介する際には有効かつ簡単に設定もできますので、ぜひ活用頂けたらと思います。

「ソースコード」とは
「はてなブログ」でのコード色付け方法
- 何も色付けしていない状態のコード
- 色付けを適用したコード
「はてなブログ」でのコード色付け方法
総括
「WEBデザイン」を学ぶならプログラミングスクールも選択肢に
- TechAcademy(テックアカデミー)がおすすめ
- TechAcademy(テックアカデミー)の特徴
  - 全て現役のエンジニアが指導
  - オンライン完結型スクール
まとめ

「ソースコード」とは

ソースコードとは、プログラミング言語などの人間が理解・記述しやすい言語やデータ形式を用いて書き記されたコンピュータプログラムのこと。プログラムに限らず、人工言語や一定の規約・形式に基いて記述された複雑なデータ構造の定義・宣言などのこともソースコードと呼ぶ場合がある。

引用:ソースコード（ソースプログラム）とは - IT用語辞典 e-Words

「はてなブログ」で私たちが意識せずに投稿している文章も実は裏ではこのソースコードが元となって、画面に様々なフォントや大きさ、色で表示されています。

Webデザインも結局はHTMLやCSS,Javaなどを駆使して、色や形、動きなどをプログラミング設定することで、オリジナルサイトが作成されていきます。

これらのプログラミング言語を習得することでWeb上でできるデザインの幅が大きく広がっていきます。特に、ブログを使ってアフィリエイトも考えている方は少しでもレイアウトを見やすくする工夫が求められます。

私も最近は色々なブログのレイアウトも参考にしながら、レイアウトの工夫を色々試行錯誤しています。それでは、具体的なコード色付け方法をご紹介したいと思います。

「はてなブログ」でのコード色付け方法

何も色付けしていない状態のコード

何も設定せずにコードを貼り付けると通常記事を書くのと同じ状態なので、大変見にくいですね。特に意味合いを理解するには色付けしたほうが分かりやすいです。

色付けを適用したコード

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

こちらの方がそれぞれのコードの機能が分かる為、見やすく理解しやすいです。簡単に設定もできるので、ぜひプログラミングコードの色付けをしていきましょう。

【Font Awesome はてなブログ】アイコンフォントが表示されない？｜「はてなブログ」に対応させる方法を紹介！

【SEO対策トップへ戻るボタン】「はてなブログ」にコードコピペで簡単設定｜Font Awesomeでアイコンも自在に変更可能

「はてなブログ」でのコード色付け方法

コード色付けの設定手順(CSS設定)

まずは「はてなブログ」の管理画面→「デザイン」→「カスタマイズ(トルクアイコン)」→「デザインCSS」を選択します。

下記ソースコードを設定しましょう。

/*CSS設定_コード背景色*/
pre.code{
    margin: 0 0 1.5em 0;
    padding: 1em;
    border: 1px solid #e4e4e4;
    background: #f8f8f8;
    border-radius: 2px;
}

”はてな記法”での設定方法

コードの始めに>|css|を記入し、コードの終わりに||<を記入しましょう。必ず改行してくださいね。

参考ソースコード

>|css|
/*コード背景色　*/
pre.code{
    margin: 0 0 1.5em 0;
    padding: 1em;
    border: 1px solid #e4e4e4;
    background: #f8f8f8;
    border-radius: 2px;
}
||<

”Markdown”での設定方法

コードの始めに```htmlを記入し、コードの終わりに```を記入しましょう。必ず改行してくださいね。

```html
/*コード背景色　*/
pre.code{
    margin: 0 0 1.5em 0;
    padding: 1em;
    border: 1px solid #e4e4e4;
    background: #f8f8f8;
    border-radius: 2px;
}
```