アルページウェブサイト開発情報メディア【サムネイルに便利】ソースコードを画像化できるWebサービス「Instacode」2019.11.11プログラムのサンプルコードを紹介しているブログだと、サムネイル・アイキャッチ画像に悩んだりしませんか?アイキャッチ画像を設定している方は、こんな感じのPixabayやPhotoACなどのフリー画像を使ってますよね。slider=8]でも、どうせならオリジナルの画像を使いたいという場合もあるでしょう。作る技術・時間が無いこういう方がほとんどでしょう。この記事のアイキャッチもInstacodeで作成していますよ。(この画像です)自動的にシンタックスハイライトが適用されるため、とてもグラフィカルなプログラム画像を生成できます。対応言語は非常に多く、かなりマイナーな言語にも対応しています。驚くことにBrainf*ckにも対応していますよ「HTML+PHP」「CSS+Ruby」といった複数言語を組み合わせたソースコードの画像化も可能です。Instacodeの使い方まずは公式サイトにアクセスしましょう。Instacodeinstaco.deInstacodeはGithubと連携することで過去に作成したソースコード画像を管理できるなります。必要な場合は連携しておいてください。表示されている大きなテキストボックスにプログラムを書き込みます。次にシンタックスハイライトの種類と言語を選択して[Proceed]をクリックします。待つと画像化されたソースコードが表示されます。この画面で位置変更や回転などの編集を行います。画像の上でドラッグすることで位置変更などを行えます。移動と回転を同時に行うことはできません。位置変更・回転を切り替えたい場合は、編集画面右上の[Move・Rotate]をクリックしてください。編集し終わったら[Publish]ボタンを押して編集を加えた状態の画像を生成します。anonymously]を選んでください。すると、生成された画像が表示されます。あとは画像を右クリックして保存するだけです。スクエア(正方形では困るんだけどアイキャッチにスクエア画像を使うサイトなんてあまりありませんよね。当サイトもスクエアではなく1200×800の横長画像を採用しています。いう場合は生成したあとの画面にある[Wallpaper]をクリックしてください。ここでは様々なサイズの画像生成することができ、横長画像の生成も自由自在です。縦長画像も出来ますよ。変更内容を瞬時に保存されます(generateボタンに意味はありません)。納得いくサイズを見つけたら右クリックでダウンロードしましょう。1つだけ注意Instacodeは非常に便利なサービスではありますが、残念ながらSSLに対応していません。Instacode上で実際に使用しているパスワードなどの個人情報は入力しないようにしましょう。Githubとの連携時はSSL対応済みのGithubサイトで行うので、連携に関しては心配しなくて大丈夫ですよ。まとめオリジナル画像にこだわりたい方にはとても相性の良いサービスです。なんといっても無料ですし、どんなプログラミング言語でも使えるのが強いですね。アイキャッチ画像のオリジナル声に悩んでいる方はぜひ使ってみてください。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。アルページ.ホーム検索タイトルとURLをコピーしました。