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上で必要な時だけ使用するという考えもありです。 

 

「WEBデザイン」を学ぶならプログラミングスクールも選択肢に

TechAcademy(テックアカデミー)がおすすめ

TechAcademy

「Tech Academy」は厚切りジェイソンがChief Public Relations Officerになっているオンラインベースのプログラミングスクールです。

 

以下の記事で「プログラミング」を学ぶことの意義を熱く語っています。

厚切りジェイソンが語る「プログラミングを学習する意義」とは | TechAcademyマガジン

会社情報 
□企業名
キラメックス株式会社
□所在地
<本社オフィス> 〒150-0002 東京都渋谷区渋谷1-17-4 PMO渋谷8F
□事業概要
Tech Academy:プログラミング教育事業

これからの時代は「5G」が到来し、”AI(人工知能)”が制するとも言われています。ニーズが高まっている状況でプログラミングを学ぶことは、就職にも困らず良いことばかりで損はありません。

 

redo5151.hatenablog.com

 

私も大学、大学院時代からFortranC言語などを学んできましたがやはり先生や教授に教えてもらうと格段に習得の速さが違うことを実感しています。

 

「HTML」や「CSS」などを学べるWebデザインコース はもちろんのこと以下の多くのプログラミングの学習が可能です。

 

現在提供中のコースの例
Webデザインコース 
Webマーケティングコース
はじめてのプログラミングコース
Javaコース
Pythonコース
WordPressコース
iPhoneアプリコース
・AIコース
・データサイエンスコース
・UI/UXデザインコース
・動画編集コース
・TechAcademy Pro(エンジニアへの転職を保証するコース)

 

TechAcademy(テックアカデミー)の特徴

全て現役のエンジニアが指導

基本的には質問は全てオンラインでのやり取りになりますが、回答者や個人メンターは全て現役のエンジニアになっています。スクールの卒業生をメンターとして採用しているスクールも多い中、全員が現役のプロの方というのは大きな魅力ですね。

 

質問に対しての回答のムラが少ないというのは、学習を進めていく中で大事な要素になりますので、「Tech Academy」の特徴の一つだと感じます。

オンライン完結型スクール

忙しい社会人や遠方の方にはありがたい「オンライン完結型スクール」になっています。場所や時間を問わず、パソコンとインターネット環境が揃えば、あとは自身のスケジュールを見て学習を進めることができます。

 

コロナ禍で家にいる時間も増え、気軽に学習できるという点では、「オンライン完結型」に勝るものはありませんよね。

 

まずは、ブートキャンプの無料体験から気軽に始めてみるのをおすすめします。受講後には「HTML」や「CSS」が簡単に思えるかと思います。

 

まとめ