- 動画の再生速度を３倍４倍にするChromeの拡張機能をYouTubeに使ってみる
Topics
インフォコネクト最新情報
CodePenをWordPressのブログ記事に埋め込みソースコードを表示する
CodePenをWordPressのブログ記事に埋め込みソースコードを表示する
この記事は公開から1年以上経過しています。
こんにちは、チーフクリエイターのSHOJIです。
突然ですが、以下のようにソースコードを表示させたもの、ブログなどでよく見かけますよね。
See the Pen CODEPEN Tips by InfoConnect (@infoconnect-inc) on CodePen.
僕も利用している【CodePen】というWebツールで、ブラウザ上でHTML、CSS、JavaScriptなどのコードを記述し、リアルタイムで表示を確認しながら開発をすることができるものです。
しかも、CodePenの優れたところは上図のように、ソースコードやプレビューをブログ記事などに埋め込んで表示させることができるんです！
そこで今回の豆知識は『CodePenをWordPressのブログ記事に埋め込みソースコードを表示する』と題して、CodePenの登録から使い方、ブログへの埋め込み方法までご紹介したいと思います。
CodePenにユーザー登録（無料）
CodePenで用意したコードをブログに埋め込んで表示するにはユーザー登録（無料）が必要です。
① CodePen公式サイトにアクセスして［Sign Up for Free］をクリックします。
・公式サイト：https://codepen.io/
② ユーザー登録方法を選択します。今回はEmailで登録します。
③ ユーザー情報を入力します。
・Your Name（名前）：ハンドルネームでOKです。
・Choose a username（ユーザー名）：自分の専用URLの一部になります。
・Email（メールアドレス）
・Choose Password（パスワード）：ログインパスワードになります。
④ ユーザー情報を入力後［Submit］をクリックします。
⑤ 登録確認のメールが届くので、本文内の［Click to Verify Email］をクリックします。
⑥ Codepenへのユーザー登録が完了すると、ページの上部に「You've verified your account!」と表示された管理画面に遷移します。
これで、Codepenを利用することができるようになります。
CodePenでコード記述
ユーザー登録が終わったら、CodePenでコードを記述してみましょう。
⑦ 左メニューの［Pen］をクリックして、展開された中の［Pen］をクリックします。
⑧ エディター画面が表示されます。
⑨ HTML、CSS、JavaScriptの各コードを適宜記述すると、下部パネルに反映されます。
ここまでが、Codepenの基本的な使い方になります。
CodePenをWordPressに埋め込む
続いて、作成したソースコードをWordPressに埋め込む方法を見ていきましょう。
⑩ エディター画面右下の［Embed］をクリックします。
⑪ 埋め込み用コードの作成画面が表示されます。
⑫ Default Tabs内の［HTML］をクリックすると上部にHTMLのソースコードが、続けて［Result］をクリックするとソースコード右にプレビューが表示され、この設定がWordPressに埋め込んだ後の表示となります。
⑬ 設定が終わったら、作成画面右下に埋め込み用のコードが表示されているので［Copy Code］をクリックします。
⑭ WordPressの投稿画面にて、コピーした埋め込み用のコードをペーストして完了です。問題なく表示されているか確認してください。
See the Pen CODEPEN Tips by InfoConnect (@infoconnect-inc) on CodePen.
これで、CodePenをWordPressに埋め込むことができました。
あとがき
今回は、CodePenを利用してWordPressにソースコードを表示する方法をご紹介しました。簡単に埋め込めて、かっこよくソースコードを表示してくれるのでCodePenはとても便利です！
ただし、CodePenを利用して表示されたソースコードについては、当然ながらSEOのキーワードとして検索対象にならないので注意しましょう。
また、今回の紹介用に作成したHTMLのソースコードには【Font Awsome】を利用して、CodePenのロゴを表示させていますが、CodePenでFont Awsomeを使うには設定が必要になるので、次回はその設定方法について解説したいと思います。
［Webの豆知識］関連記事
Service
Contact
インフォコネクトに相談してみませんか？
経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください。