YOLOCOBI BLOG

一度きりの人生、好きなことをして楽しく生きるためのブログ

【初心者もできる】ブログパーツのカスタマイズ(CSS/HTML)を即座にプレビューしながら作る方法 - CODEPEN-

 f:id:YOLO-co-bi:20200315181648p:plain

 

 

f:id:YOLO-co-bi:20200314182024j:plain

YOLOCOBI

オリジナルの見出しボックスのカスタマイズをした時に、その場でプレビューできる便利な方法ってないのかな?

 

 

最近こんな疑問に当たった私。でもそんな疑問を解消する方法があるんですよね。

 

今回は、ブログパーツのカスタマイズをするのに、CSSやHTMLを入れてプレビュー画面で確認しながら、その場で色や幅を変更・調整ができるお役立ちツール、CODE PEN(コードペン)を使ったカスタマイズのやり方をご紹介します。

 

これを使えば、わざわざCSS・HTMLタグを入れてサイトの見え方を確認する手間を減らすことができますので、とても便利です。ぜひ記事を読んで使ってみてください。

 

この記事を読んでもらいたい方

ブログサイトをカスタマイズしてみたいけど、CSS/HTMLに詳しくない方

これからCSS/HTMLを使えるようになりたい初心者

Webデザイナーを目指して独学で勉強している方

 

 

CODEPEN(コードペン)とは?

f:id:YOLO-co-bi:20200315120644p:plain

   

CODEPEN(コードペン)とは、Webブラウザ上でHTML/CSS/Javascpritのコーディングができて、変更を加えてもすぐにシミュレーションできる便利なWebサービスです。

Webデザイナーがコーディングの際に使っている便利なツールです。

 

このCodePenがいい点は

・無料で使えて登録簡単(通常の機能ならこれで事足ります)

・書いたコードをすぐにプレビューできる

・プレビュー画面をブログ記事にHTMLで埋め込みできる

 →Webページを公開できるのは便利!

・設定を保存できるのでWeb開発の際の引き出しになる

 

単にWebブラウザ上でCSS/HTMLをリアルタイムでシミュレーションするだけでなく、コーディングした内容をブログ記事を公開するのには便利な、Webデザイナー向けのツールです。

 

f:id:YOLO-co-bi:20200314182019j:plain

YOLOCOBI

本来はWebデザイナー向けだけど、初心者がコピペの出来上がりを見るだけでも便利ですよね!

 

CODEPENの使い方

f:id:YOLO-co-bi:20200315121441p:plain

 

CODEPEN の簡単な使い方を説明します。

英語サイトなので、英語が苦手な方には多少厄介ですが、必要な部分だけ覚えてしまえば使えると思います。

 

1)SIGN UP ー 新規登録(無料)

 

 CODEPEN 公式サイトよりアクセスします

f:id:YOLO-co-bi:20200315122755p:plain

 

登録方法 -->TwitterFacebook、E-mailでも登録できます。

      (Twitterで登録したら一瞬で終わりました♪)

f:id:YOLO-co-bi:20200315123245p:plain

 

詳細情報は登録する必要はありません(そのまま『SAVE』ボタン)

f:id:YOLO-co-bi:20200315123758p:plain

 

↓これで登録完了。あとは簡単な操作方法を教えてくれるデモツアーを見ることができます。(「Let'sGo」ボタンより)

もし見る必要がなければ、下の赤枠ボタンを押しても大丈夫です。

f:id:YOLO-co-bi:20200315124714p:plain

 

2)CODEPEN画面を実際に使ってみる

実際にCODEPENを使ってみましょう。

左上のPENを押したらスタート

f:id:YOLO-co-bi:20200315125521p:plain

これが編集画面。

Javascriptは使わなければ、非表示にすることもできます。

また編集ビューの切り替えもできます。

f:id:YOLO-co-bi:20200315131210p:plain


では、実際にカスタマイズがしたいブログパーツCSS/HTMLを入れてみたいと思います。

 

ブログパーツのカスタマイズ(CSS/HTML)の実践

ブログパーツCSS/HTMLは、こちらのサイトからみるとたくさんあります。

saruwakakun.com

 

f:id:YOLO-co-bi:20200314181941j:plain

YOLOCOBI

サルワカくんのサイト、すごく参考にしてます!

 

今回はこちらのサイトで見つけた、「24.吹き出し」のBOXデザインに挑戦。

これを好きな色にカスタマイズしてみたいと思います。

 

 「24.吹き出し」のBOXデザイン見本はこれ(↓)

f:id:YOLO-co-bi:20200315132133p:plain

吹き出しBOXデザインのCSS/HTMLを貼る(コピペ)
まずは、CSS/HTMLタグをCODEPENに貼る作業から行います。
下のCSS/HTMLタグを、一度メモ帳にコピペしてから使用ください。
 
CSS

.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;

}

HTML

<div class="box24">

<p>ここに文章</p>

</div>

 

コピペが終わったら、これをCODEPENに貼り付けてみます。

(左側にHTMLタグ、右側にCSSタグをコピペ)

 

 すると、画面の下の方に見えるプレビューウィンドウに、貼り付けたCSSとHTMLで見える吹き出しが見えてきました。

f:id:YOLO-co-bi:20200315164511p:plain

 

今回は色を自由な色にカスタマイズしたいと思います。

 

色の探し方 (Color-sample.comサイトを使って探す)

色の探し方は、こちらからのサイトが非常に便利です。(1600万色あり)

色見本と配色サイト - color-sample.com

 

実際の画面

f:id:YOLO-co-bi:20200315165417p:plain

<BLUEの例>

今回は色系統の色見本から、ブルー(BLUE)を選んでみました。

色見本の下の詳細情報の一番上にカラー番号が記載されています。

それぞれで好きな色を選んで色をメモ帳にコピペしておきましょう。

f:id:YOLO-co-bi:20200315170106p:plain

 

再び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で色を変更しました。すると、プレビュー画面で希望のカラーに変わりました。  

f:id:YOLO-co-bi:20200315174802p:plain


あとは、これをCSS/HTMLへペーストしてゆけば、吹き出しの希望のカラーカスタマイズは完了です。

 

なお、今回は色のカスタマイズを説明しましたが、これ以外にもCSSを知っていれば様々な詳細部分を変更することも可能です。

 

<おまけ>CODEPENをブログ記事に貼る

最後に、ここで出来上がったプログラムをブログに貼って共有するところまでやってみます。

 

まずは右下のEMBEDボタンを押す

f:id:YOLO-co-bi:20200315175504p:plain

 

すると、このWEBページ貼り付け用のプレビューとHTMLが出てきますので、

今度はHTMLをコピペして、必要なWEBページに貼り付ける。

(HTML(RECOMMENDATION)のタブで選択したHTMLをコピー)

f:id:YOLO-co-bi:20200315180155p:plain


 すると、こんな風に、書き込んだCODEPENをブログ記事に埋め込むことができます。

 

See the Pen WNvJNpj by YOLOCOBI (@yolocobidesign) on CodePen.

 

f:id:YOLO-co-bi:20200314181945j:plain

YOLOCOBI

うまくできましたか?

 

 CSS/HTMLはこういうツールを使って少しずつ練習して行くと、独学で覚えられるかもしれませんね。(私も現在勉強中です)

また、色々なカスタマイズに挑戦して、ご紹介したいと思います。

 

You Only Live Once....人生は一度きり)

(良かったら是非いいね!お願いしますね〜♪) 

f:id:YOLO-co-bi:20200315181054j:plain