MTカスタマイズ法収集ブログ

方法としては、直接タグの中に

<blockquote style="color:#3CB371; border: 1px solid blue; padding: 5px;">

というようにstyleで指定し、

ここに引用タグをつけています。

このように表示する方法もありますが、
これだとひとつひとつに多くの指定をしなくてはならず、非常に面倒です。

なので今回はスタイルシートを使って、classで装飾を指定する方法をご紹介します。

まず、スタイルシートでどのような装飾にするか決めます。

スタイルシートのテンプレートのどこでもいいので、

.ex {
background-color: #FDF7E3;
border: 1px solid #CC9966;
margin-right: 5px;
margin-left: 7px;
padding: 3px;
}

・background-color: #FDF7E3;　ボックスの背景色の設定
・border: 1px solid #CC9966;　ボックスの外枠の線の太さ、線の種類、色の設定
・margin-right: 5px;　　ボックスの外の右端の余白の設定

引用文

・margin-left: 7px;　　ボックスの外の左端の余白の設定

引用文

・padding: 3px;　ボックスの内側の余白の設定

　　　　↑ココ

←ココ　引用文　ココ→

　　　　↓ココ

赤文字の部分は自分の分かりやすい文字に出来ます。
ここではexcerpt(抜粋、引用）という意味の単語の最初の2文字を取ってみました。

スタイルシートを保存、再構築したら、あとは記事を書く時にこれを利用するだけです。

<blockquote class="ex">ここに引用タグをつけています。</blockquote>

と書けば、

ここに引用タグをつけています。

と表示されるようになります。

exの部分を変えて何種類か作ると、

ここに引用タグをつけています。

このように変化をつけることができます。

blockquoteに直接スタイルシートを指定することもできます。

blockquote {
background-color: #FDF7E3;
border: 1px solid #CC9966;
margin-right: 5px;
margin-left: 7px;
padding: 3px;
}

この方法でもいいのですが、blockquoteを使う時はすべて同じ装飾になってしまうので
今回はclassを使う方法をご紹介しました。

お好きな方をお使いください。

このカスタマイズはMTに限らず使えます。