アメブロの記事内に枠線・囲み枠を表示する方法

記事内において特定のテキストを目立たせたい時は、文字の色を変える、文字の大きさ・太さを変えるなどの方法があります。

リンクするテキストの色を変える事などがその典型的な例。


それ以外の方法としては、装飾した囲み枠を使用するのも効果的です。

このブログのスキンの場合、元々の仕様として

<blockquote>テキスト</blockquote>

↑このようにタグ編集エディタに打ち込むと

テキスト

↑というように表示されるようになっています。

これはこれで結構重宝しています。

ただこの<blockquote>というタグ自体の意味がそもそも「引用」であり（まあ元々の意味合いなんかはどうでもいいんですけど）、また同じ装飾の囲み枠ばかりだと変化がなくてワンパターンという事もあったので、別途違う形の囲み枠を使ってみる事にしました。


方法としては２つあります。

１つは
スタイルをそのまま記事内のタグに書き込んでしまう方法

参考→netmaniaさん「飾り窓テンプレート」

要するにアメブロで記事を書くときにタグ編集エディタで

<div style="padding:5px;border-color:#999933;border-width:1px;border-style:solid;height:50px;width:80px;background:#F9F9BA;">テキスト<br>テキスト<br>…</div>

↑このように記述すると

テキスト
テキスト
…

↑こういう風に表示されるというやり方。

これでも別に構わないのですが、頻繁に使用する場合に毎回記述するのは少し面倒です。後で装飾を変えたい時なども、個別の記事１つ１つを修正していかなければなりません。




そこでもう１つ
スタイルシートを使う方法

アメブロのCSSに次のように追記して保存

/* ■囲み枠・装飾１■ */
.waku1{
border: 1px solid #990000;
padding: 5px 5px 5px 5px;
background: #F9F9BA;
}

ちなみに
border～が枠線の太さ・形・色
padding～がborderからの余白
background～が背景の色
を表しています。


これでアメブロで記事を書くときにタグ編集エディタで

<div class="waku1">テキスト</div>

↑このように記述すれば

テキスト

↑こう表示されます。
※実際にこのブログで使用するCSSについては、枠線の色・背景色など変更しているので上記のCSSの記述通りには表示されないと思います。ご注意下さい。


このCSSを使用するやり方の場合には、後から変更したい時にもスタイルシートの内容を書き換えれば、一括して囲み枠の装飾を変える事が出来るので便利です。

ということで後者であるCSSに追記する方法を採用する事にしました。

・アメブロカスタマイズ目次