ソースコード共有Webサービスは、「JSFIDDLE」を使っていましたが、最近「CodePen」を貼り付けてソースコードを紹介しているサイトや、「『CodePen』にはクールなソースが転がっている」と見るようになったので、引っ越ししてみました。
実際に貼り付け作業をしたときに、なかなか苦戦したので、改めて、おさらい的メモをしていこうかと思います。
CodePenの貼り付けは、「WordPressのプラグイン」と「CodePen公式サイトから取得できるショートコード」を使って貼り付けます。
ということで今回はWordPressのプラグイン「CodePen Embedded Pens Shortcode」を使った、CodePenのソースコードを貼り付ける方法を説明していきます。
あっ、バージョンによって異なる場合があるので、ご注意とご了承のほどを。
まずはプラグインのインストール
WordPressプラグインの基本的なインストール操作は割愛・・・かいつまんでサラサラと行きます。
新規追加で、検索する場合は「CodePen Embedded Pens Shortcode」で検索しましょう。
ダウンロードしてWordPressにインストールする場合は
「WordPress › CodePen Embedded Pens Shortcode « WordPress Plugins」
よりダウンロードして、インストールしてください。
プラグインの設定
インストールが完了したら設定ですね。
ですが、特に設定する必要はありません。
初期設定の空欄、もしくは、0で問題ないです。
ここでの設定は、有料機能の1つ、貼り付けるときのテーマ設定で複数のテーマを持っているときに必要になってくる設定だと思われます。
ただ貼り付けるだけならば、これで設定は完了です。
単純にショートコードを取得して貼り付ける
まず、貼り付けたいソースコードを選びます。
選んだソースコードの画面が開いたら、ブラウザの下の方に【Embed This Pen】というボタンがあるのでクリックします。
小さめで分かりづらいです。
【Embed This Pen】ボタンをクリックすると、実際に貼り付けるソースコードのカスタマイズ画面が表示されます。
単純に、貼り付ける作業だけでしたら、CodePenのアカウントの取得や有料メンバーにならなくても貼り付けることができます。
右上の方にショートコードが表示されます。
っと、その前にショートコードのそばにある【WordPress Shortcode】が選択されているか?の確認を忘れずにしましょう。
ちなみに、【HTML】が選択されていると、ソースコードへのテキストリンクを貼り付けることになります。
テキストリンクになるので、もちろん、WordPress以外のサイトでも貼り付けることができます。
あとは、取得したショートコードをコピペすればOKです。
じゃあ、複雑に貼り付けってあるの?
貼り付けるソースコードのカスタマイズ画面では、線やリンクの色など変更したり、初期表示でHTMLやCSS、実行画面など、どれを表示するか選ぶことができます。
「テーマを設定する」ということになるのですが、このテーマを設定したときに、テーマをセーブしなければ有効になりません。
※主要的なものを、ざっと。
「Default Tab」・・・初期表示はCSSか、HTMLか、実行(Result)画面か など
「Border」・・・外枠を表示するか、細い線か、太い線か
「色の部分」・・・各種カラーの選択
「Save Theme」・・・テーマを設定・セーブ
テーマ設定を有効にするには、CodePenのアカウントを持っていないとセーブできませんし、有効にすることができません。
アカウントさえ持っていれば、テーマは1つ(Defaultテーマ)ですが、自分の好きな色などを設定して貼り付けることができます。
また、有料メンバーは、複数のテーマを設定して管理することができるようです。
カスタマイズ画面で設定を変更すると、過去にWordPressに貼り付けたCodePenの全てに適用されます。
ブログにあった色を選択して、かっこよく貼り付けちゃってください。
あとがき
今回はWordPressユーザー限定の記事になってしまいました。
WordPress以外のサイトでは、テキストリンクを貼り付けるしかないようです?
もしかしたら、他に方法があるのかもしれません。
そういった点では、WordPress以外のブログをやっている人で、ソースコードを貼り付けて紹介したい人は、「CodePen」よりも「JSFIDDLE」を使った方がいいのかもしれませんね。