redoブログ

redoブログ

現役スピーカー設計者によるお役立ち情報発信ブログ

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

f:id:redo5151:20191123174606p:plain  

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

 

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

 

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

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

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

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

ソースコード」とは

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

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

 

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

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

 

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

 

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

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

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

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

 

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

色付けを適用したコード 

<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;
}
```

”編集見たまま”での設定方法

残念ながらそのままでは設定できません。なので、先ほど紹介したはてな記法”もしくは”Markdown”で最初から作成することをオススメします。

既に私の様にいくつか記事を”編集みたまま”設定で作成している方は下書き状態で”はてな記法”もしくは”Markdown”にて色付けを実行し、コピーして、”編集見たまま”へ貼り付けて対応してください。そうすると問題なく作成できますよ。

 

背景を黒にしたり他の色設定をしたい方は下記ワカログ様の紹介コードも参考になります。

はてなブログでソースコードを色付けして表示する(シンタックスハイライト) Monokai風テーマにしてみた - ワカログ -Wakalog-

 

はてなブログのヘルプでの紹介

実ははてなブログのヘルプでもシンタックスハイライトに関して説明があります。

ソースコードを色付けして表示する(シンタックスハイライト) - はてなブログ ヘルプ

はてなブログでは数多くのファイルタイプの構文に対応しており、カラフルな色付けが適応可能になっています。はてなブログのヘルプも一度流し読みしておくことをおすすめします。

 

 

総括

調べてみると"Web上でもしかしてこれって設定難しいのかな?”と思っていても実際に使ってみると意外と簡単にできることって多いです。

私同様にただ知っているか知らないかだけの違いなので、色々と情報収集していきましょう。Webデザインは奥が深いので、凝り始めるときりが無いですね。

 

Web上の設定は拘り過ぎると表示速度が遅くなるので、デメリットもあります。GoogleAdsenseの説明の中にも表示速度の重要性が説明されています。

”Web表示速度が遅い”と離脱率が高くなるのは当たり前ですよね。その中の一つとしてCSSは極力少なくシンプルにすることが推奨されています。CSSでほとんど使っていないデザイン機能は削除しておくと良いかと思います。

 

対応策の一つとして、CSSの構文をメモ帳に保存しておき、必要なときに記事のHTML編集の<STYLE>設定として、冒頭に貼り付けておくという方法もオススメです。

今回、ご紹介したCSS設定でのシンタックスハイライトもHTML上で必要な時だけ使用するという考えもありです。 

 

 

まとめ