<< 今年もキャラコン開催中!? | main | 表記の変更や、いらない箇所を削除しよう! >>

テンプレート内のテキストを装飾しよう!

PCテンプレカスタマイズ講座 第3回

前回のあらすじ

テンプレートの幅を広げたり寄せたりすることに成功したロベポリ! ところが、スットコドッコイのポリンは自分のテンプレカスタマイズを すっかり忘れていた・・・・!!



前回まではロべ君のカスタマイズばっかりだったから、 今回はポリンちゃんのリクエストを受け付けるよ。

私は、文字とかの装飾にもこだわりたいの。 テンプレート内の文字の色とか変更できませんか?

それは簡単にできるよ。今回もテンプレート「custom」シリーズを例に説明するよ。 まずはページ全体の文字色(リンクが貼られていない文字)を変更してみよう。 テンプレのどこで指定してるか2人はわかるかな?

何も変更されていない状態の「custom」テンプレ

※クリックして拡大

色ってことは、装飾だからCSSだよな・・

これかな?「/* ページ全体のテキスト色 */」

その通り。そこで指定されている色を変更すればOKだよ。 今は「#000000」って指定してあるね。


「#000000」ってどういうこと?

これはカラーコードといって、Webページ上で色を指定する際に使われるんだ。 「#000000」は真っ黒な色だね。カラーコードはここから確認できるよ。

よし!じゃあ「#006666」を入れてみようっと・・・出来た!

文字色が変わった!!
※クリックして拡大

ねえポリン!「/* ページ全体のテキスト色 */」って書かれている場所の 下の方に、色々な箇所の色を指定できるところがあるっぽい!

お!本当だ!「/* ページ全体のリンク色 */」を変更すれば、 リンクが貼ってある文章の色も変更できるってことかしら。

さすがポリンちゃんだね。でもリンクの色指定は少し特殊なので ちょっと説明しよう。

ふむふむなるほど。でも基本的には、自分でちゃんと色を指定すれば いいってことね。

ほかにも変更したい箇所はある?

サイドメニューの部分も変更したいわ!

それはCSSの「/* サイドメニューのタイトル */」って箇所で出来るよ。

あれ?でも先生、ここにはさっきみたいに色を指定する「color:」がないですよ??

無ければ追加しちゃえばいいのさ!さっきのところから「color:#000000;」を コピーして持ってきちゃえ!

どういう風に追加すればいいのかしら?

サイドメニューのタイトルにある「{font-size:14px;font-weight:bolder;margin:0 0 5px 0;}」、ここの中に追加すればいいんだよ。「;]が区切りなので、そのあとに追加してみよう。



おお!これで全体の色と統一されている場所も自由に色を指定出来るんですね。

そうなんだ。たとえば、記事本文や記事の続きの色を分けたりすることもできるんだよ。

サイドメニューの色も変わった!!

※クリックして拡大

先生!あと文字のサイズとかもいろいろ調整したいです!

文字の大きさは「font-size:」で指定しているんだ。 ページの文字を全体的に小さくしたいときは「/* ページ全体 */」、 記事部分だけなら「/* 記事本文 */」と「/* 記事の続き */」をいじってみよう。

変更したい箇所に「font-size:」が無ければ、さっきと同じように追加すればいいんだね。


文字サイズの目安としては「font-size:12px」が標準的な大きさ、「10px」小さめ、「14px」すこし大きめ。数字が大きくなるほど、文字サイズも大きくなるってわけ。

あれ、いま編集してみたんだけど、どこが変更されたかわからない・・・

そういうときは、思いきって「30px」とかにしちゃおう。 大きいサイズを指定すると変化が一目瞭然だから、どこをいじったのかすぐに分かるよ。

今回行ったカスタマイズをまとめてみるよ!!上のほうに置いてある、何もカスタマイズしていない状態のテンプレと見比べてみてね!


よーし。自分なりにいろいろ調整してみるぞっと!

ポリンちゃん。テンプレート内の表記とかも自分なりに変更できちゃうんだよ。

ほえ?

続きは次回だ!!


▼現在ブログデザインコンテスト実施中!▼

コメント
管理者の承認待ちコメントです。
  • -
  • 2012/11/02 7:31 PM
コメントする
※JUGEMの機能に関するご質問などはお問い合わせフォームまでお願いします。









この記事のトラックバックURL
トラックバック
関連の記事

最新の記事
StepUP!JUGEMからの
お知らせ
■ お勧めブログ投稿フォーム■
プロフィール
カテゴリーから記事を読む
月別で記事を読む
Stepup!JUGEM内で検索