GitHub,Gist

追記(2017年10月)

環境によってはコードが全く見られないようです。

スマホからは見られないがパソコンからは問題なく見える場合と、スマホからもパソコンからも見られない場合があるようです。

追記終わり

 

WordPressの使い方を解説する記事などを書く時に、ソースコードを簡単に貼り付けられると便利ですよね^^

 

ソースコードを簡単に貼り付けるプラグインはたくさんありますが、ワードプレスがどうしても重たくなってしまいます。

それに、もし他のプラグインとの相性が悪かったら不具合が生じてしまいます。

 

こちらの記事では、このような感じ↓に

ブログにソースコードを貼り付け埋め込む方法

プラグインを使わずにソースコードを埋め込む方法を紹介します!

 

 

【プラグイン不要】WordPressブログにソースコードを貼り付ける方法を動画で解説!

WordPressの画面で説明するほかに、GitHubにもアクセスしてアカウント登録をします。

【プラグイン不要】WordPressブログにソースコードを貼り付ける方法を画像で解説!

貼り付け用コードを取得

GitHubにアクセス

ブログにソースコードを貼り付け埋め込む方法

Username

好きな名前を入力(ただし、既に使っている人がいるとエラーになり使えないので、違う名前にして下さい)

E-mail メールアドレスを入力
Password
  • 7文字以上
  • アルファベットも混ぜる
  • 数字も混ぜる

という縛りがありますので「アルファベットのみ」や「数字のみ」はNGです。

 Sign up for GitHub  をクリック

 

ブログにソースコードを貼り付け埋め込む方法

 Gist  をクリック

 

ブログにソースコードを貼り付け埋め込む方法

Gist discription

説明文を入力。(必須ではないですが入力しておくと自分が管理しやすいのでオススメです)

ここでは「デモ用」と入力しています。

Filename including extension

ファイル名(拡張子まで入力します)
拡張子:.phpや.htmlなど、ファイル名の最後の部分

ここでは「demo.php」と入力しています。

本文の枠 ソースコードを入力
「作成」ボタン

下記どちらかをクリック。(どちらでも構わないと思いますが私は左のボタンをクリックしています)

左のCreate secret gist:URLを知らせた人だけに公開
右のCreate public gist:全ての人に公開

 

 

ブログにソースコードを貼り付け埋め込む方法

青枠のところが「Embed(埋め込み)」になっていることを確認した上で

コピーのマーク(上図の赤枠部分)をクリック

 

これで、コードが取得(コピー)出来ました^^

あとはWordPressにペーストするだけです。

WordPressに貼り付け

下図の青枠のところにソースコードを貼り付けるという前提で解説します☆

WordPressの記事作成画面で

ブログにソースコードを貼り付け埋め込む方法

「テキスト」タブをクリック

 

ブログにソースコードを貼り付け埋め込む方法

先ほどコピーしたコードを貼り付け

「ビジュアル」タブをクリック

 

ブログにソースコードを貼り付け埋め込む方法

こんな感じで↑ 四角いマークが出来上がっています。

2回目以降の操作方法

2回目以降は

ブログにソースコードを貼り付け埋め込む方法

 New Gist  というところをクリックしてコードを作成します。

 

それ後のやり方は1回目と同じです☆

ブログに貼りつけたソース埋め込みの高さを調整する方法は?

長いソースを埋め込むと、貼り付けたブログ記事は当然のことながら長〜くなってしまいます。

 

こちらの設定↓を1度しておくだけで、長くない(中でスクロールする)状態にすることができてオススメです^^

ブログに貼りつけたソース埋め込みの高さを調整する方法!簡単オススメ!

さいごに

GitHubのGistでソースコードをWordPressに貼り付ける方法は、とても簡単です^^

 

それにプラグインを入れる訳ではないためワードプレスが重くなることもなく、本当にオススメです☆

 

ぜひ活用してみてください!