CodePenを使ってCSSをマスターするとサイトのデザインが自由にできる

スポンサーリンク

WordPressのテーマにはそれぞれテンプレートがあり、好みのテーマを使ってサイト作りをしているわけですが、デザイン的な要素をもっと自分好みにしたいという思いは、慣れてくるに従い強くなってきます。
背景色や記事の文字色・リンクカラーなどはダッシュボードの「カスタマイズ」で変更できますが、UI要素などはCSSファイルの修正や追加をしなければできません。

ここでは、CSSファイルの知識がそれほど無くても、簡単にデザイン要素を自分流にできる方法を紹介します。

使えるコード共有サイト

htmlやcssコードを共有したり、オリジナルのコードを作ってブラウザでどのように見えるかなどの検証作業をしたりと、とにかく便利なサイトがあります。
その中で「CODEPEN」を使ってCSSを変更する体験をしてみましょう。

コード共有サイトCodePenとは

「CodePen」はウェブデザイン開発の支援ツールです。
無料・有料のアカウントがありますが、無料アカウントでも充分活用できます。

CodePenのトップページ

アカウント登録は簡単ですが、サインアップすると連携して使える“クロスブラウザチェックツール”の使い方などを説明したサイトがありますので、参照して下さい。
Webエディタ「CodePen」が、完全無料のクロスブラウザチェックに神対応したので使ってみた!
*サイトのデザインが変更されているので、若干UI要素の位置が変わっていますが、あちこち探してみるとちゃんと使えます。

公開されているCSSなどのコードは共有なので誰でも自由に使えますが、MITライセンスになっていますから、CSSとして再配布する際などのライセンス表示には気をつけて下さい。

真似したいサイトのCSSを参考に自分好みのデザインを作る

「CodePen」はCSSやHTMLの知識がある人が、サイトのデザインの検討の為に利用するのですが、そんな知識がない人でも、UI要素を自分好みに作れてしまうところがすごいところです。

UI要素を自分好みにつくるには、まず見本になるものが必要です。
そこで、もう一つ便利なツールを準備します。

ブラウザはGoogleChromeを使います。
手順は次の通りです。

  • GoogleChromeを立ち上げてSnappySnippetをデベロッパーツールに追加します

はいこれでOKです。

いろんなサイトを見ていて気に入ったUI要素があったとします。
例があった方が分かりやすいので、鈴木謙一さんの【海外SEO情報ブログ】を見てみます。

【海外SEO情報ブログ】から

[引用]タグのデザインを変えてみます。

引用文

引用文の上で右クリックをします。そして[検証]をクリックすると「デベロッパーツール」が表示されます。

デベロッパーツール

メニュータブの[SnappySnippet]をクリックすると下の画像のようになります。

SnappySnippet

上にある[Creat a snippet from inspected element]ボタンを押します。

[HTML]と[CSS]

薄い文字ですが[HTML]と[CSS]にコードが記入されていると思います。
記入されているのを確認したら、左下の[Send to CodePen]をクリックします。

「CodePen」のサイトが表示されソースコードが表示されます。
[Chnge View]を使って[HTML]と[CSS]とモニター画面を左に寄せると上の画像のようになります。

引用タグの左ボーダーの色と幅を変えます。

CSS変更

border-left: 10px solid rgb(181, 220, 255);

の部分です。

色をカラーコードから探すのも面倒ですので、このコード部分のカラーコードをコピーしてググります。

ここで色を探してコードをコピーします。
*グーグルでここまで出来るんですね。

カラーコード

rgb(22, 163, 27)

に変えてみましょう。左ボーダーの巾は大きく「20px」にします。

「CodePen」に戻って

border-left: 20px solid rgb(22, 163, 27);

と変えてみます。

下の画像のように変わりました。

CSS変更

このコードで「style.css」の[引用]タグblockquoteを変更します。

まとめ

デザインの変更はCSSファイルの変更によって行います。
ここでは[blockquote要素]の変更をやってみましたが、CSSファイルで使われる[h][div][ul][li]など、よく使われる要素をいろいろ変えてみて試しているうちに、自然とCSSファイルの作り方というか、サイトのデザインがなんとなく分かってくると思います。

コメント