2019年10月10日SHAREツイートシェアはてブLINEPocket今更ながら、HTML、CSS、JavaScriptなどをプレビュー表示できるWebサービス「CodePen」のご紹介。CodePenは、ブラウザ上でソースコードを書いてプレビュー表示しながら編集できたり、他の方々のコードをダウンロードできたり、自分のコードを公開できたりと、かなり便利なサービスです。便利なのは、「WordPressの記事でソースコードを表示できる」という、Webサイトへのソースコード埋め込み機能なんじゃないかと思っています。HTMLコードをWordPressで記事内に書くと、当然ながらソースコードを紹介したいのにタグ等は表示されません。ビジュアルエディターで書けば表示はできますが、改行がpタグで囲まれて出てくるのですんごい行間空きます。Evolved」というプラグインを使い載せてきました。他の方々もきっと何かしらのプラグインを使っていると思います。同じソースコードの紹介なら、断然CodePenのが良いです!CodePenが各種プラグインよりもおすすめできる理由と、CodePenの使い方をご紹介します。プラグインではなくCodePenをお勧めするのかを先に書いていきます。1.ページにかかる負荷が少ないプラグインを使うと、それを動作させるスクリプトやCSSが読み込まれて多少なりとも表示速度に影響を及ぼします。CodePenは非同期で読み込んでくれる為、負荷が少なく済みます。2.プレビュー表示ができるソースコードを表示するだけでなく、その場で「Result」をポチっとすれば実行結果が表示されます!これかなり便利ですよね、今までやってた、コードを書いて、デモページを作るか画面キャプチャを貼るという作業が無くなります!3.自分でも確認しながら書けるプレビュー表示、ソースコードの結果の紹介にももちろん便利ですが、自分で「あ、このソースコード紹介しよ。」って思った時にも重宝します。書いてみたもののうまく動かなかったりという事があるので、即時確認できるとやっぱり便利。CodePenのデメリット特に見当たらないのですがデメリットを挙げるとすれば、記事内に記載するのではなく埋め込む形なので、記事の文字数としてカウントされず、キーワードとしても検索対象にはなりません。コード自体を検索する人はそんなにいないと思うし、もしいたらその人、書けてるんでね、紹介するコード。そんな方にはこの記事自体不要だろうから引っ掛からないとしてもたいした問題ではないですね。登録方法では、便利でオススメなCodePenの登録にいきましょう。Email」をクリックSNSでのアカウントでも登録できますが、今回はメールアドレスでのアカウント登録を。フォームの入力ボタンの下に、登録用のフォームが表示されます。PASSWORD:パスワードを入力します。セーブプロフィール入力欄になりますが、ここはとりあえず何も設定しなくても大丈夫です。後からも変更できます。ちなみに、メールアドレスでGravatarを設定していたら、CodePenのアバターにも反映されます。そのまま「Save&Continue」をクリック。登録が完了したら、早速使ってみましょう!WordPressの記事に、CodePenで書いたソースコードを載せてみます。テキトーにソースコードを書いて・・・あ、ちなみに左のギアアイコンで、Preprocessorも選択できます。CSSは、SCSSの選択もできるし、リセットCSS、ノーマライズCSSの選択もできます。書けたら「Save」(Saveは途中でもこまめに行っておきましょう!)します。コードが完成したら、右下にある「Embed」をクリック。HTML(recommended)タブからコードをコピーします。ちなみにiframeでも埋め込みには問題ありません。Shortcodeだと、別途プラグインが必要になります。埋め込む時は、コピーしたコードをテキストエディターに埋め込み。できたっ!これでCodePenによるソースコードの埋め込み完了です。CodePen.さいごにソースコードを紹介する記事は、間違ってたらまずいのでだいぶ調べて、考えて、無駄の無いように書こうとしますよね。万一間違ったコードを書いたら、読んでくれた人にはご迷惑をおかけしてしまいますが指摘してもらえる事もあります。良いソースコードがあった場合も教えてもらえたりします。成長できますね!インプットしたら、アウトプットしましょう。自分はアウトプットなんて・・・と思っていてもガンガンアウトプットしましょう!そのアウトプットには、WordPress+CodePenがとっても便利ですよ。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。前の記事スポーツ界の不祥事ラッシュ。iPhoneアプリ版たきおうぇぶめも。自分の備忘録も兼ねたウェブ系のちょっとした情報や、育児、ネットでの稼ぎ方などを発信しております。