【これだけ】無料プログラミングスクールおすすめ3選を解説するよ

【超簡単】ブログにHTML/CSSコードを乗せる時の具体的なやり方と手順(Gist)

こんにちは、最近アニメのことしか書いてない悠才(@yusai0713)です。

コーディングを勉強するにあたって、どうやってHTML/CSSコードをブログに張り付けたらいいだろう?と考えたことがあったので、この際忘れないようにその方法をまとめておこうと思います。 

ブログでHTML/CSSのコードを載せたいという方は、本記事を参考にしてみてください!

GithubにあるGistという機能を使う

Githubというソースコードを管理する便利なサービスがあるのですが、 その中にあるGistという機能を使ってブログにソースコードを表示します。

Gistは簡単に言うと、単一もしくは少数ファイルで済むような簡単なソースコードを共有する機能のことです。

Gistで新規ファイルを作成し公開用のファイルとして保存することで、公開用のコードが生成されます。

あとはそれをブログに張り付ければ、HTML/CSSコードをブログに綺麗に表示できると言うわけです。  

 

画像付きで手順を解説

まず、Githubに登録しておいてください。

登録するだけで大丈夫です。

 

名前、Eメール、パスワードを入力すれば登録は完了しますので、 ちゃっちゃっとやっちゃいましょう。

登録後ログインしたら、下の画面のGistってところをクリックして下さい。

 

 

その次は、下記の①~③を入力して、Update public gistをクリック。 ※ソースコード名や説明の欄は、後々管理しやすいように書いておきましょう。

 

 

以下の画面に切り替わるので、Embedという欄にあるコードをコピーして、ブログのテキスト画面に張り付ければ完了です。

 

上記の手順がしっかりできていれば、こんな感じになります。

 

 

お疲れさまでした。簡単でしたよね?

これならすぐやり方を覚えられると思います!  

 

まとめ

今回の記事はGithubにあるGistという機能を使って、ブログにHTML/CSSコードを表示する方法を説明してきました。

今回の方法は簡単に導入できるので、ブログにコード表示をしたい場合はぜひ使ってみてください!

僕個人的にはデザインが微妙だなと思うので、ほかの方法もこれから模索してみたいと思います。

もし良い方法を見つけたらこのブログでまたメモ書きしていきますので、ぜひご贔屓に!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA