September 18, 2007

ブログデザイン−blockquote設定

 バルカンくんにブログの設定方法をきかれたので、そいつをエントリー。

 引用のタグ(blockquote)のデザインの変更方法です。

 前置きですが、ここでの方法はSeesaaブログを前提に説明しています。同じようなことをやろうと思う場合は、各ブログサービス、各ブログシステムでの設定におきかえて作業してください。


 まぁ、そもそもバルカンには、ちょっと前にきかれたんですが、そのときは「前にエントリーしたよ〜」なんていってたんです。
 でも、そのエントリー調べたら、設定方法については、なーんも言及してないんでやんの。


 つーコトで改めて「blockquote」の設定方法について説明です。

ここが引用文

 これが、このWao&Warnでの引用時の表示になります。ここを実際のタグ表示でみてみると

<blockquote>ここが引用文</blockquote>

 こんな感じ。

 この「<blockquote>〜</blockquote>」の部分が引用設定となります。

 この四角く囲む部分の設定はスタイルシートのblockquote要素をいじって設定してやります。

「デザイン」→「デザイン一覧」

 から、現在選択しているテンプレートをクリックし、スタイルシートの編集フォームを表示します。

 次にその中から「blockquote」の設定をしている部分をさがします。これはフォームの中でさがすのはメンドクサイのでテキストファイルにコピーして編集するのがよいです。


 さて「blockquote」をみつけたら、その設定をいじってみましょう。ちなみに、以前書いたエントリーでは、このWao&Warnのテンプレートでは、その設定がなかったことについて言及してたんですね。

blockquote {
color: #5555aa;
margin: 4px 0px 4px 20px;
padding: 10px;
border: 1px outset;
border-color: #5555aa;
background:#dde4ff;
}

 上が追記した、このブログのblockquote設定です。


 まず、colorで文字の色を決めます。

color: #5555aa;

 「#5555aa」の部分が色設定です。RGBの設定ですね。実際にどんな色になるかはコチラのサイトが便利です。サンプルもついていますので、それを参考にするとよいかと思います。


 marginで、ボックスの外側の余白をきめます。

margin: 4px 0px 4px 20px;

 いくつか書き方はあるのですが、とりあえずこのブログでの設定について説明します。
 最初の「4px」が上の余白、次の「0px」が右余白、その次の「4px」が下余白で、「20px」が左余白です。
 これで、ちょっと右にずれた感じのボックスになります。


 paddingはボックスの内側の余白設定です。

padding: 10px;

 「10px」のみ設定していますが、こうすると上下左右すべてその数値で余白を設定するということです。上下左右で別の数値を設定したい場合はmarginと同じように、それぞれ設定してください。


 borderで枠線の太さと形状を設定します。

border: 1px outset;

 「1px」が太さですので、太くしたい場合は、この数字を増やします。「outset」は枠線の形状です。他に「double」で二重線や「dotted」で点線などが可能です。

 border-colorで枠線の色を指定します。

border-color: #5555aa;

 このブログでは文字色と同じ色を設定しています。色の設定方法は文字色と同様ですね。


 backgroundでそのボックス内の色を指定します。

background:#dde4ff;

 このブログでは「#dde4ff」で水色を指定しています。これももちろん、他の色と同様に設定してあげます。


 これらの設定は「blockquote」に対しての設定なので、それに続く{ }内に記載してあげないと反映されません。
 また、各設定の行の最後には「;」で区切りをつけることを忘れないように注意してください。


 フォーム内の記述に問題がないようでしたら、あとは「スタイルシートを変更する」ボタンをクリックするだけ。カンタンでしょ??


 スタイルシートですので、他にもいろいろと設定できますが、ふつうはこれくらいの設定がわかっていればじゅうぶんかと思います。

 なお、スタイルシートについては有名ドコですがやはり「とほほのスタイルシート入門」がよくまとまっています。
 ちょっとわかりづらい「margin」「padding」「border」についてもわかりやすく解説してありますので、興味がありましたらご一読を。


 友人のバルカンくんにきかれたコトですが、他のブロガーの方々もつかえる部分があると思いますので、参考にしてみてください。

 もちろん「Waoのヤロウっ!説明ヘタなんだよ!!」って方がおりましたら、遠慮なくコメントお願いしまする。


 ではでは、楽しいブログライフを!


posted by Wao at 15:18 | 東京 ☀ | Comment(2) | TrackBack(0) | Blog | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
 さっそくやってみました。
 おー、できたできた。
 解説わざわざありがとーーう!
Posted by BOSS at September 19, 2007 22:42
 こういった色とかの設定はぜんぶスタイルシートにつっこんでしまうのが、ここ数年の流行になりましたな。
 ただ、classをどこに設定してるかってゆうのがなれないとわかりづらいんだよね〜。

 なにかあったらまたきいてくだされ。ブログのネタにもなるしねw
Posted by Wao at September 20, 2007 14:36
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

保存しますか?

コメント: [必須入力]


この記事へのトラックバック
About This Blog
 このブログはWaoとFFXIのWarnの出会った出来事や、考えたことをきままにつづったブログです。WaoまたはWarnの生活や、Waoの海外旅行記、iPodのことやFFXI創作寸劇などのカテゴリーがあります。
 各種更新情報は、こちらを。各カテゴリーの説明は、こちらをご覧ください。
 「ブログってなに!?」という方がいらっしゃいましたら、How to watch Blog?をご覧ください。「ブログの見方」を説明しております。まだ執筆途中ですけど…

BlogClick!
気になるものがあったらClick!
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。