プログラミング

【初心者必見】ブログ記事にソースコードをスッキリ表示する方法「CODE PEN」の使い方を解説

 

こんにちは、イケゾーです。

プログラミング系のブログで、ソースコードを綺麗に表示できないとお困りではありませんか?

「ソースコードを掲載する」方法は様々ありますが、アプリ「CODE PEN」が超便利だったのでご紹介します。こちらのツイートでも拡散させていただきました。

 

この記事はこんな人におすすめ!

  • プログラミング系のブログをやっている/やろうとしている
  • ブログ記事で綺麗にソースコードを表示できなくて困っている
  • CODE PENって何?

 

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

ブログ記事にソースコードをスッキリ表示する方法「CODE PEN」の使い方を解説

 

ソースコードを表示する「CODE PEN」とは

以前、こちらの記事でソースコードの掲載方法を解説しました。

合わせて読みたい

続きを見る

 

非常に便利でよく使っていますが、記事の内容によっては、使いにくい時があります。例えば、「ボタンのデザイン集」という記事の場合、コードとボタンの例(プレビュー)を羅列していくと、ソースコードが膨大になってしまい、見にくくなってしまいます。

  • 何ができるコードなのか瞬時にわからない
  • 複数のパターンをのせると、記事が膨大に長くなり、見にくい

 

その場でプレビューが確認できて、編集もできる「CODE PEN」は超便利です。
CODE PENはこちら>>

 

実際に表示してみる

アコーディオンメニューのデモを載せておきます。

See the Pen
jOMOZMj
by いけぞー@WEB始めたて先生 (@ikezoooblog)
on CodePen.

 

使い方はこちらのサイトが非常に分かりやすくて助かりました。

 

まとめ

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう
  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-プログラミング
-,