ブログ プログラミング

コピペでOK!Gistから読み込んだソースコードをおしゃれにカスタマイズする方法

更新日:

今回は、プログラミングのソースコードをかっこよく、オシャレに表示したい!!

という方に向けて、デフォルトの表示からCSSでカスタマイズする方法を紹介します。

完全コピペでOKですので、ぜひ参考にしてみてください。

以前にこちらの記事で、Gistからソースコードを読み込んでWordPressに表示する方法をまとめました。


今回は主にWordPressを使用してサイトを作成している方を例に説明しますが、

CSSのコピペなので、ぶっちゃけどのサイトでも問題ありません。

WordPressを使用していない場合は、下記手順のWordPressでCSSを追加するは読み飛ばしてください。

 

まず初めにデフォルトの場合はこのようになっていると思います。

これを最終的にこのようにします。

かなり見やすくなりますよね?

余計な装飾が省かれ、ソースコードがシンプルでわかりやすくなります。

以下コピペするCSSです。

CSSのコピペ

下記のCSSをそのままコピペしてください。

作業はこれだけで完了です。

くらいん

ほぼやることないやん笑

ここからは、WordPressをお使いの方用にCSSの追加方法を紹介しますね。

 

また今回のカスタマイズは下記のサイト様を参考にさせていただき、

そこから更に自分用に少し修正を加えたものになりますのでここでご紹介させていただきます。

WordPressでCSSを追加する

まず、ご自身のWordPressの管理画面から

外観>カスタマイズ

を選択して、デザインカスタマイズ画面を開いてください。

カスタマイズ画面が開けたら、1番下に追加CSSという項目がありますので、

そちらにコピペして保存をすれば完成です!

WordPressはCSSの追加が楽でいいね
クライン

 

Gistからソースコードを読み込む機会がある方はぜひ参考にしてみてください!

デフォルトのままでもおしゃれですが、

シンプルが好き!という方やこのままだと自分のブログの雰囲気と合わないなぁという場合は

一度コピペしてお試しいただくことをお勧めします。

よく読まれている記事

1

  現在5年目のエンジニアで26歳です。 今回は20代の現役エンジニアとして、自分も含め転職について考えている方に向けて20代エンジニア転職に完全特化したおすすめのサービスを3つ紹介していき ...

2

これからエンジニアになりたい、プログラミングを使えるようになりたいという方に向けて 山のようにあるプログラミングスクールの中から、特におすすめなスクールをタイプ別に逆引きで3つ紹介します。 &nbsp ...

3

みなさんはを使っていますでしょうか。   本記事を見ていただいているということは、   プログラミングの勉強でを使うことに興味がある、 もしくはこれから動画を購入したいけどどれを買 ...

-ブログ, プログラミング
-, , ,

Copyright© クラインの備忘壺 , 2019 All Rights Reserved.