cssで引用文をかっこよく!

前回の「コメント、トラックバックを消去する」htmlカスタマイズに
チャレンジされた方はいますか?

ちょっと、難しかったかもしれませんね。

さて、今回の「コメント・トラックバック」を消すという作業は
少しややこしかったですね・・・^_^;

実際にされた方いますか?

上手くいった、いかなかったというお返事お待ちしております(^^)

redallowright ランキングは情報の宝庫?のぞいてみる!

redallowright メルマガでは、役立つ知識?を配信します!登録はこちら(^^)
メールアドレス:



さて、今回は前回よりやさしいですが、簡単ではないかもしれません。

といのも、「css」をいじるからです。

まず、「css」とは・・・

フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を文書
本体(及び文書の論理構造を記述したHTML)から切り離すことができ、ユーザ
が複数のレイアウトから適当なものを選択することができるようになる。

簡単にいうと、自分の好きなように、
字体、色などを変更することができるのです。

そこで、今回は「引用の利用」ということで、
スタイルシートを変更していきます。

引用とは、上記の例では、

フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を文書
本体(及び文書の論理構造を記述したHTML)から切り離すことができ、ユーザ
が複数のレイアウトから適当なものを選択することができるようになる。

この部分ですが、これをもう少し分かりすく、ブログ上で表示させるのです。

例えば、下記のような線でかこって、
背景の色を指定したりとかできるようになります。

  ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
  ┃フォントや文字の大きさ、文字飾り、行間などの見栄えに
  ┃関する情報を文書本体(及び文書の論理構造を記述したHTML)
  ┃から切り離すことができ、ユーザが複数のレイアウトから
  ┃適当なものを選択することができるようになる。
  ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

では、実際にやってみましょう!
(ライブドアブログを元に説明しています)

「Blogの設定/管理」⇒
「デザインの設定」のジャンル一覧(ジャンル名をクリックして選択)⇒
「スタンダード」⇒「CUSTOM」

「テーマの読み込み」の▼をクリックし、「●●」を選択、
「読み込み」ボタンを押します。
※●●は、ご自分のテンプレートの名前を選択してください。
例 「sora」

そして、一例ですが、下記のようなタグを「css」が
書かれている欄の最下部にでも貼り付けてください。

blockquote {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Os
aka‐等幅";
font-size: 11px;
color: #333333;
background: #EEEEEE;
margin: 20px 10px 20px 10px;
padding: 10px;
border: 1px dotted #ff00ff;
}

そして、保存して、ブログの再構築をしてください。
(再構築は、「css」を選択してくださいね。)


次に、なにかサンプルで、記事を新しく書いてみてください。

例えば、

<blockquote>フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を文書本体(及び文書の論理構造を記述したHTML)から切り離すことができ、ユーザが複数のレイアウトから適当なものを選択することができるようになる。</blockquote>

すると、引用文が、ピンクの点線に囲まれて、
背景が灰色になっていると思います。

フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を文書本体(及び文書の論理構造を記述したHTML)から切り離すことができ、ユーザが複数のレイアウトから適当なものを選択することができるようになる。



少し先ほど「css」に張付けた解説を・・・

blockquote {           ← 【引用のタグ】
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅"; ← 【字体】
font-size: 11px;       ← 【字の大きさ】
color: #333333;        ← 【字の色】
background: #EEEEEE;     ← 【背景色】
margin: 20px 10px 20px 10px; ← 【領域間のスペース、上,下,右,左】
padding: 10px;        ← 【領域内のスペース 上下右左】
border: 1px dotted #ff00ff; ← 【囲みの太さ、形状、色】
}

色や線の形状などは、お好きなものを選んでください。

ちなみに、margin,padodingなどの記述方法。

 値を1つ指定した場合: 指定した値が[上下左右]の幅。
 値を2つ指定した場合: 記述した順に[上下][左右]の幅。
 値を3つ指定した場合: 記述した順に[上][左右][下]の幅。
 値を4つ指定した場合: 記述した順に[上][右][下][左]の幅。


なれれば、簡単です。がんばってトライしてみてくださいね。

 スタイルシートはここを参考にしてたらいいと思います。
 ⇒http://www.htmq.com/style/index.shtml

 今回の記事のサンプルは、ブログで確認してください(^^)
 ⇒http://blog.livedoor.jp/cen5/

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/cen5/26580409