記事を枠線で囲う方法 | 矢沢永吉激論ブログ

矢沢永吉激論ブログ

全国矢沢永吉激論学會集団。

このブログでもよくやっているように記事を枠で囲って表示させているのはよく見ます。


多くの場合、<blockquote>か<fieldset>のタグを使ってます。


記事中の文章や記号を枠線で囲む方法

アメブロの本文に囲みを入れる方法(blockquote以外)


これは基本的な方法。


<blockquote>は引用タグと言われていて著作権のない文章を引用する時に使われるようです。Googleのエンジンも検索表示順位を決める材料にしているそうです。


表示を細かくカスタマイズするためにはCSSに追加する方法もありです


実際にブログを書きながら表示のテストをしているといろいろ気がつくことがあります。


<blockquote>を入れた時の枠線はIEで下書きをしている時にプレビュー画面で表示されない。

<fieldset>はプレビュー画面で表示される。

<fieldset>を使った記事を携帯やスマホで見ると枠線が表示されていない。


表示されない場合はどうすればいいか。

背景に色をつけるのもありですね。


ということでCSSにこういうコードを追加してみました。

参考までにどうぞ。



blockquote{
margin:15px 0;
padding:15px;
border:1px dotted #0066CC;
background-color: #EFEFEF;
}


fieldset{
margin:15px 0;
padding:15px;
border:1px dotted #0066CC;
background-color: #EFEFEF;
}



もし色をカスタマイズするならばこちらを参考にしてください。


WEB色見本 原色大辞典


基本設定からカスタマイズまで アメブロ 逆引きQ&A 101