Zensen.プログラミング、カメラを中心になんでも書く雑記ブログです。7雑記*はじめに!!お疲れ様です。!ブログにソースコードを載せる方法はたくさんあってどれがいいのか困りますよね。私も色々試したのですが、ページが重くなってしまったり、デザインが気に食わなかったりと、なかなか満足するものに出会えませんでした。デザインも綺麗で、変更が簡単で、軽いソースのエディタを!!スポンサードリンク*その名もCodePen!!ご存知でしょうか?CodePen!CodePenはHtml,css,JavaScriptの3つの言語に対応したソースコードのプレビューツールです。CodePen.こっちはソースも一緒に表示!こんな表示の切り替えもちょー簡単にできるのです。CodePen.もちろんレスポンシブデザインにも対応しているので携帯でも綺麗に見えます!*おすすめポイント!!他のソース表示に比べていいなーと思ったところは以下のポイントです。プログに載せるのが簡単コードを書いて、コード下の「Embed」ボタンを押すと埋め込み用のコードが取得できるので、それをブログに貼り付けるだけで画面に表示ができます。コード取得の際に、画面の表示を設定できるので、貼り付けたい場所に応じて表示の高さや表示する内容(結果だけなのか、結果とソースを一緒に表示するのかなど)を選択することができます。今時なフラットデザインで綺麗です。どんなブログにでも合いそうなデザインなので、使い勝手がいいと思います。デザインを簡単に変更できるのでブログのメインカラーに合わせることもできるので汎用的です。SassやjQueryなどのライブラリも簡単に使えるhtml,css,JavaScriptのプレビューができるエディターなので、それ関係のプラグインはわざわざ呼び出さなくてもクリック一つで対応できます。使いたいプラグインはCDNなどで別に読み込むことも可能です。以下のサイトにアクセスします。UP」をクリックしコース選択画面に遷移します。すべて英語でビックりしますが、下の方に無料会員のコースがあるので安心してください。ややこしいのはこちらですかねプロフィース名は個人の名前です。後での変更も可で日本語も可。URLの一部になります。Pen」ボタンを押すとエディター画面へ遷移します。コードを書いたら下の「Embed」ボタンを押すと以下のような画面が表示されるので、表示する情報を調整した後に、コードをコピーします。*以上!!色々試した結果、ブログにソースコードを載せる際にはCodePenが一番軽くて簡単でした。早く起きた土曜日の朝に聞きたい音楽たち。me!!どうも!ぴーすけと申します!!←詳しく自己紹介このブログは、ByUZensen.(バイウゼンセン)といいます。プログラミング、カメラ、音楽、生活、バイクなどの記事を中心に更新しています。管理者はぴーすけと申します。某ECサイトでシステムエンジニアをしています。仕事ではjavaでプログラミグをしていますが、JavaScriptが好きで、個人的にゲームを作ったりしています。他にはX-T2で写真を撮ったり、ギターで遊んだりしています。