【超簡単!!】ブログにプログラミングコードを埋め込む方法

 

当ブログは完全未経験からプログラマーを目指す人のためのブログです

 

f:id:yoshitokamizato:20180816215917p:plain

できたんですよ!!ブログにプログラムのコードを埋め込むことが!!

 

他のブロガーさんが書いた「はてなブログのカスタマイズ系」の記事を見ると、よくプログラムのコードが記事に埋め込まれているのを見てたんですけどね。

 

「これ、かっこいいなぁ〜!!」

 

ってずーっと思ってたんですよ。だから埋め込めるようにしました。

 

 

 

かっこよくないですか〜?このコードの埋め込み!!だってコピペするだけで他の人も使えるようになるんですよ??

 

 

実はこのGist、ただ単にブログにコードを貼り付けられるだけじゃないんです。

 

どっちかというと、これを使う一番のメリットは「自分が書いたプログラムコードをGistに保存できる」という点にあるんです。これで簡単なプログラムであれば、Gistに保存しておけばいつでも使えるようになります。綺麗なロジックを組むことができたら、メモがわりにGistを使うのもいいですね。

 

それに自分が書いたコードを、読者の皆さんがコピペするだけで使ってもらえるようになるなんて素敵じゃないですか!つまり「自分自身のプログラミングスキルを人の役に立てることができる」ってことなんです!これから便利なコードをたくさん書いて、どんどん使ってもらえるように勉強頑張りたいと思います。

 

ついでなので、この「Gitst」の使い方についてもさらっと説明します。簡単ですよ〜!!

 

まずはGistのアカウント作成

まずは登録をしなければいけませんね。登録は簡単で「アカウント名」と「パスワード」と入力するだけ!

 

こちらのサイトからどうぞ↓

gist.github.com

f:id:yoshitokamizato:20160415193125p:plain

 

Gistの使いかた

アカウントを作ったら、まずはトップページの上の方の「Gist」をクリック!

 

f:id:yoshitokamizato:20160415193819p:plain

 

次に好きなファイル名を決めます。

 

f:id:yoshitokamizato:20160415193934p:plain

 

そして、この部分にコードをコピペ!

 

f:id:yoshitokamizato:20160415194049p:plain

 

コードを貼り付け後、右下のどちらかのボタンを選択。非公開用なら「左」、公開用なら「右」です。

 

f:id:yoshitokamizato:20160415194316p:plain

 

そうすると、埋め込み用のコードが出てきます。これをコピペ。

 

f:id:yoshitokamizato:20160415194525p:plain

 

それをはてなブログの記事作成画面で「HTML編集」に切り替えて、表示させたい場所に貼り付ければオッケー!はい簡単!!

 

f:id:yoshitokamizato:20160415194821p:plain

 

「見たままモード」だと、コードを貼り付けても見かけ上は何も表示されません。でも、慌てないでください!プレビューで見てみるときちんと表示されます!お試しあれ!! 

 

 まとめ

この「Gist」を活用して自分が開発した「役にたつコード」を貼り付けて、CSSとかJavascriptとかカスタマイズ系の記事書けるようになったら、なんだかかっこいいですよね!!

 

ぼくは、そういう記事を書けるブロガーさんのことめっちゃ尊敬してました!いや、今でもしてます。いつもお世話になってます、ありがとうございます。

 

でも、これから先、自分自身がプログラミングを勉強すれば、カスタマイズ系の記事を書く側に回ることができるかもしれません。

 

自分の書いたコードが人の役に立てれば、とても嬉しいですよね。その第一歩を踏み出せただけでも、今はめっちゃ満足してます。

 

これからプログラミングの勉強がんばろう。どんどん書ける記事の幅が広がっていきますね!!楽しすぎる。