難しいカスタマイズより、まずは装飾から

初心者さんは、難しいカスタマイズをするよりも、まずは簡単な装飾から始めた方がカスタマイズ出来る様になると思いますよ。

ってか、もともと’カスタマイズ’って’改造’とかって意味なので、初めから何かを作り出す事ではありません。つまり、ベースがあるってこと。

そのベースを基に手を加えて変化をさせる。もっとやさしい意味合いにするなら、’アレンジ’ってとこですか。ちょっとだけ変える。色を変えてみる。形(フォント)を変えてみる。大きさを変えてみる。

そうやって考えてみると、そんなに難しくはないですよね?色や形を変えるのはそんなに難しくはありません。でも、どこをどうやったら変わるのかが分からない。そこが始まり。

例えば、見出し。テーマTwentyElevenの記事タイトルのデフォルト表示は…、

記事タイトル

です…。せっかく素敵なテーマ(テンプレート)なのに、さすがにお世辞にも素敵な記事タイトルだ!!なんて言えませんよね?(怒られちゃうかなぁ…

これをチョッとアレンジするだけで、こんな風に様変わりしちゃいます♫

記事タイトル

いかがですか?これは、記事タイトルの文字の大きさと色味にチョッとだけ手を加えただけなんですね。それでも初めての方にとっては、’どうやってやんのっ!?’って、感じると思います。

私自身も最初は、驚きと感動の連続でした。さすがに今では、このくらいは普通に出来るようになりましたが…。。

つまりは、CSSだなんだってことじゃなくて、基本が分かってくれば、この記事上でもこうやって表現出来る様になるってことです。

このサンプルの’記事タイトル’は、テキストモードで以下の様に入力しています。

 <span style="font-size: 24px; color: #fefefe; background: #9c3552; padding: 2px 12px 0; border-left: 5px solid #ff87b3;">記事タイトル</span>

で、こういった細かい設定をスタイルシート上ですることによって、テンプレートファイルを簡略化する事が出来るんですね。(意味が分からなければスルーでww)

これを、スタイルシート上では次の様に表現します。

.entry-title {
	clear: both;
	font-size: 24px; 
	color: #fefefe;
	background: #9c3552;
	padding: 2px 12px 0;
	border-left: 5px solid #ff87b3;
}

ココまでわかれば、後はその内容を変えるだけでいくらでもアレンジすることが出来る様になります。(それが分からなかったりするんですけどね…。)

ちなみにデフォルトのスタイルシートはこぉ。

.entry-title {
	clear: both;
	color: #222;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
}

つまりですね、一つ一つの命令文の意味を考えるよりもまずは、’変わった!!’’綺麗な見出しになった!!’って言う、感動を味わって欲しいんです。自分でも出来るんだって感じて欲しい。

その後で、もう少しココをなんとかしたいなぁってなった時に、初めて一つ一つ追って行く様にすれば、理解度も早いですしドンドン吸収出来ると思います。

だからね、今まで一つ一つの説明を一切してこなかったんです。つまり、習うより慣れろってとこでしょうか(笑

ってことで、その内に細かいとこも書いていこうかなぁ?って思ってます。それは、自分でも理解していないと書けないから。そうしたら、もっと訪問者にやさしいサイトになるかな?(笑


にほんブログ村 ブログブログ ブログノウハウへ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です