CSSの編集の話ですが、多くの人が外観プレビューを見ながら行っていると思います。外観プレビューとはダッシュボードから外観→カスタマイズから表示される画面の事を指してます。
WordPressの追加CSSでの編集は、書き込んだらすぐ画面に結果が出るので便利。しかしですよ、外観プレビューを見ながら編集を繰り返していくと、なんだかんだ画面更新が頻繁に行われます。
それで気が付いたら、自分のIPを除外していないグーグルアナリティクスのアクセス数が爆上がりしていたり、はたまたグーグルアドセンスのページビューが爆上がりしてしまった。などといった経験者が数多くいると思います。
また、それとは別のCSSの編集といえばデベロッパーツール（開発者ツール）画面。まああれです、右クリックして検証を押したら出てくる画面の事です。ちょっとCSSをいじくったらどうなるのかを見るのにはお手軽です。画面更新をかけたら一発でいじった個所が元通りになりますが。
そこで、今回私が感動した『CodePen』の出番というわけです。
検証画面を超えた？爆速で形になる「CodePen」の衝撃
See the Pen Untitled by mikoto (@mikotohodo) on CodePen.
サイトを壊す恐怖ゼロ。何度でも描き直せる爆速スケッチブック
CodePen（コードペン）公式サイト(https://codepen.io)
ブログに元々備わっている機能にそれほど不満はなくとも、カスタマイズする楽しさを知ってしまうと「デザイン CSS」や「ブログ 見出し」等で検索をかけて調べると思います。
ただ、このCodePenを知っていれば、カスタマイズのハードルが一気に下がります。 何度でも描き直せる爆速スケッチブック、それがCodePenです。
本番環境を汚さない・壊さない・失わない
- 汚さない: 「とりあえず」でプラグインを増やしたり、テーマのファイルを直接書き換えたりする手間がなくなる。
- 壊さない: セミコロン一つで画面が崩れる「あの絶望」を、本番サイトに持ち込まない。
- 失わない: ブラウザを閉じても、書きかけのアイデアが「Pen」としてネット上に残り続ける。
使い方はWPより簡単
英語ばかりで難しそうに見えますが、やることは『入力欄にコードを放り込む』だけ。むしろ、WordPressの複雑な設定画面を彷徨うよりずっとシンプルです。
最低限これだけ！CodePenで遊ぶ3ステップ
- 「Start Coding」をポチる
公式サイト（CodePen.io）の左上にあるボタンを押すだけ。ユーザー登録すら後回しでOK、すぐに「実験場」が開きます。 - 「HTML・CSS」の入力欄にコードを放り込む
JSの入力欄は一旦無視。難しいことは考えず、自分が試したいコードをHTML・CSSの入力欄に何一つ遠慮なく放り込んでみてください。 - 右側の画面で「おっ、変わった！」を楽しむ
コードを1文字書き換えるたびに、右側のプレビューが即座に反応します。この「ライブ感」こそが爆速実験場の醍醐味です。
最後に：爆速スケッチブックを使い倒そう
さあ、まずは真っ白なキャンバスを開いて、あなただけのデザインを爆速で描いてみませんか？
あとがたり
自分は最初に使ったブログはライブドアブログでした。一年くらい使ってはてなブログを使い始めたのですが、あのブログは見せ方に拘るのですが編集画面が本当に使いづらい。
CSSの編集画面なんかは「なんでこんなに小さいの！？」となる。共感する人は数多いと思う。
ただ、CodePenを使えば、自分が使ってるwebサイトに影響なく試せるし、なによりもデメリットなく学べます。何時だって、何歳だってCodePenを使って学べるんです。
ちょっとしたデザインのCSSを知りたくて、検索をかけてコピペするのも良いでしょう。
でも、CodePenの中でそのコピペをして、数字を少しいじってみて変化を知る事も大事だと思うのです。
コメント