Web系の記事を書いているWebデザイナーやエンジニアの方は、WordPressなどのブログ記事にソースコードを埋め込みたいといった事がありますよね。
WordPressであれば、コード埋め込みは「Crayon Syntax Highlighter」プラグインが人気ですね。(私も過去記事で使用しています)
Crayonはビジュアルエディタから簡単に使用できるのが便利ですが、一方で「HTML・CSS・JSを組み合わせての使用」や「デモ表示」など痒い所に手が届かない部分も。
さらにプラグインは、サイトの表示速度に影響を与えたり、不要なページでも常に読み込みがされていたりするので出来れば避けたいところ。
そんな時、WordPressなどブログの記事内でのコード表示を助けてくれるのが、「CodePen」です。
CodePenを使うメリット
CodePenの良いところは、
- プラグイン不要なので軽い
- HTML,CSS,JavaScriptに対応
- コードをタブで切り替えて確認できる
- デモ表示つきでアニメーションなども表示可能
- 設置が簡単
などです。CodePenのデモ表示機能があれば、いちいちキャプチャを撮ったりGIFを作成したりしなくて良くなりますね。
ということで、下のデモをご覧ください。
See the Pen codepen-test by YUU (@webjo_yuu) on CodePen.
CodePenも有名なので、見たことがある方も多いでしょう。
設置したあと、ブログを訪れたユーザーが直感的に操作できるのも魅力です。
それでは、CodePenの使い方を見ていきましょう～
CodePenにユーザー登録しよう
CodePenの登録は2分くらいで済むので、ちゃちゃっとやってしまいましょう。
1.CodePenのホームページを開く
CodePenにアクセスします。
2.画面右上の「Sign Up」をクリック
3.好きな方法で登録
SNSアカウントで登録が簡単で早いですが、使用したくない場合はEmailからの登録も可能です。
選択すると、各SNSのログイン画面に移るか、ログインしている場合はそのまますぐ登録されますので、表示名などを確認して登録完了です。
CodePenを使ってみよう
CodePenは使い方も簡単。
サインインしたら、右上の「Create」をクリックします。
あとは自由に打ち込んでいくだけです。
「Save」を押すとマイページに保存されて、後から呼び出し・上書きが可能なので便利ですよ～！
CodePenのコードを埋め込もう
完成したCodePenのコードをWordPressやブログの記事内に埋め込むことができます。
こちらもやり方は超簡単。
画面右下の「Embed」をクリックします。
出てきたポップアップの右下「HTML(recommended)」が選択されている状態で、「Copy & Paste Code」に表示されているコードをコピーします。
あとは、WordPressやブログのテキストエディタに貼り付けるだけです。ビジュアルエディタに貼り付けないように注意してください。
これだけで埋め込みが完了です！
ちなみに、プラグインを入れて上記画像の「WordPress Shortcode」のコードを貼り付けるとビジュアルエディタで使用できますが、それだけの為にプラグインを増やすのはもったいないのでテキストエディタで貼り付けましょう！
どちらも貼り付けるだけなので。
おまけ：CodePenのテーマの変更
CodePenではテーマの色をある程度カスタマイズできますので、その方法を簡単に説明します。
自分のアイコンをクリックし、でてきたメニューの「Embed Theme Builder」をクリックします。
カスタマイズ画面がでますので、そこで自分好みに変更しましょう。
無料ユーザーは「Default」テーマ1つだけカスタマイズが可能です。
「+Create Theme」って光ってたので押したら無料ユーザーは1つだけですよ～って言われちゃいました（↓事例）
まとめ
CodePen、とても使いやすくて見やすくて便利ですよ！
簡単なので使ってみてくださいね～