【サムネイルに便利】ソースコードを画像化できるWebサービス「Instacode」

プログラムのサンプルコードを紹介しているブログだと、サムネイル・アイキャッチ画像に悩んだりしませんか?

アイキャッチ画像を設定している方は、こんな感じのPixabayやPhotoACなどのフリー画像を使ってますよね。

[smartslider3 slider=8]

でも、どうせならオリジナルの画像を使いたいという場合もあるでしょう。

  • オリジナル画像を作りたいけど作るのが面倒
  • 作る技術・時間が無い

こういう方がほとんどでしょう。

ですが、そんな方たちでも簡単にプログラム紹介ページで使いやすい画像を作成できる「Instacode」というWeb サービスがあります。

この記事のアイキャッチもInstacodeで作成していますよ。(この画像です)

自動的にシンタックスハイライトが適用されるため、とてもグラフィカルなプログラム画像を生成できます。

対応言語は非常に多く、かなりマイナーな言語にも対応しています。驚くことにBrainf*ckにも対応していますよ

「HTML+PHP」「CSS+Ruby」といった複数言語を組み合わせたソースコードの画像化も可能です。

Instacodeの使い方

まずは公式サイトにアクセスしましょう。

InstacodeはGithubと連携することで過去に作成したソースコード画像を管理できるなります。

必要な場合は連携しておいてください。

表示されている大きなテキストボックスにプログラムを書き込みます。

次にシンタックスハイライトの種類と言語を選択して[Proceed]をクリックします。

しばらく待つと画像化されたソースコードが表示されます。この画面で位置変更や回転などの編集を行います。

画像の上でドラッグすることで位置変更などを行えます。ただし、移動と回転を同時に行うことはできません。

位置変更・回転を切り替えたい場合は、編集画面右上の[Move・Rotate]をクリックしてください。

編集し終わったら[Publish]ボタンを押して編集を加えた状態の画像を生成します。
Githubと連携しない場合は[Publish anonymously]を選んでください。

すると、生成された画像が表示されます。あとは画像を右クリックして保存するだけです。

スクエア(正方形では困るんだけど

アイキャッチにスクエア画像を使うサイトなんてあまりありませんよね。当サイトもスクエアではなく1200×800の横長画像を採用しています。

そういう場合は生成したあとの画面にある[Wallpaper]をクリックしてください。

ここでは様々なサイズの画像生成することができ、横長画像の生成も自由自在です。もちろん縦長画像も出来ますよ。

変更内容を瞬時に保存されます(generateボタンに意味はありません)。納得いくサイズを見つけたら右クリックでダウンロードしましょう。

1つだけ注意

Instacodeは非常に便利なサービスではありますが、残念ながらSSLに対応していません。

ですので、Instacode上で実際に使用しているパスワードなどの個人情報は入力しないようにしましょう。

Githubとの連携時はSSL対応済みのGithubサイトで行うので、連携に関しては心配しなくて大丈夫ですよ。

まとめ

オリジナル画像にこだわりたい方にはとても相性の良いサービスです。なんといっても無料ですし、どんなプログラミング言語でも使えるのが強いですね。

アイキャッチ画像のオリジナル声に悩んでいる方はぜひ使ってみてください。

コメント

タイトルとURLをコピーしました