かんろぐ Written by kan

【ManablogCopy】Code Penを埋め込む方法【ソースコード】

BLOG SEO

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート

こんにちは、かんです。

Manablog Copyに「»CodePen」を埋め込む方法を解説します。
下記のようなものですね。

See the Pen
Untitled
by かん @ WEB制作×オフもく会 (@minimal_kan)
on CodePen.

Manablog Copyにはソースコードを埋め込むことはできるのですが、CodePenの場合は自作する必要があります。
これらを解説していきます。

それでは、早速見ていきましょう!

ManablogCopyを詳しく見る

 

 

本記事の信頼性

  • Manablog Copyでブログ収益40万突破
  • Manablog Copyのデバック担当(バグ・機能面全般のチェック)
  • Manablog Copyのブログカスタマイズ相談会を1年間開催

Code Penを埋め込む方法を解説

まずは、下記の通りの順番で行います。

  • ①. </body>タグ前にJavaScriptを読み込ませる
  • ②. style.cssにソースコードを記述する
  • ③. 記事内でクラスで囲む

簡単ですね!順番に見ていきます!

①. </body>タグ前にJavaScriptを読み込ませる

まずはソースコードを記述します。

  • 「外観」→「テーマエディター」→「footer.php」を選択します。


画像の通りに、下記のソースコードを埋め込みます。




こちらを埋め込むことで、ブログ内でCodePenが使えるようになりました。

②. style.cssにソースコードを記述する

次に、style.cssにソースコードを記述します。
Manablog Copyの場合、そのまま埋め込むと横幅がはみ出てしまうので調整します。

  • 「外観」→「テーマエディター」→「style.css」を選択します。


画像の通りに、下記のソースコードを埋め込みます。


/* CodePen */
.codepenWrapper iframe{
	width: 90%!important;
}

これでOKです。

③. 記事内でクラスで囲む

あとは投稿記事内で出力してあげましょう。
<div class="codepenWrapper"></div>でCodePenのソースコードを囲むだけですね。


<div class="codepenWrapper">
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNyeZpd" 
data-user="minimal_kan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid;">
  <span>See the Pen <a href="https://codepen.io/minimal_kan/pen/oNyeZpd">
  Untitled</a> by かん @ WEB制作×オフもく会 (<a href="https://codepen.io/minimal_kan">@minimal_kan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
</div>

また、AddQuickTagでいつでも使えておくようにすると便利です!

これで完成です!\(^^)/

CodePenの埋め込み方法も紹介

CodePenをWebサイトに埋め込む方法

  • ①.サイトに埋め込みたいPenを開く
  • ②.「Embed」をクリックする
  • ③.ビジュアルの設定をする
  • ④.埋め込みコードをサイトにコピペ

初めての方はアカウント登録からどうぞ!
»CodePen

他にもカスタマイズしたい方へ

ほかにもカスタマイズできることがたくさんあります。ぜひさらに使いやすく効率化して時短に繋げたい方はこちらからどうぞ(`・ω・)ゞ

この記事がイイなと思ったらシェアお願いします\(^^)/

合わせて読みたい記事