オリジナルの見出しボックスのカスタマイズをした時に、その場でプレビューできる便利な方法ってないのかな？
最近こんな疑問に当たった私。でもそんな疑問を解消する方法があるんですよね。
今回は、ブログパーツのカスタマイズをするのに、CSSやHTMLを入れてプレビュー画面で確認しながら、その場で色や幅を変更・調整ができるお役立ちツール、CODE PEN（コードペン）を使ったカスタマイズのやり方をご紹介します。
これを使えば、わざわざCSS・HTMLタグを入れてサイトの見え方を確認する手間を減らすことができますので、とても便利です。ぜひ記事を読んで使ってみてください。
ブログサイトをカスタマイズしてみたいけど、CSS/HTMLに詳しくない方
これからCSS/HTMLを使えるようになりたい初心者
Webデザイナーを目指して独学で勉強している方
CODEPEN（コードペン）とは？
CODEPEN（コードペン）とは、Webブラウザ上でHTML/CSS/Javascpritのコーディングができて、変更を加えてもすぐにシミュレーションできる便利なWebサービスです。
Webデザイナーがコーディングの際に使っている便利なツールです。
このCodePenがいい点は
・無料で使えて登録簡単（通常の機能ならこれで事足ります）
・書いたコードをすぐにプレビューできる
・プレビュー画面をブログ記事にHTMLで埋め込みできる
→Webページを公開できるのは便利！
・設定を保存できるのでWeb開発の際の引き出しになる
単にWebブラウザ上でCSS/HTMLをリアルタイムでシミュレーションするだけでなく、コーディングした内容をブログ記事を公開するのには便利な、Webデザイナー向けのツールです。
本来はWebデザイナー向けだけど、初心者がコピペの出来上がりを見るだけでも便利ですよね！
CODEPENの使い方
CODEPEN の簡単な使い方を説明します。
英語サイトなので、英語が苦手な方には多少厄介ですが、必要な部分だけ覚えてしまえば使えると思います。
１）SIGN UP ー 新規登録（無料）
CODEPEN 公式サイトよりアクセスします
登録方法 -->TwitterやFacebook、E-mailでも登録できます。
（Twitterで登録したら一瞬で終わりました♪）
詳細情報は登録する必要はありません（そのまま『SAVE』ボタン）
↓これで登録完了。あとは簡単な操作方法を教えてくれるデモツアーを見ることができます。（「Let'sGo」ボタンより）
もし見る必要がなければ、下の赤枠ボタンを押しても大丈夫です。
２）CODEPEN画面を実際に使ってみる
実際にCODEPENを使ってみましょう。
左上のPENを押したらスタート
↓
これが編集画面。
Javascriptは使わなければ、非表示にすることもできます。
また編集ビューの切り替えもできます。
↓
では、実際にカスタマイズがしたいブログパーツのCSS/HTMLを入れてみたいと思います。
ブログパーツのカスタマイズ（CSS/HTML）の実践
ブログパーツのCSS/HTMLは、こちらのサイトからみるとたくさんあります。
サルワカくんのサイト、すごく参考にしてます！
今回はこちらのサイトで見つけた、「２４．吹き出し」のBOXデザインに挑戦。
これを好きな色にカスタマイズしてみたいと思います。
「２４．吹き出し」のBOXデザイン見本はこれ（↓）
吹き出しBOXデザインのCSS/HTMLを貼る（コピペ）
.box24 {
position: relative;
padding: 0.5em 0.7em;
margin: 2em 0;
background: #e6f4ff;
color: #5c98d4;
font-weight: bold;
}
.box24:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e6f4ff;
width: 0;
height: 0;
}
.box24 p {
margin: 0;
padding: 0;
}
<div class="box24">
<p>ここに文章</p>
</div>
コピペが終わったら、これをCODEPENに貼り付けてみます。
（左側にHTMLタグ、右側にCSSタグをコピペ）
すると、画面の下の方に見えるプレビューウィンドウに、貼り付けたCSSとHTMLで見える吹き出しが見えてきました。
今回は色を自由な色にカスタマイズしたいと思います。
色の探し方 （Color-sample.comサイトを使って探す）
色の探し方は、こちらからのサイトが非常に便利です。（1600万色あり）
実際の画面
↓
＜BLUEの例＞
今回は色系統の色見本から、ブルー(BLUE)を選んでみました。
色見本の下の詳細情報の一番上にカラー番号が記載されています。
それぞれで好きな色を選んで色をメモ帳にコピペしておきましょう。
再びCODEPENで、色のカスタマイズを行う
それではCODEPENの画面に戻って、先ほどの吹き出しの色のカスタマイズを行ってみましょう。（今回は色のカスタマイズのみご紹介します）
背景色：#006FAB (ブルー)
文字色：#FFFFFF （白）
CSSの以下のところを希望の色（ブルーと白）に変更してみます。
.box24 {
position: relative;
padding: 0.5em 0.7em;
margin: 2em 0;
background: #e6f4ff; →背景色 ブルーへ #006FAB
color: #5c98d4; →文字色 白へ #FFFFFF
font-weight: bold;
}
.box24:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e6f4ff; →背景色（吹き出し部分）ブルーへ #006FAB
width: 0;
height: 0;
}
.box24 p {
margin: 0;
padding: 0;
}
CODEPENで色を変更しました。すると、プレビュー画面で希望のカラーに変わりました。
あとは、これをCSS/HTMLへペーストしてゆけば、吹き出しの希望のカラーカスタマイズは完了です。
なお、今回は色のカスタマイズを説明しましたが、これ以外にもCSSを知っていれば様々な詳細部分を変更することも可能です。
＜おまけ＞CODEPENをブログ記事に貼る
最後に、ここで出来上がったプログラムをブログに貼って共有するところまでやってみます。
まずは右下のEMBEDボタンを押す
すると、このWEBページ貼り付け用のプレビューとHTMLが出てきますので、
今度はHTMLをコピペして、必要なWEBページに貼り付ける。
（HTML（RECOMMENDATION)のタブで選択したHTMLをコピー）
すると、こんな風に、書き込んだCODEPENをブログ記事に埋め込むことができます。
See the Pen WNvJNpj by YOLOCOBI (@yolocobidesign) on CodePen.
うまくできましたか？
CSS/HTMLはこういうツールを使って少しずつ練習して行くと、独学で覚えられるかもしれませんね。（私も現在勉強中です）
また、色々なカスタマイズに挑戦して、ご紹介したいと思います。
You Only Live Once....人生は一度きり)
(良かったら是非いいね！お願いしますね〜♪）
