わいのりLABO

わいのりLABO

☆漫画・アニメ・ゲームなどについてつぶやきます☆

わいのりLABO

【大ネタ】ソースコードを貼り付ける方法NEXT

f:id:wainori2199:20180405085238j:plain

 

こんばんは。

ソースコードを貼り付ける方法が分かって感動している、わいのり研究所です。

 

1つ前の記事でお伝えした方法では、JavaScriptソースコードは貼れませんでした。

申し訳ないです・・・。CSSや他のHTMLコードは貼れます。

 

wainorilabo.hatenablog.jp

 

そこで、つばさのーとさんが紹介してくれた2つ目の方法を試してみました。

はてなブログにソースコードを載せる3つの方法 – つばさのーと

 

 

2つ目の方法「Gistを利用して貼り付ける」

これはGitHub Gist」というソースコード共有サービスに「ユーザ登録」して、自分が貼り付けたいソースコードを記述し、そのコピーを記事に貼るという方法です。

 

流れとしてはこんな感じです。

1.「GitHub Gist」のユーザ登録

2.ソースコードを記述(コピー)

3.出来上がったコードを記事にコピー

 

では、順に説明します。

 

1.「GitHub Gist」のユーザ登録

まず「GitHub Gist」にアクセスします。

 

このサイトは英語オンリーなので、こちらのサイト様に助けられました!

英語が苦手なフレンズに贈るGitHub事始め(GitHub公式チュートリアル翻訳) - Qiita

 

このサイト様を参考に進めていただければ大丈夫です。

 

step1.ユーザ名、メールアドレス、パスワードを設定します。

step2.無料プランを選んでくださいね。

step3.アンケートに答えてください。

 

あと、登録したメールアドレス宛にメールが来るので、そのリンク(「Verify email address」)からアクセスし、ユーザ名とパスワードで認証してください。

 

これで登録完了です。使えるようになりました。

 

2.ソースコードを記述(コピー)

次に、こちらのサイト様をご覧ください。

fukafuka295.jp

 

GitHub Gist」にアクセスします。

 

f:id:wainori2199:20180422191646p:plain

 

1.上の2つの欄に分かりやすい名前を付けます。

2.中央の大きな欄に、貼り付けたいソースコードをコピペします。

3.そして、右下の「Create pbulic gist」をクリックします。

  (「pbulic」は「公開の」という意味です。)

 

3.出来上がったコードを記事にコピー

貼り付け用のソースコードができるので、「Embed」に書いてあるコードをコピーして記事に貼り付けてください。(青色反転している部分です。)

 

f:id:wainori2199:20180422191647p:plain

 

 

これを「HTML編集」画面で貼り付けてください。

こんな感じで貼り付けることができます。(長くてすいません・・・)

 

YouTubeCSS

 

コピペ:はてなバージョン

1回ソースコードを作成しておけば、はてな編集画面から簡単にコピペできます。

 

詳しくは、下記「はてなブログ開発ブログ」を参照ください。

staff.hatenablog.com

 

Java Script」も貼り付けられる

というわけで、この方法だと「Java Script」も問題なく貼り付けられます。

こんな感じです。(∩´∀`)∩ワーイ

 

jQuery

 

最後に

この方法は、最初のユーザ登録が面倒ですが、「Java Script」を含んだソースコードを貼り付けたい方にはおすすめだと思います。

 

またまた勉強になりました。

 

では、今回もお付き合いいただきまして、ありがとうございました。