ららです。


カスタマイズの記事なんかを書いていると、記事の中にコードを書きたい事、ありますよね。

私の場合も、こんなふうにコードを表示させてたんですが、


┐(´д`)┌ とにかくこのコードの書き方が面倒臭い!


CSSならいいんですが、このコードがHTMLだと、「<」や「>」という記号がつきもの。

この「<」や「>」という記号は、記事の中に絶対に書いちゃいけない記号なんです。
うっかり書いてしまうと、その部分をHTMLだとワードプレスが勘違いして、表示が崩れて泣く羽目に^^;

なので、「<」や「>」という記号を書きたい場合は、
直接書かずに暗号みたいなものを書かなきゃいけないんですよね。


ちなみに上の記事の場合は、実はこんなふうに書いてるんですよ。

※クリックすると拡大します。


(;´Д`)もうこんな想いはコリゴリ!
と思い、プラグインを導入して楽~にコードを挿入しようと考えました。


プラグインは難しい;;

ワードプレスの記事にコードを表示させるのに、一番有名なプラグインは「SyntaxHighlighter」というものらしいんです(2018年5月現在)。

なので最初は迷わずコレを導入しようと考えたのですが、
どう~~もコレの使い方が良くわからない。

ググって解説を読んでもなぜか私には理解できませんでした;;


それからもう1つ、「Crayon Syntax Highlighter」というプラグインも有名なんだそうですが、
このプラグインは現在は更新が止まっているそうで、「要注意」とあちこちのサイトに書いてあります。

そう聞いてしまうと強行はできないのが世の常ですよね~…^^;


コレなら簡単だった!

というわけでプラグインは諦めて、こっちのツールを利用することにしました。


プラグインとどう違うのか?

プラグインは、直接あなたのワードプレスにインストールして使いますよね。

だから

  • ときどき重たくなったり
  • プラグイン同士が干渉して動きがおかしくなったり
  • プラグインの使い方を覚えないといけなかったり

という面倒なことが起きます。

まぁこれは、プラグインの一般的な欠点です。


でもこの「GitHubGist」は、
動画をいったんYouTubeにアップして、その動画を記事内にコードで共有するような感覚で利用できるんです。

YouTubeの動画が、コードになったと思ってください。


…という素晴らしいたとえは、こちらのブログでお勉強させていただきました。わかりやすい解説をありがとうございます。





なので、

  • ブログが変わってもプラグインを入れなおさず済みますし
  • 重たくなることも干渉することもなく
  • よくわからないプログラムをインストールすることもありません。

さっそく使ってみましたが、カンタンでしたよ^^


まずは無料登録から

まずはこちらのサイトに行って無料登録をします。


all英語のサイトなので「げ。」と思いますが、

  • ユーザー名
  • メールアドレス
  • パスワード

を入力するだけで登録が終了します。


コードの埋め込み方

新規でコードを登録するには、まずココをクリックします。


ここに入力していきます。


A:このコードの説明文です。入力なしでも大丈夫です。
B:このコードの名前です。これは必須です。
C:コードの本文です。もちろん必須です。


入力したら、公開ボタンを押します。左が限定公開、右が一般公開のような感じです。
私は限定公開を選んでます。


このコードをワードプレスの記事に埋め込みます。


実際に埋め込んだのがこちら。可愛いでしょ^^



右上のここをクリックすると、今まで登録したコードが全部見られます。


あとの機能は触りながら覚えてください。英語だけど難しいことは書いてません。


コード以外にも使えそう

調べてみたら、Gistとは「要点」と言う意味だそうです。
決して「コード」という意味ではないので、つまりこれは、コード以外の定型文などにも使えるんじゃないかな?と思います。

実際、日本語を入力しても問題ないようでしたよ。



また新しいツールを見つけましたね。
アイデア次第で活用できそうです^^