スタイルシートで表現力180%アップ
── タグ打ちの基本を覚えよう

ライティングの速度をグーンと引き上げるコツがこれ、スタイルシートのタグ打ちです。 とりあえずフォントのサイズと色を好きなように変えられたらコト足りるんで、2つか3つのパターンを辞書登録しておくだけでOK。 いちいちマウス使ってちゃ時間がもったいないですよ!


そりゃもちろんイライラするわよ。思ったとおりにレイアウトが決まらないのって、すごいストレスね。 でもどうやっていいかわからないから、メニューバーにあるだけの機能でガマンしてるだけ。 スタイルシートなんて初耳だわ。

最初っから見た目にこだわりすぎるのも良くないんで、気にならない人には特にオススメしてないんですけどね、 タグ打ちが手早くできるようになると、ページのスタイルが綺麗に整うようになって、しかも効率が上がる。一石二鳥です。

このページの内容を動画でも解説しています


▲▽

マウスとキーボードはどっちが速い?

ブログを書きはじめたばかりの初心者でも、
文字に色をつけたり文字を大きくしたりして、
アクセントつけた文章を書きたいもんですよね?
>こっからここまで赤で太字にしよっ!
とか
ですよね。
とりあえずそのやり方だけ知っとけば、
はじめの何週間かはじゅうぶんで、
わたしもはじめはそうだったんですけども‥‥、
それがいつごろからですかねー。
もうちょい細かく、もっと自由に、
コンマミリ単位でレイアウトしたいぞっていうような、
いっちょまえな衝動に駆られるようになりました。
こう見えてデザイナーの端くれ
っ
ていう変な自負もありますし。
ツラを合わせるのが好きといいますかね、
なにかにつけてきれいに整列させたいタイプなんですよね。
それができないときは、
逆にランダムに散らかすとか。
ただ単に文字が赤くなって太くできたらそれでいい‥‥
では済ませられないタチってことなんです。
そんなの性格の問題なので、
だから儲かるとか、
じゃなかったら儲からないとか、
そんな話ではありません。
スタイルシートの知識はどこまで必要か?
って、
議論の分かれるところだと思いますけども、
知らなくてもやってけるのは確かなので、
アタマがしんどかったら知らないままでいいです。
HTMLが何かもぜんぜんわからないっていうまま、
ネットビジネスで稼ぐことは余裕で可能。
コーディングっていう作業と、
すごく近い領域で仕事をしているわたしから見ると、
逆にそれが不思議でしょうがなかったりするわけですけども。
なので今回は、
好き嫌いの話ではなくて、
美しいとか美しくないとかいう主観の話でもなくて、
どっちが速いか
っ
ていう効率の問題として考えてみたわけなんです。
ま、
いちいちマウスに手をやるのは面倒なんで、
キーボード操作メインでガンガン飛ばせるほうが、
効率いいに決まってる派な方に聞いてほしい話です。
マウス使わないで文字に色ってつけれるの? なによそれ?どういうこと?もしかして、あの、ワケのわからない暗号みたいなゴチャゴチャな文字をキーボードで打てっていうの? ウソでしょ!?


▲▽

スタイルシートでこういうことできます

文章にアクセントをつけつつ、
レイアウトも気にしながら書くとすると、
フォントの大きさと色を変えられただけでは不十分です。
ざっと以下の要素くらいは
好きなようにコントロールしたくなるんじゃないでしょうか。
  • 改行幅
  • アンダーライン
  • 見出し
  • 記号や絵文字の類
  • 背景色
  • リスト
  • インデント

写真を何枚か挿入するとして、
なんかこう‥‥
文字と写真がくっつきすぎてるとか離れすぎてるとか、
Androidのスマホならちゃんと読めるのに、
iPhoneで見たらガタガタで恥かいたりとか。
スタイルシートのこと知っとけば知っとくほど、
そういうところがスッキリするわけで。
だからまず第一段階としては、
自分で定義できなくていいから、
すでに定義されたスタイルを使えるようになりましょう。
タグ打ち
を
覚えるんです。
自分の書いたブログのページ、
ブラウザの画面で右クリックして、
>ページのソースを表示
っ
ていうのを実行してみてください。
マウス派の方は、
Wordpressの編集画面はいつも「ビジュアル」で作業されてると思いますが、
これをテキストで表示させてみてください。
自分の書いた文章の前や後ろに、
英語っぽい呪文のような、
まったく身に覚えのない意味不明の文字がいっぱい並んでいるはずです。
<span style="color: #00afff;"><span style="font-size: 1.96em;">!!あなたの書いた文字はここ!!</span></span>
こういうの、
タグっていうんですけど、
文字を挟むタイプのタグもあれば、
改行タグのように単独ではたらくタグもあります。
(ちなみに改行タグっていうのは、
<br />
こういうやつです。)
どういうタグで挟むと、
挟まれた文字にどんな変化が起こるか。
これが、
スタイルシートを使うための初歩なんですけど、
なにもこんな複雑な暗号をいちいち覚えていちいち打とうっていう話ではないです。
これをもっとスッキリ簡単なかたちにして、
意味の理解はあとまわしでいいから、
見よう見まねでポンポン使おうっていう話です。
はじめの一歩としては、
フォントの大きさと色を変えられただけでオッケーなんですから。
あーびっくりした。そうよね。あんな暗号みたいなもん、打てるわけないわよね。 アタシ、自慢じゃないけどそんなに頭よくないのよ。 そうね、どっちかっていうと悪いほうなんだから、むずかしいこといわれるとホント困るのよ。

▲

よく使うタグは辞書登録しておこう

ライティングのスピードで悩んでないならいいんですけど、
サイト開設初期は、
とにかく大量のライティングをこなさなければなりません。
>だからスタイルなんてかまってられないんじゃないか!
っ
ていうご意見もごもっともです。
しかし、
急がばまわれですよ。
タグの基本は
<xxx>‥‥‥</xxx>
です。
こういう単純なルールに従って、
文字を挟むのが基本なんです。
挟むと、
色がついたり大きくなったりします。
わたしが定義したスタイルシートでは、
<span class='f_大きさ f_色'>‥‥‥</span>
こんなふうに書くと、
指定した色と大きさに変わってくれます。
これを辞書登録しておいて、
文章が書きあがったあとで、
パッパッパッパッパッパッとタグ打ちしていけばいいんです。
改行なんかは、
1行だけの改行だろうと複数改行だろうと、
一括文字列変換で一瞬で終わらせます。
ご覧のとおり、
わたしのサイトには「吹き出し」が多用されてまして、
ほぼ全ページにわたしのアバターが登場してしゃべってますが、
スタイルシートの扱いに慣れてくると、
こんな小細工も朝飯前にできるようになります。
せっかく書いた原稿ですから、
ちょっとでも目を引いて、
先へ先へ読み進めてもらいたいですもんねえ。
そうだよなぁ。文字装飾なんてワンパターンだもんな。 はじめに1回だけ覚えて、あとずっと楽になるなら、 そっちのほうがトクな感じするよ。